Skip to main content

Interstitial Ads For Ionic 2 Apps With AdMob

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 you can Add Interstitial Ads to Ionic 2 Apps. We will create a button and wire up the Ads to show when the button is pressed. We will be using the Tabs template in ionic 2 for this but you can use any other template as the code will be the same for all templates.

I already have a Tutorial on How To Add Interstitial To Ionic Framework Apps With Admob Pro which is for Ionic 1.x apps. But as Ionic has now evolved to a new version namely Ionic 2 we need to do things differently which we will see in here.

Make sure you read this post as well where I discuss Interstitial Ads Best Practices For Ionic And Cordova Apps.

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 book Monetizing Ionic Apps With AdMob E Book using it. I highly recommend that you use that plugin over the AdMob Pro plugin.

Step 1)

We will start off by creating out project with the Blank template in Ionic 2, so open up your command prompt and run the following commands

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

Most of the code that we will implement in this tutorial will be what is given in the docs here.

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.ts file

This is similar to the post that I did on Adding Banner ads but the only difference here is that we are calling the AdMob.prepareInterstitial on line 51. Notice that inside the function we have set autoShow:false this means that theĀ Interstitial Ads will be prepared but not shown. Will show that Ads using a Button so let’s go ahead and create the button.

Note: Make sure to remove or comment out isTesting:true before publishing your app to the play store.


Step 4)

In this step, we will create a button, as I am using the blank template I will make changes t0 src\pages\home\home.html you can do it in anywhere you want

Notice on line 14 I am creating the button and setting up the click event to call showInterstitials() function which will display our ads.


Step 5)

In this step let’s create the showInterstitials() in src\pages\home\home.ts file like so

we are calling the ads on line 15 by using the AdMob.showInterstitial() method inside our showInterstitials() function.

Step 6)

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

Now all that there is left for us to do is to build and run our app in a device or an emulator we can do that by running the following commands

For Android

For iOS


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



Want to learn how to implement Google AdMob Ads to you Ionic Apps?I have written an E-book which goes in details in implementing various Ad Formats and Monetization techniques using this plugin. You can take a look at it here.
Consider Subscribing / Donating
Subscribe To Mailing List
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. :-)

  • Pingback: How To Add Interstitial Ads On Navigation For Phonegap App Using AdMob -

  • Pingback: How To Add Banner Ads To PhoneGap Apps Using AdMob Pro()

  • Bankim Ch. Debnath


    Today I have spend full day to get work multiple times load the Interstitial ad but no luck. As per your advice i used ionic-2. šŸ™‚ If you have time plz have a look once.


  • ashraful haque

    interstitial ads are showing only once. But I want to show or prepare interstitial ads as many time as click on the button. How can I do that ?

    • Khan

      call this after you show the ad

      if (AdMob) AdMob.prepareInterstitial({
      adId: “your id here”,
      isTesting: true, //comment this out before publishing the app
      autoShow: false

      • Vita O

        this does not work or i put the code in wrong space. Can you be more specific? I think that the problem here is that we got only one html page, thus one onLoad one add

  • ashraful haque

    TypeScript error: G:/cordova/need4test/app/pages/quiz1/quiz1.ts(35,20): Error TS2339: Property ‘AdMob’ does not exist on type ‘Window’.
    TypeScript error: G:/cordova/need4test/app/pages/quiz1/quiz1.ts(35,27): Error TS2304: Cannot find name ‘AdMob’.

    Any solution? plz

    • The latest ionic version uses TypeScript..When I wrote this post it used Javascript i.e, es6. So the error that you see if off typescript..I will update the post as soon as i can..


  • Pingback: Ionic 2 Banner Ads With AdMob Pro Plugin -

  • Thanks for awesome post simple and easy to implement

%d bloggers like this: