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

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

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

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.

 

 

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

  • SP

    Hello,i want to place interstitial ads in my small puzzle game(after game over).My files consists of index.html and config.xml.I have downloaded github hotpot plugin,but dont know how to install that in these files with cmd…im too much confused!!

    • what are you using to build your app..phonegap CLI or phonegap build service?

      • SP

        Im using phonegap build service(android).

        • then you don’t need to use the command line .. the plugin has to be added using the config.xml file more on that is in the docs http://docs.build.phonegap.com/en_US/configuring_plugins.md.html#Plugins

          i did a video on config.xml file here https://www.youtube.com/watch?v=f_RD2_VDosA

          • SP

            where to add interstitial code ? in index.html or config.xml?.I had tried adding hotpot plugin code in my index.html file,which is my actual game file..The problem that occured was,it changed the entire output,whereas when i added the same in config.xml file(below ),but it didnt work as well. 🙁

          • the plugin code is to be added in the config.xml file and the ad-code is to be added in the index.html file

          • SP

            Hii,i added the code as mentioned by you,but still ads arent loading 🙁

          • i suggest you put your code on stackoverflow.com and ask your question there…surely you will get your answer

  • Pingback: Interstitial Ads For Ionic 2 Apps With AdMob - pointDeveloper.com()

  • Bankim Ch. Debnath

    Hi tried the plugin. it is working fine for left nav but the problem is for tab based application. In tab based application it is working for one tab only not for multiple tabs and the ad is appearing only once. Can you please have a look and help me on this. Thanks.

    • yes as we have added the AdMob.showInterstitial(); to chatCtrl. We it will only show up one chatCtrl you will need to add it on other controller if you want ads to appear on other views

      • Bankim Ch. Debnath

        yes I have tried that. but it is not working for more that one controller.

      • Bankim Ch. Debnath

        Hi,
        I have added the AdMob.showInterstitial(); to ChatsCtrl, ChatDetailCtrl and AccountCtrl. But ad is displaying only once in a session. Can you please have a look on this? Thanks.

        • hey Bankim thank for writing in.
          I took a look and it turns out that you can show Interstitial ads once per request. So to show them again we will need to request it again using AdMob.prepareInterstitial().
          Each and every time if we want to show an interstitial we have to request a new one using AdMob.prepareInterstitial().

          The plugin Documentation is not clear on this. I did a bit of digging in the AdMob docs and found out.

          Thanks for pointing this out will update the post as soon as possible.

          -Regards

          • Bankim Ch. Debnath

            Thank you for your reply. But can you please tell how to use the method which is used in stackoverflow?

          • that’s actually native Java code…which won’t apply in Ionic…I thing this issue is with ionic 1.x…If you are coding a new app i recommend you try to use ionic 2 which is much faster and cleaner.

          • Bankim Ch. Debnath

            But can you please tell me why the plugin is not installing?

            Bankims-MacBook-Pro:ionicInterstitialAds bankimdebnath$ionic plugin add com.google.cordova.admob
            Error: Registry returned 404 for GET on http://registry.npmjs.org/com.google.cordova.admob
            Bankims-MacBook-Pro:ionicInterstitialAds bankimdebnath$

            Thanks..

  • James

    Hello,

    Thanks for sharing this tutorial!

    I have a question, how can I restrict ad banners to specific pages in my ionic app. I don’t want to show ad banners on certain pages, like walkthrough page and premium content pages.

    Thanks in advanced:)

    • it easy when you load the specific page just run the .hideBanner() method off the AdMob object..It takes no arguments.

      AdMob object is only available once the platform is ready so make sure you do a check before calling the AdMob.hideBanner() method.

      It is mentioned in the “Methods” section of the plugin documentation.

      -Regards

  • Lucas Araújo

    Hi PointDeveloper, first thank you very much for the tutorial.

    I tried follow the instructions, but my code isn’t working. I follow all the steps, but at the final step my project now show the intersticial.
    I uncomment the console.log at the two events but the event not fired.
    My sidemenu project not fired the $ionicView events, can you help me?.

    Thank you very much

    • That’s strange. The ionic V1 events do fire for side menu as well. There might me something else going on. I suggest you create a new project and just console.log() the events first. After that use the AdMob code.

  • Lucas Araújo

    Hi PointDeveloper, first thank you very much for the tutorial.

    I tried follow the instructions, but my code isn’t working very well.

    I implemented the beforeLeave and beforeEnter events and only the beforeLeave worked. When the user click out of my home page the interstitial appear, but when i enter in my home page the interstitial not show.

    The intertitial is only showing one time.

    Thank you very much

  • hamid

    Hi for me I already have an application that already created but when I add this code it does not work. Is this type of application created for the first time because I created my application empty but not tabds.

    • Are you using a device to test or an emulator..I have get feedback that some emulators do not show ads

      • hamid

        I tested on my phone but it does not work. When I execute your code in a project tabds it works but for an empty project not. Thank you cordially.

%d bloggers like this: