Search code examples
javascriptcordovaadmobphonegap-pluginscordova-admob

AdMob is undefined after redirecting to new page in Phonegap

I have added the AdMob Plugin Pro to my Phonegap application. I follow the sample code and put in my application home page the following code:

function onDeviceReady() {
    var admobid = {};
    if( /(android)/i.test(navigator.userAgent) ) {
        admobid = { // for Android
            banner: 'ca-pub-{key hidden}'
            interstitial: 'ca-pub-{key hidden}'
        };
    } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
        admobid = { // for iOS
            banner: 'ca-pub-{key hidden}'
            interstitial: 'ca-pub-{key hidden}'
        };
    }
    if(window.AdMob) AdMob.prepareInterstitial( {adId:admobid.interstitial, autoShow:true} );
}
document.addEventListener('deviceready', onDeviceReady, false);

The above code works and a interstitial advertisement shows up, but the problem happens when I try to call the AdMob again in another page. I try several approaches but none of them work.

Here are some background information of my app:

  1. My application will reload the page when user click on a link. For example if the user is in the home page and click the "setting" button, the whole page is reloaded to "setting.html'
  2. The script that manipulates DOM and content are always put in the very last line of the <body>

So here are what I tried:

  1. Copy the same onDeviceReady() and addEventListner() above and put in another page.

    • What I found out is that the deviceready event is not fired again in the second page. And thus of course no interstitial advertisement is shown again.

  2. Simply copy the AdMob.prepareInterstitial( {adId:admobid.interstitial, autoShow:true} to the new page and execute after page loaded

    • What I found out is that AdMob becomes undefined

So I would like to know did I miss something or I have did something wrong?

Thank you!

Solution

  • Don't use multiple pages, as the Cordova documentation states, Single Page Applications are your friend. When you load a new page, you'll lose all the plugins and other Cordova features unless you include cordova.js in all your pages.

    If you can refactor to a SPA your life will be easier on a whole lot of fronts.

    Quoting the Cordova docs:

    First and foremost - your Cordova applications should adopt the SPA (Single Page Application) design. Loosely defined, a SPA is a client-side application that is run from one request of a web page. The user loads an initial set of resources (HTML, CSS, and JavaScript) and further updates (showing a new view, loading data) is done via AJAX. SPAs are commonly used for more complex client-side applications. GMail is a great example of this. After you load GMail, mail views, editing, and organization are all done by updating the DOM instead of actually leaving the current page to load a completely new one.

    Using a SPA can help you organize your application in a more efficient manner, but it also has specific benefits for Cordova applications. A Cordova application must wait for the deviceready event to fire before any plugins may be used. If you do not use a SPA, and your user clicks to go from one page to another, you will have to wait for deviceready to fire again before you make use of a plugin. This is easy to forget as your application gets larger.

    Even if you choose not to use Cordova, creating a mobile application without using a single page architecture will have serious performance implications. This is because navigating between pages will require scripts, assets, etc., to be reloaded. Even if these assets are cached, there will still be performance issues.