Ionic 2 Banner Ads With AdMob Pro Plugin

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial I will show you how to add banner ads to your Ionic 2 Apps, I already have a post on adding banner ads to Ionic 1.x apps but as the older version of Ionic will get outdated I figured I would write a post on the new version of ionic.

So let’s get started

Step 1)

We will first start by creating a new Ionic project by issuing the following commands in the command prompt

Now let’s add Android and iOS platforms to our project.

 

Step 2)

Now we will add the cordova AdMob plugin to our app by running the following command

you can read more about the plugin in the Admob pro plugin documentation

We will also need to add the Ionic native AdMob module, we do that using NPM as follows

 

Step 3)

We will add the following code to the src/app/app.component.js file

 

We start off by importing the ionic-native module on line 7 .

We are first creating an interface on line 9 , then we are setting the type of the adbomid variable to that interface onย line 27 which is a TypeScript concept.

You can remove the interstitial keys if you want, I have placed them in this tutorial to show where they should go, In the next tutorial here we will use these keys to show interstitial (Full-screen ads).

After that, we are deciding which admob keys to use depending upon the platform through if..else if.. blocks.

We are creating the banner ad on line 45 and as the autoShow property is true the banner ads will be shown automatically. Also, note that the isTesting property is set to true as well you should remove it or set it to false before publishing your app.

 

Step 4)

We will need to add the AdMob module to either our component or the entire app module. Here, I will add it to the entire app module. So, open up src\app\app.module.ts

 

Step 5)

The final step is to test our app in an emulator or on a device but first, we need to build out app we do that by running the following command

You can run you app by doing the following, but make sure your device has the debugging mode enabled in it.

Or you can also do this

 

Download Code:


Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

%d bloggers like this: