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.

 

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.

 

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 16 by using the AdMob.showInterstitial() method inside our showInterstitials() function.

Step 6)

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

 

 

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

  • Pingback: How To Add Interstitial Ads On Navigation For Phonegap App Using AdMob - pointDeveloper.com()

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

  • Bankim Ch. Debnath

    Hi,

    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.

    Thanks.

  • 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
      });

  • 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..

      Thanks

  • Pingback: Ionic 2 Banner Ads With AdMob Pro Plugin - pointDeveloper.com()

  • Thanks for awesome post simple and easy to implement