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