Embeddable Cards provide a clean, responsive, and shareable card for any content on the web. Cards are the easiest way to leverage Pipfeed’s extract API for any media, Cards provide a responsive embed. 40% of Users will click, hover, or view Cards with videos, images, and rich media. Cards are responsive and adapt to automatically fit any site they are placed in.
But a lot of these embed APIs aren’t very customizable and usually results in a longer load time. Using Pipfeed’s extract API, you can generate a pure HTML code in the framework and style of your choice. For this example we will be using bootstrap cards to style the generated cards.
Extracting metadata from the article URL:
We want to get all the various fields such as the main image, title, description, etc. from the article itself. For this, we will use Pipfeed’s News Article Extract API. The API allows you 100 calls per day and 3000 calls per month for free. You can upgrade to one of our plans for a higher API call volume.
You can get API key from promptAPI here: https://promptapi.com/marketplace/description/pipfeed-api
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://api.promptapi.com/pipfeed",
CURLOPT_HTTPHEADER => array(
"Content-Type: text/plain",
"apikey: YOUR_API_KEY"
),
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 0,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS =>"https%3A%2F%2Fsystem.camp%2Fstartups%2Funderstanding-kpis-for-mobile-apps-and-how-to-measure-kpis%2F"
));
$response = curl_exec($curl);
curl_close($curl);
echo $response;For this example we are using PHP to generate the HTML code, you can use language of your choice to generate the code.
The above will return a response like this:
{
"authors": null,
"blogLogoUrl": null,
"blogName": null,
"categories": null,
"category": "machine-learning",
"description": "How to create a financial model for a mobile app? How to measure KPIs? What are KPIs? Learn all this and more...",
"html": "<div class=\"page\" id=\"readability-page-1\"><div>\n\t\n\n<p>KPIs are the ultimate indicator for how well you Mobile app is doing. KPI stands for Key Performance Indicator. The first rule of KPIs is that they need to be the \u201ckey indicators\u201d of your business model and should always relate to the financial model directly.</p>\n\n\n\n<p>Why? Because you want to quantify and improve these KPIs to help your company earn more money or get more users.</p>\n\n\n\n<p>The main goal of any app is either to make the sure users are using the app frequently or they are paying frequently. Hence it is hard to make a lot of profits from Utility apps like Calculators. These apps are really good but the overall usage is quite low and hence the Business Model will not make sense to build a company around these use-cases.</p>\n\n\n\n<p>Based on these metrics we can then define how much money the apps can make.</p>\n\n\n\n<h2 id=\"let-s-define-the-kpis-first-\">Let\u2019s define the KPIs first:</h2>\n\n\n\n<h3 id=\"retention-rate\">Retention Rate</h3>\n\n\n\n<p>Retention Rate is the most important metric for a mobile app. This defines the \u201cpercentage\u201d of users that are still using the app after a certain time has passed.</p>\n\n\n\n<p>For example: If your app has 1000 user signed up. After one month you check how many users have opened the app in the second month. So in second month if 300 users have opened the app then you retention rate is defined as :</p>\n\n\n\n<blockquote><p>300/1000 = 30%</p></blockquote>\n\n\n\n<p>So the retention rate is 30%. Industry average is around 15% to 60%. Mobile apps like Facebook, Instagram & watsapp have a retention rate of over 70% hence they have these insane valuations.</p>\n\n\n\n<h3 id=\"conversion-rate-\">Conversion Rate:</h3>\n\n\n\n<p>This metric is useful for mobile apps that offer a Subscription Model. Conversion rate in this scenario means how many users are converting to paid subscribers.</p>\n\n\n\n<p>For example: From the 300 Monthly Active Users(MAU) if 60 pay and become your subscribers then your conversion rate can be calculated as:</p>\n\n\n\n<blockquote><p>300/60 = 20%</p></blockquote>\n\n\n\n<p>Hence you have a 20% conversion rate. Industry average is around 10%. The Harvard Business Review found that even a 5% increase in retention could increase revenues by <a rel=\"noopener\" href=\"https://amplitude.com/blog/2016/01/27/understanding-user-retention\">25% to 95%</a>.</p>\n\n\n\n<h2 id=\"cost-per-acquisition-cpa-\">Cost Per Acquisition(CPA)</h2>\n\n\n\n<p>Cost Per Acquisition is defined as the average cost to acquire a user. This cost must be averaged out over long periods spanning multiple months to get the big picture.</p>\n\n\n\n<p>The other KPI metrics will help you understand how valuable is your app. But CPA defines if your app makes sense in terms of a viable business.</p>\n\n\n\n<p>There are various channels for acquiring users:</p>\n\n\n\n<ul><li>Ads (Google, Facebook, LinkedIn, Twitter, SnapChat, TikTok, Apple etc.)</li><li>Influencer Marketing</li><li>SEO/Blog Content</li><li>Directory Listings (ProductHunt, BetaFy etc.)</li><li>Community Forums</li><li>Direct Advertising (Podcasts, Rent Websites etc.)</li><li>And hundreds more</li></ul>\n\n\n\n<h2 id=\"lets-see-how-all-these-numbers-fit-in-a-financial-model-\">Lets see how all these numbers fit in a Financial Model:</h2>\n\n\n\n<p>The model is quite straightforward once you have the KPIs.</p>\n\n\n\n<p>In the below example we are looking at apps that earn from Subscription or Monthly Recurring Revenue.</p>\n\n\n\n<h2 id=\"now-let-s-look-at-apps-that-earn-from-subscription-only-\">Now let\u2019s look at apps that earn from Subscription only.</h2>\n\n\n\n<p>In this model we are also making an assumption that people are willing to pay for the service and a significant number of users exist that are willing to pay for the service you are providing. This is what truly a startup does, finds a service people are willing to pay for and make sure that there is a large number of users willing to pay for this service. If you have this then you have a great business that investors will be happy to invest in.</p>\n\n\n\n<p>We will look at an app like Pocket.</p>\n\n\n\n<h3 id=\"assumptions-\">Assumptions:</h3>\n\n\n\n<p><strong>Retention Rate:</strong> 30%<br><strong>Conversion Rate:</strong> 10%<br><strong>Monthly Subscription Cost:</strong> $4.99<br><strong>CPA:</strong> $1/-</p>\n\n\n\n<p>To get 1000 users we spend<br>Number of Users * CPA = 1000 USD</p>\n\n\n\n<p>Monthly Active Users<br>Total Users * Retention Rate<br>1000 * 30% = 300 MAU</p>\n\n\n\n<p>Subscription earning from MAU<br>MAU * Conversion Rate * Average Subscription Cost<br>300 * 10% * 4.99 = 149.7</p>\n\n\n\n<p>Yearly Subscription earning<br>149.7 * 12 = 1796.4</p>\n\n\n\n<p>Profits<br>$1796.4 \u2013 $1000 = $794.4</p>\n\n\n\n<p>So, if we spend 1000 dollars we earn a profit of 794.4. If you can scale this system to 100,000 users then your yearly profits become: $794,00.4. This is a pretty good & viable business model that investors will be ready to invest in to help you scale.</p>\n\n\n\n<p>Pocket had around 20 million users in 2015. So if we plug the numbers in the above model we get a yearly revenue from 20 million users at $15,888,000 (over 15 million dollars). Pocket app got acquired for around 30 million by Mozilla Foundation.</p>\n\n\n\n<p>SaaS usually have a retention rate of over 80%. Retention like this is required as the Cost Per Acquisition is pretty high. That\u2019s why you will see SaaS companies offering $10 to $1000 referral commission.</p>\n\n\n\n<h2 id=\"now-let-s-look-at-apps-that-earn-from-ads-only-\">Now let\u2019s look at apps that earn from Ads only.</h2>\n\n\n\n<p>For advertising based apps the most important number is Total Users & Retention.</p>\n\n\n\n<p>In mass consumer apps finding the total retained users is a bit tricky. These apps only make sense if the Retention Curve is a \u201cSmile\u201d curve like this:</p>\n\n\n\n<figure><span data-svq-align=\"\"><img data-src=\"https://system.camp/wp-content/uploads/2020/10/retention_smile_curve.png\" data-height=\"802\" data-width=\"1133\" alt=\"\" src=\"https://system.camp/wp-content/uploads/2020/10/retention_smile_curve.png\"><span></span></span><figcaption>Evernote Retention Curve. Source: https://www.sequoiacap.com/article/retention</figcaption></figure>\n\n\n\n<p>This below retention graph is an example of long tail retention. Where some percentage of your users choose to stick around for a longer time and hence make the financial model viable.</p>\n\n\n\n<figure><span data-svq-align=\"\"><img data-src=\"https://system.camp/wp-content/uploads/2020/10/retention-smile-flat.png\" data-height=\"600\" data-width=\"1014\" alt=\"\" src=\"https://system.camp/wp-content/uploads/2020/10/retention-smile-flat.png\"><span></span></span><figcaption>Retention Graph. Source: https://www.sequoiacap.com/article/retention</figcaption></figure>\n\n\n\n<p>You can use Retention curve graph to find if you Product Market Fit. I should probably write an article on understanding retention rates.</p>\n\n\n\n<p>In any case we assume the overall retention assuming you has a smile graph and your long tail users are sticking around and using the app. For this use case this is what the financial model will look like.</p>\n\n\n\n<p>Let\u2019s look an app like FlipBoard:</p>\n\n\n\n<h3 id=\"assumptions--1\">Assumptions:</h3>\n\n\n\n<p><strong>Retention Rate:</strong> 15%<br><strong>Average Earning from Ads/user/month:</strong> $0.5<br><strong>CPA:</strong> $0.5/-</p>\n\n\n\n<p>To get 1000 users we spend<br>Number of Users * CPA = $500</p>\n\n\n\n<p>Monthly Active Users<br>Total Users * Retention Rate<br>1000 * 15% = 150 MAU</p>\n\n\n\n<p>Ads earning from MAU<br>MAU * Average Earning From Ads Per User<br>150 * $0.5 = $75</p>\n\n\n\n<p>Yearly Ads earning<br>75 * 12 = 900</p>\n\n\n\n<p>Profits<br>$900 \u2013 $500 = $400</p>\n\n\n\n<p><strong>Earning per user overall: </strong>$0.4 per year</p>\n\n\n\n<p>Here we reduced the cost of customer acquisition to make sense of the model to $0.5. Unless you are able to achievea much lower CPA, advertising model will not work. Also ads based models only work for large number of user.</p>\n\n\n\n<p>FlipBoard has around 145 million Monthly Active Users. So putting these numbers into the above financial model we get their yearly revenue to be around:</p>\n\n\n\n<p>MAU * Average Earning from Ads/User * Months In Year</p>\n\n\n\n<p>145 million MAU * $0.5 * 12 = $870 Million</p>\n\n\n\n<p>The above model should be taken with a grain of Salt. This is a good model for \u201cpredicting\u201d the possible outcome and usually at really large scale it depends on the business on how they chose to monetize.</p>\n\n\n\n<p>Usually mobile apps with such large number do direct deals with advertisers and are able to increase their annual earning. Flipboard doesn\u2019t have an advertising platform like Facebook and deals with large advertisers/big companies directly.</p>\n\n\n\n<p>In some cases the goal is not just to increase the annual ads expenditure but maintain a consistent influx of ads revenue. This is a model followed by FlipBoard. They usually do month long or year long deals with Big Brands to have a consistent cash flow.</p>\n\n\n\n<p>The other big factor that defines how much you can charge for ads is the type of users you have. For apps like tiktok, most users fall in younger category and hence ads targeted at younger audience. These users have a lower monthly earning and are not that attractive to advertisers unless they can reach a really large number of users.</p>\n\n\n\n<p>LinkedIn can charge more for its ads as the users using the platform are mostly professionals. It is very hard to find professionals to advertise to on the Internet. This is what Microsoft saw when they acquired LinkedIn for $26.2 Billion.</p>\n\n\n\n<h2 id=\"how-to-use-this-model\">How to use this Model</h2>\n\n\n\n<p>So this was a guide on creating a Financial model for mobile apps. To use the above strategy to provide a more realistic model try to make your assumptions based on real world data.</p>\n\n\n\n<p>Before starting you should ask these questions:</p>\n\n\n\n<ul><li>Are user willing to pay for your service?</li><li>How much are they willing to pay?</li><li>How many users are there that you can realistically reach?</li></ul>\n\n\n\n<p>If you have answers to these problems that you can create a much more realistic model. It is very easy to validate your idea even before starting. Find your potential paying customers and ask them if they would want a service like this and they are willing to pay for this.</p>\n\n\n\n<p>Hope you like this guide and I hope it provides a framework for your startup. Wish you all the best.</p>\n\n\n\n<p>Let me know in the comments what you think.</p>\n\n\t\n\n<div>\n <div>\n <div>\n <p><a rel=\"author\" href=\"https://system.camp/profile/shashank/\">\n\t\t\t\t\t<img loading=\"lazy\" width=\"80\" height=\"80\" srcset=\"https://secure.gravatar.com/avatar/33563973b6f338002e574f30a3f94788?s=160&d=mm&r=g 2x\" src=\"https://secure.gravatar.com/avatar/33563973b6f338002e574f30a3f94788?s=80&d=mm&r=g\" alt=\"\"> </a>\n </p>\n <p><span>\n \n </span>\n <span>\n <span>Member since</span>\n <time datetime=\"2020-10-05 07:14\">\n October 6, 2020 </time>\n </span>\n </p>\n\n\t\t\t\n\t \n\n\t\t\t\n </div>\n\t\t </div>\n\n\t\n\t</div>\n</div></div>",
"images": [
"https://system.camp/wp-content/uploads/2020/10/Calling-WordPress-REST-APIs-to-create-users-articles-posts-etc.-with-examples-using-JAVA.png",
"https://system.camp/wp-content/uploads/2020/10/Batch-load-objects-using-dynamoDBMapper.png",
"https://system.camp/wp-content/uploads/2019/09/onboard_image_06.min_.png",
"https://system.camp/wp-content/uploads/2020/10/Calling-WordPress-REST-APIs-to-create-users-articles-posts-etc.-with-examples-using-JAVA-150x150.png",
"https://system.camp/wp-content/uploads/2020/10/Teal-Autumn-Leaves-Facebook-Cover-150x150.png",
"https://system.camp/wp-content/plugins/front-user-profile/assets/img/cat-placeholder.png",
"https://system.camp/wp-content/uploads/2020/10/Batch-load-objects-using-dynamoDBMapper-150x150.png",
"https://system.camp/wp-content/uploads/2020/10/Understanding-Financial-Model-using-KPIs-for-mobile-apps-A-definitive-Guide-1-1024x390.jpg",
"https://system.camp/wp-content/uploads/2020/10/Ocean-Beach-Wedding-Facebook-Cover.png",
"https://system.camp/wp-content/uploads/2020/10/How-to-parse-Google-Search-result-in-Java-150x150.jpg",
"https://system.camp/wp-content/themes/typer/assets/img/placeholder.png",
"https://secure.gravatar.com/avatar/33563973b6f338002e574f30a3f94788?s=60&d=mm&r=g",
"https://system.camp/wp-content/uploads/2020/10/The-simplest-way-to-sort-HapMap_String-Object_-in-JAVA.png",
"https://system.camp/wp-content/uploads/2020/10/cropped-logo-1.png",
"https://system.camp/wp-content/uploads/2020/10/Ocean-Beach-Wedding-Facebook-Cover-150x150.png",
"https://system.camp/wp-content/uploads/2020/10/retention-smile-flat.png",
"https://system.camp/wp-content/uploads/2019/09/onboard_image_07.min_.png",
"https://system.camp/wp-content/uploads/2020/10/How-to-parse-Google-Search-result-in-Java.jpg",
"https://system.camp/wp-content/uploads/2020/10/retention_smile_curve.png",
"https://system.camp/wp-content/uploads/2020/10/Teal-Autumn-Leaves-Facebook-Cover.png",
"https://secure.gravatar.com/avatar/33563973b6f338002e574f30a3f94788?s=80&d=mm&r=g",
"https://system.camp/wp-content/uploads/2019/09/onboard_image_05.min_.png",
"https://system.camp/wp-content/uploads/2020/10/The-simplest-way-to-sort-HapMap_String-Object_-in-JAVA-150x150.png",
"https://system.camp/wp-content/uploads/2020/10/Understanding-Financial-Model-using-KPIs-for-mobile-apps-A-definitive-Guide-1.jpg"
],
"keywords": [
"ads",
"app",
"apps",
"earning",
"financial",
"kpis",
"mobile",
"model",
"pay",
"rate",
"retention",
"understanding",
"users",
"willing"
],
"language": "en",
"mainImage": "https://system.camp/wp-content/uploads/2020/10/Understanding-Financial-Model-using-KPIs-for-mobile-apps-A-definitive-Guide-1-1024x390.jpg",
"predictedCategories": [
"machine-learning",
"money",
"data-science"
],
"publishedAt": null,
"summary": "The first rule of KPIs is that they need to be the \u201ckey indicators\u201d of your business model and should always relate to the financial model directly.\nSo in second month if 300 users have opened the app then you retention rate is defined as :300/1000 = 30%So the retention rate is 30%.\nMobile apps like Facebook, Instagram & watsapp have a retention rate of over 70% hence they have these insane valuations.\nConversion Rate:This metric is useful for mobile apps that offer a Subscription Model.\nHow to use this ModelSo this was a guide on creating a Financial model for mobile apps.",
"tags": [
"Apps"
],
"text": "KPIs are the ultimate indicator for how well you Mobile app is doing. KPI stands for Key Performance Indicator. The first rule of KPIs is that they need to be the \u201ckey indicators\u201d of your business model and should always relate to the financial model directly. Why? Because you want to quantify and improve these KPIs to help your company earn more money or get more users. The main goal of any app is either to make the sure users are using the app frequently or they are paying frequently. Hence it is hard to make a lot of profits from Utility apps like Calculators. These apps are really good but the overall usage is quite low and hence the Business Model will not make sense to build a company around these use-cases. Based on these metrics we can then define how much money the apps can make. Let\u2019s define the KPIs first: Retention Rate Retention Rate is the most important metric for a mobile app. This defines the \u201cpercentage\u201d of users that are still using the app after a certain time has passed. For example: If your app has 1000 user signed up. After one month you check how many users have opened the app in the second month. So in second month if 300 users have opened the app then you retention rate is defined as : 300/1000 = 30% So the retention rate is 30%. Industry average is around 15% to 60%. Mobile apps like Facebook, Instagram & watsapp have a retention rate of over 70% hence they have these insane valuations. Conversion Rate: This metric is useful for mobile apps that offer a Subscription Model. Conversion rate in this scenario means how many users are converting to paid subscribers. For example: From the 300 Monthly Active Users(MAU) if 60 pay and become your subscribers then your conversion rate can be calculated as: 300/60 = 20% Hence you have a 20% conversion rate. Industry average is around 10%. The Harvard Business Review found that even a 5% increase in retention could increase revenues by 25% to 95%. Cost Per Acquisition(CPA) Cost Per Acquisition is defined as the average cost to acquire a user. This cost must be averaged out over long periods spanning multiple months to get the big picture. The other KPI metrics will help you understand how valuable is your app. But CPA defines if your app makes sense in terms of a viable business. There are various channels for acquiring users: Ads (Google, Facebook, LinkedIn, Twitter, SnapChat, TikTok, Apple etc.) Influencer Marketing SEO/Blog Content Directory Listings (ProductHunt, BetaFy etc.) Community Forums Direct Advertising (Podcasts, Rent Websites etc.) And hundreds more Lets see how all these numbers fit in a Financial Model: The model is quite straightforward once you have the KPIs. In the below example we are looking at apps that earn from Subscription or Monthly Recurring Revenue. Now let\u2019s look at apps that earn from Subscription only. In this model we are also making an assumption that people are willing to pay for the service and a significant number of users exist that are willing to pay for the service you are providing. This is what truly a startup does, finds a service people are willing to pay for and make sure that there is a large number of users willing to pay for this service. If you have this then you have a great business that investors will be happy to invest in. We will look at an app like Pocket. Assumptions: Retention Rate: 30% Conversion Rate: 10% Monthly Subscription Cost: $4.99 CPA: $1/- To get 1000 users we spend Number of Users * CPA = 1000 USD Monthly Active Users Total Users * Retention Rate 1000 * 30% = 300 MAU Subscription earning from MAU MAU * Conversion Rate * Average Subscription Cost 300 * 10% * 4.99 = 149.7 Yearly Subscription earning 149.7 * 12 = 1796.4 Profits $1796.4 \u2013 $1000 = $794.4 So, if we spend 1000 dollars we earn a profit of 794.4. If you can scale this system to 100,000 users then your yearly profits become: $794,00.4. This is a pretty good & viable business model that investors will be ready to invest in to help you scale. Pocket had around 20 million users in 2015. So if we plug the numbers in the above model we get a yearly revenue from 20 million users at $15,888,000 (over 15 million dollars). Pocket app got acquired for around 30 million by Mozilla Foundation. SaaS usually have a retention rate of over 80%. Retention like this is required as the Cost Per Acquisition is pretty high. That\u2019s why you will see SaaS companies offering $10 to $1000 referral commission. Now let\u2019s look at apps that earn from Ads only. For advertising based apps the most important number is Total Users & Retention. In mass consumer apps finding the total retained users is a bit tricky. These apps only make sense if the Retention Curve is a \u201cSmile\u201d curve like this: Evernote Retention Curve. Source: https://www.sequoiacap.com/article/retention This below retention graph is an example of long tail retention. Where some percentage of your users choose to stick around for a longer time and hence make the financial model viable. Retention Graph. Source: https://www.sequoiacap.com/article/retention You can use Retention curve graph to find if you Product Market Fit. I should probably write an article on understanding retention rates. In any case we assume the overall retention assuming you has a smile graph and your long tail users are sticking around and using the app. For this use case this is what the financial model will look like. Let\u2019s look an app like FlipBoard: Assumptions: Retention Rate: 15% Average Earning from Ads/user/month: $0.5 CPA: $0.5/- To get 1000 users we spend Number of Users * CPA = $500 Monthly Active Users Total Users * Retention Rate 1000 * 15% = 150 MAU Ads earning from MAU MAU * Average Earning From Ads Per User 150 * $0.5 = $75 Yearly Ads earning 75 * 12 = 900 Profits $900 \u2013 $500 = $400 Earning per user overall: $0.4 per year Here we reduced the cost of customer acquisition to make sense of the model to $0.5. Unless you are able to achievea much lower CPA, advertising model will not work. Also ads based models only work for large number of user. FlipBoard has around 145 million Monthly Active Users. So putting these numbers into the above financial model we get their yearly revenue to be around: MAU * Average Earning from Ads/User * Months In Year 145 million MAU * $0.5 * 12 = $870 Million The above model should be taken with a grain of Salt. This is a good model for \u201cpredicting\u201d the possible outcome and usually at really large scale it depends on the business on how they chose to monetize. Usually mobile apps with such large number do direct deals with advertisers and are able to increase their annual earning. Flipboard doesn\u2019t have an advertising platform like Facebook and deals with large advertisers/big companies directly. In some cases the goal is not just to increase the annual ads expenditure but maintain a consistent influx of ads revenue. This is a model followed by FlipBoard. They usually do month long or year long deals with Big Brands to have a consistent cash flow. The other big factor that defines how much you can charge for ads is the type of users you have. For apps like tiktok, most users fall in younger category and hence ads targeted at younger audience. These users have a lower monthly earning and are not that attractive to advertisers unless they can reach a really large number of users. LinkedIn can charge more for its ads as the users using the platform are mostly professionals. It is very hard to find professionals to advertise to on the Internet. This is what Microsoft saw when they acquired LinkedIn for $26.2 Billion. How to use this Model So this was a guide on creating a Financial model for mobile apps. To use the above strategy to provide a more realistic model try to make your assumptions based on real world data. Before starting you should ask these questions: Are user willing to pay for your service? How much are they willing to pay? How many users are there that you can realistically reach? If you have answers to these problems that you can create a much more realistic model. It is very easy to validate your idea even before starting. Find your potential paying customers and ask them if they would want a service like this and they are willing to pay for this. Hope you like this guide and I hope it provides a framework for your startup. Wish you all the best. Let me know in the comments what you think. Member since October 6, 2020",
"title": "Understanding Financial Model and KPIs for mobile apps",
"url": "https://system.camp/startups/understanding-kpis-for-mobile-apps-and-how-to-measure-kpis/"
}Embed.ly like generated code
Our goal is to create a card that looks like the one generated by embed.ly. Below is the embed code generated by embedly’s code generator: https://embed.ly/code?url=https%3A%2F%2Fsystem.camp%2Fstartups%2Funderstanding-kpis-for-mobile-apps-and-how-to-measure-kpis%2F . You can generate the code for any URL.
Generated code:
<blockquote class="embedly-card"><h4><a href="https://system.camp/startups/understanding-kpis-for-mobile-apps-and-how-to-measure-kpis/">Understanding Financial Model and KPIs for mobile apps - A definitive Guide - System.Camp</a></h4><p>KPIs are the ultimate indicator for how well you Mobile app is doing. KPI stands for Key Performance Indicator. The first rule of KPIs is that they need to be the "key indicators" of your business model and should always relate to the financial model directly. Why?</p></blockquote>
<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>This is how the rendered HTML from embed.ly looks like
Understanding Financial Model and KPIs for mobile apps – A definitive Guide – System.Camp
KPIs are the ultimate indicator for how well you Mobile app is doing. KPI stands for Key Performance Indicator. The first rule of KPIs is that they need to be the “key indicators” of your business model and should always relate to the financial model directly. Why?
Using Bootstrap Cards Component
Bootstrap is an amazing library that provides various kinds of cards that are responsive and looks very pretty. You can see the various types of Bootstrap cards here: https://getbootstrap.com/docs/4.0/components/card/
This is the code we want to generate using PHP
<div class="card" style="max-width: 600px; padding: 0px; position: relative; min-width: 200px; margin: 5px auto;">
<img class="h-auto d-inline-block" src="https://system.camp/wp-content/uploads/2020/10/Understanding-Financial-Model-using-KPIs-for-mobile-apps-A-definitive-Guide-1-1024x390.jpg" alt="Understanding Financial Model and KPIs for mobile apps">
<div class="card-body">
<h5 class="card-title">Understanding Financial Model and KPIs for mobile apps</h5>
<p class="card-text">How to create a financial model for a mobile app? How to measure KPIs? What are KPIs? Learn all this and more...</p>
<a href="https://system.camp/startups/understanding-kpis-for-mobile-apps-and-how-to-measure-kpis/" target="_blank" class="btn btn-primary">Read more...</a>
</div>
</div>Putting it all together
From the returned article extract response we will be using these fields
- Title
- Description
- Main Image
- Url
For Bootstrap to work you will need to import Bootstrap’s css, js and also jquery in your headers. Most websites will have this already imported in their header so please check. If not then please add these imports to your headers.
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"><!-- Latest compiled and minified JavaScript --><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>Let’s put this all together in our PHP script:
<!doctype html>
<html lang="en">
<head>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head><body><?php
$curl = curl_init();
curl_setopt_array($curl, array( CURLOPT_URL => "https://api.promptapi.com/pipfeed", CURLOPT_HTTPHEADER => array( "Content-Type: text/plain", "apikey: jQHpezlBNvwdjW41WcExce6mcn5yz8sW" ), CURLOPT_RETURNTRANSFER => true, CURLOPT_ENCODING => "", CURLOPT_MAXREDIRS => 10, CURLOPT_TIMEOUT => 0, CURLOPT_FOLLOWLOCATION => true, CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1, CURLOPT_CUSTOMREQUEST => "POST", CURLOPT_POSTFIELDS => "https://system.camp/startups/understanding-kpis-for-mobile-apps-and-how-to-measure-kpis/"
));
$response = curl_exec($curl);
curl_close($curl);
$extractedArticle = json_decode($response);
//var_dump($extractedArticle);
//var_dump($extractedArticle->title);
?><div class="container"> <div class="card" style="max-width: 600px; padding: 0px; position: relative; min-width: 200px; margin: 5px auto;"> <img class="h-auto d-inline-block" src="<?php echo $extractedArticle->mainImage ?>" alt="<?php echo $extractedArticle->title ?>"> <div class="card-body"> <h5 class="card-title"><?php echo $extractedArticle->title ?></h5> <p class="card-text"><?php echo $extractedArticle->description ?></p> <a href="<?php echo $extractedArticle->url ?>" target="_blank" class="btn btn-primary">Read more...</a> </div> </div></div></body>This is how the rendered HTML looks like
Understanding Financial Model and KPIs for mobile apps
How to create a financial model for a mobile app? How to measure KPIs? What are KPIs? Learn all this and more…
Read more…You can customize the generated embedding code based on your preferences. For example, you can use the “Summary” or show the first 4 lines from the article content or use all images and show them as a carousel. You can customize the embeddings the way you prefer.
Let me know what you think of the tutorial in the comments below.
