Skip to main content

How To Add Interstitial To Ionic Framework Apps With Admob Pro

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 Post I will Show you How you can add interstitial ads on navigation to you Ionic framework apps. In my previous post I showed how to add Banner ads and in this post we will start from scratch, so we will cover a lot of the code that was in the How to add Banner ads post + new code for interstitial ads.

We will discuss both of the ways of showing interstitial ads on navigation

  1. When entering (Not a best practice)
  2. When leaving

If you have already read the previous post before coming here then start from step-5 for Interstitial ads.

Watch Video Tutorial Of This Post Here:


Step 1)

We will start by creating a new app and adding the android platform to it

Step 2)

As we will be using the AdMob Pro plugin we will need to download it in our project. We will do that by the following command

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


Step 3)

Now we will need to add the following code to the $ionicPlatform.ready() in the app.js file


The code till now is the same as in the how to add Banner ads post.

Step 4)

To add interstitial ads we need to prepare the ad first and then show it. So we do that by following:

Notice that the autoShow property is set to false. If set to true it will show the ad as soon as the app loads (which is considered bad practice according to goolge).

We add the code after the banner ad code. So the full app.js file is as follows:


Step 5)

Now let’s show the ads on Navigation. As i am using the tabs project I will show the ads when the user navigates to the tab-chats.html view.

Inside the ChatsCtrl controller we add the following

As it is clear from the code the ads will appear both when the user enters the view and leaves the view.

NOTE: Overloading user with interstitial ads is considered a bad practice by google. Google suggest that Interstitial ads should be shown on clear points of navigation and it should not incur accidental clicks. So keeping that in mind I suggest you keep the ads before leave and refrain from using the ads on enter as that could cause accidental clicks.



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

%d bloggers like this: