{"id":3615,"date":"2017-08-16T08:55:23","date_gmt":"2017-08-16T08:55:23","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=3615"},"modified":"2017-08-16T08:59:05","modified_gmt":"2017-08-16T08:59:05","slug":"make-money-google-admob-ads-ionic-framework-3","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/javascript\/ionic3\/make-money-google-admob-ads-ionic-framework-3\/","title":{"rendered":"How to make money with Google AdMob ads in Ionic framework 3"},"content":{"rendered":"<blockquote><p>\n  In case you&#8217;re looking for a way to implement Google AdMob ads in Ionic framework 1, then check out this tutorial: <a href=\"http:\/\/www.nikola-breznjak.com\/blog\/codeproject\/adding-admob-to-ionic-framework-application-step-by-step\/\">Adding AdMob to Ionic framework application step by step<\/a>.\n<\/p><\/blockquote>\n<h2>Introduction<\/h2>\n<p>There are multiple ways you can earn money with your app these days and here are just a few of them:<\/p>\n<ul>\n<li><strong>Paid app<\/strong> &#8211; set a price for your app directly on the App\/Play Store that users need to pay before downloading your app<\/li>\n<li><strong>Freemium<\/strong> &#8211; give the app for free but charge for in-app purchases like adding some extra features (think more gold or faster production in game apps)<\/li>\n<li><strong>Ad-based<\/strong> &#8211; show ads inside your application. Potentially offer the in-app purchase to remove the ads<\/li>\n<\/ul>\n<p>In this post, I&#8217;m going to cover the Ad-based monetization option, and I&#8217;ll show you how to add Google AdMob ads to a simple Ionic 3 blank template application. There are two parts to implementing Google AdMob ads to an Ionic project and I broke them into: <strong>AdMob settings<\/strong> and <strong>Ionic settings<\/strong>.<\/p>\n<h2>Demo app and repo<\/h2>\n<p>You can check the final code on <a href=\"https:\/\/github.com\/Hitman666\/Ionic3AdMobTest\">Github<\/a>. When you clone it, run <code>npm install<\/code> inside the project. In case you have your development machine set up for Ionic, then you can run the project with <code>ionic emulate ios<\/code> or <code>ionic emulate android<\/code>. If you don&#8217;t but would like to, see this post on <a href=\"http:\/\/www.nikola-breznjak.com\/blog\/javascript\/ionic3\/get-started-ionic-framework-3-mac-windows\/\">How to get started with Ionic framework 3 on Mac and Windows<\/a>.<\/p>\n<p>You should see something like this in your simulator\/emulator:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/9L5N5nj.gif\" alt=\"\" \/><\/p>\n<h2>AdMob settings<\/h2>\n<p>Let&#8217;s start with AdMob settings:<\/p>\n<ol>\n<li>Sign in\/Sign up for AdMob at <a href=\"https:\/\/www.google.com\/admob\/\">https:\/\/www.google.com\/admob\/<\/a><\/li>\n<li>Click the <strong>Apps<\/strong> and then <strong>ADD APP<\/strong> button:<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/QVyB7xP.png\" alt=\"\" \/><\/p>\n<ol>\n<li>Since our app is not published yet we will click the <strong>No<\/strong> button:<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/0Gv0dMe.png\" alt=\"\" \/><\/p>\n<ol>\n<li>Fill in the app name and platform and click the <strong>ADD<\/strong> button:<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/6lvQBKD.png\" alt=\"\" \/><\/p>\n<ol>\n<li>Save the App ID somewhere and proceed to create the Ad unit<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/RtiQyeP.png\" alt=\"\" \/><\/p>\n<ol>\n<li>Select Banner Ad format:<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/zRG8SgJ.png\" alt=\"\" \/><\/p>\n<ol>\n<li>Configure the adds type, size, placement, style, name:<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/pQYT4uG.png\" alt=\"\" \/><\/p>\n<ol>\n<li>You can read additional info on how to implement GA and AdMob, but for now let&#8217;s just click Done:<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/kbZY18b.png\" alt=\"\" \/><\/p>\n<ol>\n<li>You will now see the following similar screen:<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/MujS4pC.png\" alt=\"\" \/><\/p>\n<p>The most important thing to note here is this <strong>Ad unit ID<\/strong>, which in my test case is <strong>ca-app-pub-7957971173858308\/5068937357<\/strong>. Make a note of this string as it&#8217;s the most important part of this setting. <em>You can click on the copy to clipboard button and paste it as a comment (for now) in your app.<\/em><\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/6f1MO7a.png\" alt=\"\" \/><\/p>\n<ol>\n<li>Create as much Ad units as you may need (for each platform[iOS, Android] and ad format [Banner, Interstitial, etc.]). In my case, I just created the additional Interstitial Ad and will use them on both iOS and Android devices for the purpose of this demo.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/6qb2dum.png\" alt=\"\" \/><\/p>\n<h2>Ionic settings<\/h2>\n<p>Those of you familiar with Ionic 1 know that you can add any plugin to your Ionic project thanks to the project called <a href=\"http:\/\/ngcordova.com\/\">ngCordova<\/a>. For Ionic 3, there&#8217;s the same thing called <a href=\"https:\/\/ionicframework.com\/docs\/native\/\">Ionic Native<\/a>.<\/p>\n<p>Ionic Native is a TypeScript wrapper for Cordova\/PhoneGap plugins that makes it easy to add any native functionality that you may need into your Ionic app. Ionic Native wraps the plugin callbacks in a Promise or an Observable, providing a common interface for all plugins and ensuring that native events trigger change detection in Angular.<\/p>\n<p>First, let&#8217;s start an empty Ionic 3 application based on the blank template:<\/p>\n<p><code>ionic start Ionic3AdMobTest blank --cordova<\/code><\/p>\n<p>You should see the following output:<\/p>\n<pre><code>\u2714 Creating directory .\/Ionic3AdMobTest - done!\n[INFO] Fetching app base (https:\/\/github.com\/ionic-team\/ionic2-app-base\/archive\/master.tar.gz)\n\u2714 Downloading - done!\n[INFO] Fetching starter template blank (https:\/\/github.com\/ionic-team\/ionic2-starter-blank\/archive\/master.tar.gz)\n\u2714 Downloading - done!\n\u2714 Updating package.json with app details - done!\n\u2714 Creating configuration file ionic.config.json - done!\n[INFO] Installing dependencies may take several minutes!\n&gt; npm install\n\u2714 Running command - done!\n&gt; npm install --save-dev --save-exact ionic@latest\n\u2714 Running command - done!\n&gt; npm install --save-dev --save-exact @ionic\/cli-plugin-ionic-angular@latest\n\u2714 Running command - done!\n&gt; npm install --save-dev --save-exact @ionic\/cli-plugin-cordova@latest\n\u2714 Running command - done!\n&gt; npm dedupe\n\u2714 Running command - done!\n&gt; git init\n\u2714 Running command - done!\n&gt; git add -A\n\u2714 Running command - done!\n&gt; git commit -m \"Initial commit\" --no-gpg-sign\n\u2714 Running command - done!\n\n\u266c \u266b \u266c \u266b  Your Ionic app is ready to go! \u266c \u266b \u266c \u266b\n\nRun your app in the browser (great for initial development):\n  ionic serve\n\nRun on a device or simulator:\n  ionic cordova run ios\n\nTest and share your app on a device with the Ionic View app:\n  http:\/\/view.ionic.io\n\n\nNext Steps:\nGo to your newly created project: cd .\/Ionic3AdMobTest\n<\/code><\/pre>\n<p>Navigate to the root of the application with your Terminal\/Command prompt and execute the following command to add the <a href=\"https:\/\/ionicframework.com\/docs\/native\/admob-pro\/\">cordova-plugin-admobpro<\/a> plugin:<\/p>\n<p><code>ionic cordova plugin add cordova-plugin-admobpro<\/code><\/p>\n<p>You should see the following output after running the command:<\/p>\n<pre><code>\u2714 Running command - done!\nAdding cordova-plugin-admobpro to package.json\nSaved plugin info for \"cordova-plugin-admobpro\" to config.xml\n<\/code><\/pre>\n<p>Additionally, you will also need to run this command:<\/p>\n<p><code>npm install --save @ionic-native\/admob-pro<\/code><\/p>\n<p>which, if completed successfully, will only output something like <code>added 1 package in 3.331s<\/code> to the console.<\/p>\n<p>You need to add this second command as well because this installs some files needed by TypeScript.<\/p>\n<blockquote><p>\n  \u26a0\ufe0f At this point, depending on the version of Ionic CLI that you have you may need to add a platform by executing: <code>ionic cordova platform add ios<\/code> or <code>ionic cordova platform add android<\/code> depending on the platform you&#8217;re trying to build for. You have to execute that if the command <code>ionic cordova platform ls<\/code> shows that you don&#8217;t have any installed platforms on the current project:<\/p>\n<pre><code>\u2192 ionic cordova platform ls\n\u2714 cordova platform ls - done!\nInstalled platforms:\nAvailable platforms: \n android ~6.2.2\n blackberry10 ~3.8.0 (deprecated)\n browser ~4.1.0\n ios 4.4.0\n osx ~4.0.1\n webos ~3.7.0\n<\/code><\/pre>\n<p>  If everything is fine with running <code>ionic cordova platform add ios<\/code> you will see an output like this:<\/p>\n<pre><code>Using cordova-fetch for cordova-ios@~4.4.0\nAdding ios project...\nCreating Cordova project for the iOS platform:\n    Path: platforms\/ios\n    Package: io.ionic.starter\n    Name: MyApp\niOS project created with cordova-ios@4.4.0\nInstalling \"cordova-plugin-admobpro\" for ios\nInstalling \"cordova-plugin-extension\" for ios\nDiscovered plugin \"cordova-plugin-console\" in config.xml. Adding it to &gt; the project\nInstalling \"cordova-plugin-console\" for ios\nAdding cordova-plugin-console to package.json\nSaved plugin info for \"cordova-plugin-console\" to config.xml\nDiscovered plugin \"cordova-plugin-device\" in config.xml. Adding it to &gt; the project\nInstalling \"cordova-plugin-device\" for ios\nAdding cordova-plugin-device to package.json\nSaved plugin info for \"cordova-plugin-device\" to config.xml\nDiscovered plugin \"cordova-plugin-splashscreen\" in config.xml. Adding &gt; it to the project\nInstalling \"cordova-plugin-splashscreen\" for ios\nAdding cordova-plugin-splashscreen to package.json\nSaved plugin info for \"cordova-plugin-splashscreen\" to config.xml\nDiscovered plugin \"cordova-plugin-statusbar\" in config.xml. Adding it &gt; to the project\nInstalling \"cordova-plugin-statusbar\" for ios\nAdding cordova-plugin-statusbar to package.json\nSaved plugin info for \"cordova-plugin-statusbar\" to config.xml\nDiscovered plugin \"cordova-plugin-whitelist\" in config.xml. Adding it &gt; to the project\nInstalling \"cordova-plugin-whitelist\" for ios\nAdding cordova-plugin-whitelist to package.json\nSaved plugin info for \"cordova-plugin-whitelist\" to config.xml\nDiscovered plugin \"ionic-plugin-keyboard\" in config.xml. Adding it to &gt; the project\nInstalling \"ionic-plugin-keyboard\" for ios\nAdding ionic-plugin-keyboard to package.json\nSaved plugin info for \"ionic-plugin-keyboard\" to config.xml\n--save flag or autosave detected\nSaving ios@~4.4.0 into config.xml file ...\n\u2714 Copying default image resources into .\/resources\/ios - done!\n<\/code><\/pre>\n<\/blockquote>\n<p>Btw, there is also a <a href=\"https:\/\/ionicframework.com\/docs\/native\/admob-free\/\">free version<\/a> of the AdMob Pro plugin. But, honestly, if you really start making money with your app, this will be a minor expense. <em>Besides, if you&#8217;re having problems giving back to the actual plugin through which you&#8217;re making money then my dear padawan you have yet much to learn&#8230;<\/em><\/p>\n<p>Now, let&#8217;s add this plugin to our app&#8217;s NgModule. In the <code>src\/app\/app.module.ts<\/code> file import <code>AdmobPro<\/code>:<\/p>\n<p><code>import { AdMobPro } from '@ionic-native\/admob-pro';<\/code><\/p>\n<p>and then add it to the <code>Providers<\/code> array. The whole contents of the <code>src\/app\/app.module.ts<\/code> file should now looks like this:<\/p>\n<pre><code>import { BrowserModule } from '@angular\/platform-browser';\nimport { ErrorHandler, NgModule } from '@angular\/core';\nimport { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';\nimport { SplashScreen } from '@ionic-native\/splash-screen';\nimport { StatusBar } from '@ionic-native\/status-bar';\n\nimport { AdMobPro } from '@ionic-native\/admob-pro';\n\nimport { MyApp } from '.\/app.component';\nimport { HomePage } from '..\/pages\/home\/home';\n\n@NgModule({\n    declarations: [\n        MyApp,\n        HomePage\n    ],\n    imports: [\n        BrowserModule,\n        IonicModule.forRoot(MyApp)\n    ],\n    bootstrap: [IonicApp],\n    entryComponents: [\n        MyApp,\n        HomePage\n    ],\n    providers: [\n        StatusBar,\n        SplashScreen,\n        AdMobPro,\n        { provide: ErrorHandler, useClass: IonicErrorHandler }\n    ]\n})\nexport class AppModule { }\n<\/code><\/pre>\n<p>Now I&#8217;m going to show you the final content of the <code>src\/pages\/home\/home.ts<\/code> file and will explain what was changed step by step:<\/p>\n<pre><code>import { Component } from '@angular\/core';\nimport { NavController } from 'ionic-angular';\n\nimport { AdMobPro } from '@ionic-native\/admob-pro';\nimport { Platform } from 'ionic-angular';\n\n@Component({\n    selector: 'page-home',\n    templateUrl: 'home.html'\n})\nexport class HomePage {\n    constructor(public navCtrl: NavController, platform: Platform, private admob: AdMobPro) {\n        platform.ready().then(() =&gt; {\n            var admobid = {\n                banner: 'ca-app-pub-7957971173858308\/5068937357',\n                interstitial: 'ca-app-pub-7957971173858308\/5667703151'\n            };\n\n            this.admob.createBanner({\n                adId: admobid.banner,\n                isTesting: true,\n                autoShow: true,\n                position: this.admob.AD_POSITION.BOTTOM_CENTER\n            })\n\n            this.admob.prepareInterstitial({\n                adId: admobid.interstitial,\n                isTesting: true,\n                autoShow: false\n            })\n        });\n    }\n\n    showInterstitialAd() {\n        if (AdMobPro) {\n            this.admob.showInterstitial();\n        }\n    }\n}\n<\/code><\/pre>\n<p>First, we added the imports:<\/p>\n<pre><code>import { AdMobPro } from '@ionic-native\/admob-pro';\nimport { Platform } from 'ionic-angular';\n<\/code><\/pre>\n<p>Then, via the constructor we injected <code>Platform<\/code> and <code>AdMobPro<\/code>:<\/p>\n<p><code>constructor(public navCtrl: NavController, platform: Platform, private admob: AdMobPro)<\/code><\/p>\n<p>Then we wrapped everything in the <code>platform.ready()<\/code> promise. This is the <strong>most important<\/strong> part of the code! If you wouldn&#8217;t do that, it could happen that your app would start up and the plugins would still not be properly set up, and you wouldn&#8217;t see the ads displayed.<\/p>\n<p>But then again, sometimes you would, and this is what it would make it a nightmare to debug. This is a very common issue that I&#8217;ve seen even back from Ionic 1 when answering the questions on <a href=\"https:\/\/stackoverflow.com\/users\/534755\/nikola?tab=answers\">StackOverflow<\/a>. So, you may want to keep an ?\ufe0f on the fact that you need to wrap any plugin calls inside the <code>platform.ready()<\/code> promise, as that way you&#8217;ll be sure that all of the plugins have loaded before you&#8217;ll use them.<\/p>\n<p>The code that&#8217;s executed after the promise resolves sets up our <code>admobid<\/code> object with <code>banner<\/code> and <code>interstitial<\/code> properties. Then we&#8217;re calling the <code>createBanner<\/code> and <code>prepareInterstitial<\/code> functions on the injected <code>admob<\/code> object. Note how the banner is set to show automatically when the app loads (<code>autoShow: true<\/code>) and the interstitial isn&#8217;t. Also, note how we&#8217;ve set the position of the banner ad to the bottom:<\/p>\n<pre><code>platform.ready().then(() =&gt; {\n    var admobid = {\n        banner: 'ca-app-pub-7957971173858308\/5068937357',\n        interstitial: 'ca-app-pub-7957971173858308\/5667703151'\n    };\n\n    this.admob.createBanner({\n        adId: admobid.banner,\n        isTesting: true,\n        autoShow: true,\n        position: this.admob.AD_POSITION.BOTTOM_CENTER\n    })\n\n    this.admob.prepareInterstitial({\n        adId: admobid.interstitial,\n        isTesting: true,\n        autoShow: false\n    })\n});\n<\/code><\/pre>\n<p>Then we added the <code>showshowInterstitialAdAd<\/code> function, which shows the Interstitial ad:<\/p>\n<pre><code>showInterstitialAd() {\n    if (AdMobPro) {\n        this.admob.showInterstitial();\n    }\n}\n<\/code><\/pre>\n<p>Of course, at this point, change the <code>admobid<\/code> object properties to your AdMob keys which you obtained in the first part (step 9).<\/p>\n<blockquote><p>\n  ? If you run into any problems with this, just ping in the comments, and I&#8217;ll do my best to help you.\n<\/p><\/blockquote>\n<p>One common thing that you might have to do for <strong>Android<\/strong> is to install some extras via the Android SDK manager. To do so open Android Studio and select <code>Configure-&gt;SDK Manager<\/code>:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/i4DL8zk.png\" alt=\"\" \/><\/p>\n<p>Make sure you have installed the packages marked as <strong>Installed<\/strong> on the image below (usually, those are <strong>Google Billing Library<\/strong> and <strong>Google Play services<\/strong>):<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/dcM2rDs.png\" alt=\"\" \/><\/p>\n<h2>What kind of an ad should you show?<\/h2>\n<p>This plugin&#8217;s documentation states an interesting fact that it&#8217;s strongly recommended to use the Interstitial ad type because it brings more than 10 times profit than the banner Ad. Here&#8217;s the table from the <a href=\"https:\/\/github.com\/floatinghotpot\/cordova-admob-pro#tips\">official documentation<\/a>:<\/p>\n<table>\n<thead>\n<tr>\n<th>Ad Format<\/th>\n<th>Banner<\/th>\n<th>Interstitial<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Click Rate<\/td>\n<td>&lt; 1%<\/td>\n<td>3-15%<\/td>\n<\/tr>\n<tr>\n<td>RPM (1k impressions)<\/td>\n<td>0.5$ &#8211; 4$<\/td>\n<td>10-50$<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<blockquote><p>\n  Banner ad is the small add that is usually placed in the bottom of the screen, whereas Interstitial ads are full-screen ads that cover the interface of their host app. Therefore, you may rather want to opt for this kind of an ad instead for the Banner one.\n<\/p><\/blockquote>\n<p>It&#8217;s important to note that there&#8217;s probably no exact formula here on when to show the Interstitial Ad, but there are some best practices, and this is what Google has to say about it:<\/p>\n<blockquote><p>\n  Interstitial ads work best in apps with natural transition points. The conclusion of a task within an app, like sharing an image or completing a game level, creates such a point. Because the user is expecting a break in the action, it&#8217;s easy to present an interstitial without disrupting their experience. Make sure you consider at which points in your app&#8217;s workflow you&#8217;ll display interstitials, and how the user is likely to respond.\n<\/p><\/blockquote>\n<p>You can learn a bit more about it <a href=\"https:\/\/developers.google.com\/admob\/android\/interstitial\">here<\/a>.<\/p>\n<p>Anyways, as you saw in our demo code above, we opted for showing the banner ad all the time in the bottom of the screen, and we&#8217;re showing the interstitial ad when we click the button. You can tweak this any way you like in your app, but please remember the points mentioned above about best practices.<\/p>\n<h2>Finally, the view template<\/h2>\n<p>Replace the <code>src\/pages\/home\/home.html<\/code> file content with this:<\/p>\n<pre><code>&lt;ion-header&gt;\n    &lt;ion-navbar&gt;\n        &lt;ion-title&gt;\n            Ionic Blank\n        &lt;\/ion-title&gt;\n    &lt;\/ion-navbar&gt;\n&lt;\/ion-header&gt;\n\n&lt;ion-content padding&gt;\n    &lt;button ion-button (click)=\"showInterstitialAd()\"&gt;Show the interstitial Ad&lt;\/button&gt;\n&lt;\/ion-content&gt;\n<\/code><\/pre>\n<p>Clicking the <code>Show the interstitial Ad<\/code> button will call the <code>showInterstitialAd()<\/code> function which will show the interstitial as shown in a gif at the beginning of this tutorial.<\/p>\n<h2>Let&#8217;s test this<\/h2>\n<p>Run <code>ionic cordova emulate ios<\/code> and in a few seconds your simulator should start up and show you this:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/9L5N5nj.gif\" alt=\"\" \/><\/p>\n<p>There are few things that could go wrong with this, so for example if you get an error like this:<\/p>\n<pre><code>Error: Cannot read property 'replace' of undefined\n\n[ERROR] Cordova encountered an error.\n        You may get more insight by running the Cordova command above directly.\n\n[ERROR] An error occurred while running cordova run ios (exit code 1).\n<\/code><\/pre>\n<p>Then you can try the solution from <a href=\"https:\/\/stackoverflow.com\/questions\/42350505\/error-cannot-read-property-replace-of-undefined-when-building-ios-cordova\">this StackOverflow post<\/a>: Execute the following command in the <code>platforms\/ios\/cordova\/node_modules<\/code> folder: <code>sudo npm install ios-sim@lates<\/code>.<\/p>\n<p>If you get an error telling you that it can&#8217;t open up the simulator, then you may want to try running the build command: <code>ionic cordova build ios<\/code> and after that open the <code>MyApp.xcworkspace<\/code> file from the <code>platforms\/ios<\/code> folder:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/PuNxN0A.png\" alt=\"\" \/><\/p>\n<p>Select the simulator device that you&#8217;d like to run your app on and click the run button from your Xcode:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/vTuCqy3.png\" alt=\"\" \/><\/p>\n<p>If you run into any other problems while trying to run this, let&#8217;s try to solve them in the comments and thus help others that may have the same issues as well ?<\/p>\n<h2>Conclusion<\/h2>\n<p>In this post, we&#8217;ve shown how easy it is to add monetization options to your app. Now it&#8217;s <em>&#8216;just&#8217;<\/em> on you to actually make an app that will be used a lot of times and whose users will want to click on the ads. ?<\/p>\n<p>Till next time, \u270c\ufe0f<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"550\">\n<p lang=\"en\" dir=\"ltr\">How to make <a href=\"https:\/\/twitter.com\/hashtag\/money?src=hash\">#money<\/a> with Google <a href=\"https:\/\/twitter.com\/hashtag\/AdMob?src=hash\">#AdMob<\/a> ads in <a href=\"https:\/\/twitter.com\/hashtag\/Ionic?src=hash\">#Ionic<\/a> framework 3 <a href=\"https:\/\/t.co\/In5UPrLTyn\">https:\/\/t.co\/In5UPrLTyn<\/a><\/p>\n<p>&mdash; Nikola Bre\u017enjak (@HitmanHR) <a href=\"https:\/\/twitter.com\/HitmanHR\/status\/897744313001664512\">August 16, 2017<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In case you&#8217;re looking for a way to implement Google AdMob ads in Ionic framework 1, then check out this tutorial: Adding AdMob to Ionic framework application step&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3616,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56],"tags":[],"class_list":["post-3615","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ionic3"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=3615"}],"version-history":[{"count":2,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3615\/revisions"}],"predecessor-version":[{"id":3619,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3615\/revisions\/3619"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/3616"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=3615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=3615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=3615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}