Ionic 2 Banner Ads With AdMob Pro Plugin

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.

I no longer recommend using the AdMob Pro plugin. There is a much better AdMob Free plugin that you should use. I have written a blog post on  how you can implement banner ads using it. I highly recommend that you use that plugin over the AdMob Pro plugin.

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 @uncutAcademy
Consider Subscribing / Donating
Subscribe To Mailing List
If my site was helpful to you, then please consider donating via paypal:
Prantik Vaghela

Prantik Vaghela (uncutAcademy)

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. :-)