Skip to main content

How To Add Interstitial Ads On Navigation For Phonegap App Using 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 to add interstitial ads on navigation using AdMob Pro Plugin for Phongap apps.

Caution: I will be using a multi-page app in this particular example but i don’t recommend doing so in a real life app. A SPA app along with a framework like jQuery Mobile or AngularJs or Ionic is more useful as it offers much finer controller over page load and transition events.

I also have tutorials on Banner (here) ads and Interstitial (here) ads for Ionic 2 if you are using Ionic framework.

In this post I will begin from my previous post on how to add banner ads so we start with step-7

Step 7)

We will need to add links to the index.html file so the finished file will look like this

index.html

 

Step 8)

Now we will need to create two new files which we linked to i.e, the contact.html and the about.html

contact.html

 

about.html

 

The style.css file will remain the same as the how to add banner ads post.

Step 9)

Now we need to add the following to the script.js  file

So, the finished script.js file looks like this:

 

Step 10)

Now we will create the contact.js file which will detect the page and then show the interstitial ad if the page is contact .html otherwise it will not show the ad.

 

Step 11)

Now all we need to do is to build our app we can do that by issuing the following command for Android

For iOS we can build our app as follows

 

 

GitHub Link: https://github.com/pointdeveloper/PhoneGap-Interstitial-ads-on-navigaton-using-JavaScript

Direct Download: Click Here

 

 Got A Question?

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

  • Adrenaline Junkie

    HI. brilliant work you are doing here. This is very helpful. Please, how do I make it work with a counter. e.g. I have two pages. Master and detail. If I call up the interstitial ad every time on the detail page, my users will get tired. How do I call up the interstitial ad after every 5-page loads? Thanks

    • you could add a counter on the rootscope if you are using ionic/angularjs or you could also use localstorage to keep track

  • King Max

    Hi, thanks for posting these examples, they are really helpful.. one question, can i display a banner inside html div? Thanks

  • Mohamed Chouikhane

    if i have just one page in my application can put

    Interstitial Ads without need the navigation

  • Moody2Day

    Hello,

    I have used your code, and I have ran into a problem that I posted on stackoverflow,
    http://stackoverflow.com/questions/32556175/admobpro-admob-showinterstitial-causes-infinite-loop

    perhaps you have some thoughts on what I am doing wrong

  • John Eveli

    Hello! i hava a app that i want to show the interstitial on button or link click, or on a other html site say index1.html but its not working if a put the script in a another html file just on the index.html
    The problem is that the interstitial shows when i start the app and i dont like that…

    ive tried this for button: User Manuals

    but it doesnt work, can you help me?

    iam using the AdMob Plugin Pro (cordova-plugin-admobpro)

    this is my code in index.html

    var admobid = {};
    if( /(android)/i.test(navigator.userAgent) ) {
    admobid = { // for Android
    banner: ‘ca-app-pub-4150774542186455/9945375261’,
    interstitial: ‘ca-app-pub-6869992474017983/1657046752’
    };
    } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
    admobid = { // for iOS
    banner: ‘ca-app-pub-4150774542186455/2425247661’,
    interstitial: ‘ca-app-pub-4150774542186455/8332180464’
    };
    } else {
    admobid = { // for Windows Phone
    banner: ‘ca-app-pub-6869992474017983/8878394753’,
    interstitial: ‘ca-app-pub-6869992474017983/1355127956’
    };
    }

    if(( /(ipad|iphone|ipod|android|windows phone)/i.test(navigator.userAgent) )) {
    document.addEventListener(‘deviceready’, initApp, false);
    } else {
    initApp();
    }

    function initApp() {
    if (! AdMob ) { alert( ‘admob plugin not ready’ ); return; }

    AdMob.createBanner( {
    adId: admobid.banner,
    isTesting: false,
    overlap: false,
    offsetTopBar: false,
    position: AdMob.AD_POSITION.BOTTOM_CENTER,
    bgColor: ‘black’
    } );

    AdMob.prepareInterstitial({
    adId: admobid.interstitial,
    autoShow: true
    });
    }

    Flight Timer

    User Manuals
    Before Takeoff

    Hardware Installation

    • you have to set autoShow: false in AdMob.prepareInterstitial object…That will prepare the ad but will not show it..Then you can show it when the next page loads which is mentioned in the post. Also read more here http://pointdeveloper.com/admob-interstitial-ads-best-practices-for-ionic-and-cordova-apps/

      • John Eveli

        thanks i have done that know and then a i put the js file in the index1.html like this ;
        in the admob.js i coded like this: window.onload=function(){

        window.onbeforeunload = function(){
        if(window.AdMob) AdMob.showInterstitial();
        };
        }

        and the script is pointing to the file but nothing happens, just the banner shows?
        Any suggestions?

        • make sure you are calling AdMob.prepareInterstitial before you show the ad

  • Mohd Waseem

    Thanks for showing vote of interest .

    i am using this code -:

    function onDeviceReady() {
    document.removeEventListener(‘deviceready’, onDeviceReady, false);

    // Set AdMobAds options:
    admob.setOptions({
    publisherId: “ca-app-pub-8044321896234401/8884259375”, // Required
    interstitialAdId: “ca-app-pub-8044321896234401/8884259375”, // Optional
    tappxIdiOS: “/8044321896234401/8884259375/Pub-XXXX-iOS-IIII”, // Optional
    tappxShare: 0.5 // Optional
    });

    // Start showing banners (atomatic when autoShowBanner is set to true)
    admob.createBannerView();

    // Request interstitial (will present automatically when autoShowInterstitial is set to true)
    admob.requestInterstitialAd();
    }

    document.addEventListener(“deviceready”, onDeviceReady, false)

    this code run on index page of the phone gap . but when i am try to put that code in 5th pages of the app that call from server not running .

    please guide me i will be very thanks full for that

    • set the option on admob that says autoshow:false

      Then when you load the 5th page show the ad as follows

      For more see the documentation here : https://www.npmjs.com/package/cordova-plugin-admobpro

      • Mohd Waseem

        still we are not able to run this code in 5th pages.

        we have install all admob file in app folder but 5th page coming from api . how can resolve this problem

        • Are you referring to banner ads or interstitial ads?
          Which version or IONIC are you using?

          Read this https://github.com/floatinghotpot/cordova-admob-pro#api

          A basic thing to keep in mind is that by using the following you will “Prepare the ads”

          And by using the following you “show ads”

          • Mohd Waseem

            banner ads and we are using jquery , problem we are facing when we hit api link in the app it showing admob pluging is not working , but if i am running on index it is running . i am not able to understand how install admob plugging on server file.

          • You cannot install admob on server file. You just have to install it in your app.
            Install the plugin you can use cordova plugin add cordova-plugin-admobpro

            You need to call the method properly. Which is basic JavaScript Try this http://pointdeveloper.com/how-to-add-banner-ads-to-jquery-mobile-apps-with-phonegap-using-admob/

          • Mohd Waseem

            Thanks now for help me . we are making app phone gap . admob ads working in ios but same thing i am using same thing but it is giving error . when this line put in android in config.xml givig error . please guide

%d bloggers like this: