{"id":1532,"date":"2015-06-20T14:02:25","date_gmt":"2015-06-20T14:02:25","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=1532"},"modified":"2017-08-16T08:57:36","modified_gmt":"2017-08-16T08:57:36","slug":"adding-admob-to-ionic-framework-application-step-by-step","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/codeproject\/adding-admob-to-ionic-framework-application-step-by-step\/","title":{"rendered":"Adding AdMob to Ionic framework application step by step"},"content":{"rendered":"<p>In case you\u2019re looking for a way to implement Google AdMob ads in Ionic framework <strong>3<\/strong>, then check out this tutorial: <a href=\"http:\/\/www.nikola-breznjak.com\/blog\/javascript\/ionic3\/make-money-google-admob-ads-ionic-framework-3\/\">How to make money with Google AdMob ads in Ionic framework 3<\/a>.<\/p>\n<p>If you want, you can take a look at the screencast of this tutorial. This is actually my first <a href=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/06\/shocked.png\" rel=\"lightbox[1532]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1741\" src=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/06\/shocked.png\" alt=\"shocked\" width=\"24\" height=\"24\"><\/a>&nbsp;screencast blog post so go easy on me \ud83d\ude42<\/p>\n<p><iframe loading=\"lazy\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/uvHW7Cb29lo?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>I&#8217;ve been searching for a start to end tutorial on this but with no luck. Now, when I finally figured out how to use it, I&#8217;m documenting the exact steps which I did in order to get the AdMob working inside my Ionic app. You can fork the project <a href=\"https:\/\/github.com\/Hitman666\/IonicAdMobTest\">from GitHub<\/a> or <a href=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/CordovaApp-debug.apk_.zip\">download and test the .apk<\/a> file on your device.<\/p>\n<p>I broke down the steps in two parts: AdMob settings and Ionic settings.<\/p>\n<h3>AdMob settings<\/h3>\n<p>Let&#8217;s start with AdMob settings:<\/p>\n<ol>\n<li>Sign in \/Sign up for AdMob at&nbsp;<a href=\"https:\/\/www.google.com\/admob\/\">https:\/\/www.google.com\/admob\/<\/a><\/li>\n<li>Click the <strong>Monetize new app&nbsp;<\/strong>button:<br \/>\n<a href=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.21.06.png\" rel=\"lightbox[1532]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1543\" src=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.21.06.png\" alt=\"Screen Shot 2015-05-05 at 23.21.06\" width=\"846\" height=\"512\" srcset=\"https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.21.06.png 846w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.21.06-300x182.png 300w\" sizes=\"auto, (max-width: 846px) 100vw, 846px\" \/><\/a><\/li>\n<li>If your app is not yet published you can add it manually:<br \/>\n<a href=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.23.07.png\" rel=\"lightbox[1532]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1544\" src=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.23.07.png\" alt=\"Screen Shot 2015-05-05 at 23.23.07\" width=\"566\" height=\"529\" srcset=\"https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.23.07.png 566w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.23.07-300x280.png 300w\" sizes=\"auto, (max-width: 566px) 100vw, 566px\" \/><\/a><\/li>\n<li>Create new tracking ID:<br \/>\n<a href=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.25.20.png\" rel=\"lightbox[1532]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1545\" src=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.25.20.png\" alt=\"Screen Shot 2015-05-05 at 23.25.20\" width=\"267\" height=\"337\" srcset=\"https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.25.20.png 267w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.25.20-238x300.png 238w\" sizes=\"auto, (max-width: 267px) 100vw, 267px\" \/><\/a><\/li>\n<li>Configure the adds type, size, placement, style, name:<br \/>\n<a href=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.26.29.png\" rel=\"lightbox[1532]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1546\" src=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.26.29.png\" alt=\"Screen Shot 2015-05-05 at 23.26.29\" width=\"617\" height=\"635\" srcset=\"https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.26.29.png 617w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.26.29-291x300.png 291w\" sizes=\"auto, (max-width: 617px) 100vw, 617px\" \/><\/a><\/li>\n<li>You can read additional info on how to implement GA and AdMob, but for now let&#8217;s just click Done:<br \/>\n<a href=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.28.10.png\" rel=\"lightbox[1532]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1547\" src=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.28.10.png\" alt=\"Screen Shot 2015-05-05 at 23.28.10\" width=\"673\" height=\"342\" srcset=\"https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.28.10.png 673w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.28.10-300x152.png 300w\" sizes=\"auto, (max-width: 673px) 100vw, 673px\" \/><\/a><\/li>\n<li>You will now see the following similar screen:<br \/>\n<a href=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.30.11.png\" rel=\"lightbox[1532]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1548\" src=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.30.11.png\" alt=\"Screen Shot 2015-05-05 at 23.30.11\" width=\"605\" height=\"379\" srcset=\"https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.30.11.png 605w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/Screen-Shot-2015-05-05-at-23.30.11-300x188.png 300w\" sizes=\"auto, (max-width: 605px) 100vw, 605px\" \/><br \/>\n<\/a>The most important thing to note here is this <strong>Ad unit ID<\/strong>, which in my test case is<br \/>\n<strong>ca-app-pub-7957971173858308\/3599533362<\/strong><\/li>\n<\/ol>\n<h3>Ionic settings<\/h3>\n<p>I&#8217;m counting on the fact that you know how to use Ionic since you&#8217;re looking for a specific topic like this, so am going&nbsp;skip the part of actually explaining how to use the Ionic cli. Ok, enough chit-chat, now I&#8217;m going to show you the steps on how to implement AdMob in your Ionic project:<\/p>\n<ol>\n<li>Start a new Ionic blank project:\n<pre class=\"lang:default decode:true\">ionic create IonicAdMobTest blank<\/pre>\n<\/li>\n<li>Add the platform for which you want to build the application:<\/li>\n<li>\n<pre class=\"lang:default decode:true \">ionic platform add android<\/pre>\n<p>In case you&#8217;re developing on a Mac, you can also choose to add:<\/p>\n<pre class=\"lang:default decode:true\">ionic platform add ios<\/pre>\n<\/li>\n<li>Add the&nbsp;<a href=\"https:\/\/github.com\/floatinghotpot\/cordova-plugin-admob\">cordova-plugin-admob<\/a>&nbsp;plugin by entering the following command in your command prompt when in the root folder of your project:\n<pre class=\"lang:default decode:true \">cordova plugin add com.rjfun.cordova.plugin.admob<\/pre>\n<p>As a side note, you can always check the list of all installed plugins by executing:<\/p>\n<pre class=\"lang:default decode:true\">cordova plugin list<\/pre>\n<\/li>\n<li>Add the following code to your app.js file (located in the www folder) inside the .run function:\n<pre class=\"lang:default decode:true\">.run(function($ionicPlatform) {\n    $ionicPlatform.ready(function() {\n        \/\/ Hide the accessory bar by default (remove this to show the accessory bar above the keyboard\n        \/\/ for form inputs)\n        if (window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {\n            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);\n        }\n        if (window.StatusBar) {\n            \/\/ org.apache.cordova.statusbar required\n            StatusBar.styleDefault();\n        }\n\n        if(window.plugins &amp;&amp; window.plugins.AdMob) {\n            var admob_key = device.platform == \"Android\" ? \"ca-app-pub-7957971173858308\/3666912163\" : \"ca-app-pub-7957971173858308\/3666912163\";\n            var admob = window.plugins.AdMob;\n            admob.createBannerView( \n                {\n                    'publisherId': admob_key,\n                    'adSize': admob.AD_SIZE.BANNER,\n                    'bannerAtTop': false\n                }, \n                function() {\n                    admob.requestAd(\n                        { 'isTesting': false }, \n                        function() {\n                            admob.showAd(true);\n                        }, \n                        function() { console.log('failed to request ad'); }\n                    );\n                }, \n                function() { console.log('failed to create banner view'); }\n            );\n        }\n    });\n})<\/pre>\n<p>Of course, change it according to your own admob_key which you obtained in the first part (step 8).<\/li>\n<li>Start the emulator by running:\n<pre class=\"lang:default decode:true\">ionic build ios &amp;&amp; ionic emulate ios\n\n\/\/or, for android\nionic build android &amp;&amp; ionic emulate android<\/pre>\n<\/li>\n<li>and you should get the following screen in your emulated application:<br \/>\n<a href=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/IonicAdMobTest.jpg\" rel=\"lightbox[1532]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1592\" src=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/IonicAdMobTest.jpg\" alt=\"IonicAdMobTest\" width=\"747\" height=\"522\" srcset=\"https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/IonicAdMobTest.jpg 747w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/IonicAdMobTest-300x210.jpg 300w\" sizes=\"auto, (max-width: 747px) 100vw, 747px\" \/><\/a><\/li>\n<li>You can <a href=\"https:\/\/github.com\/Hitman666\/IonicAdMobTest\">clone the project from GitHub<\/a>, or <a href=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/05\/CordovaApp-debug.apk_.zip\">download the .apk<\/a> (unzip needed) file and test on your Android device.<\/li>\n<\/ol>\n<p>That&#8217;s all folks, hope this helps someone by saving time on endless testing as I did :\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In case you\u2019re looking for a way to implement Google AdMob ads in Ionic framework 3, then check out this tutorial: How to make money with Google AdMob&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1885,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,43],"tags":[],"class_list":["post-1532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codeproject","category-ionic"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1532","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=1532"}],"version-history":[{"count":15,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1532\/revisions"}],"predecessor-version":[{"id":3618,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1532\/revisions\/3618"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/1885"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=1532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=1532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=1532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}