AdMob Plugin - How to Implement Interstitial First and Then Html Page

Question

I am developing one Cordova app with floatinghotpot AdMobpro plugin. The app has these codes:

index.html

<a href=“mainpage.html" id="btn_prepare" class="pure-button pure-button-primary">GO TO APP</a>

in the admobshow.js, I have these snippets:

$('#btn_prepare').click(function(){
  AdMob.prepareInterstitial({
    adId:admobid.interstitial,    

  });

         AdMob.showInterstitial();
       window.open($(this).attr('href'));
});

(The code is taken from here: https://github.com/floatinghotpot/cordova-admob-pro/blob/master/test/index.html

I want this to happen: 1.) User clicks Go To APP and the plugin shows Interstitial. 2.) When the User dismisses the interstitial, the mainpage.html should open.

But, what is now happening is: 1.) the mainpage.html opens first and then the interstitial is shown in a few seconds.

I want the mainpage.html to be shown only after the interstitial is shown. (Or when the interstitial is acted upon.) I don't want the mainpage.html to be shown automatically.

Can someone help me how to tweak the above code?

Answer 1

You need the code that prepares the interstitial AdMob.prepareInterstitial to be called some time before the user clicks that button. The plugin needs some time preparing it, so it can't immediately show it when you call AdMob.showInterstitial().

Just prepare the interstitial when the user enters the page for example.

Answer 2

See response in this question for some code and ideas on how to implement: https://stackoverflow.com/a/31187541/4025963

EDIT

Assuming cordova-admob plugin, basically the idea could be this one:

<a onclick="showInterstitial()" id="btn_prepare" class="pure-button pure-button-primary">GO TO APP</a>

And in your js code:

var isAppForeground = true;
var isShowMainOnCloseAd = false;
var isMainAlreadyShown = false;
var isInterstitialAvailable = false;    

function showInterstitial() {
  if (isInterstitialAvailable) {
    admob.showInterstitialAd();
  } else {
    showMain(function () {
      isMainAlreadyShown = true;
    });
  }
}

function initAds() {
  if (admob) {
    var adPublisherIds = {
      ios : {
        banner : "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
        interstitial : "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII"
      },
      android : {
        banner : "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
        interstitial : "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII"
      }
    };

    var admobid = (/(android)/i.test(navigator.userAgent)) ? adPublisherIds.android : adPublisherIds.ios;

    admob.setOptions({
      publisherId:          admobid.banner,
      interstitialAdId:     admobid.interstitial,
      autoShowInterstitial: false
    });

    registerAdEvents();

  } else {
    alert('cordova-admob plugin not ready');
  }
}

function onAdLoaded(e) {
  if (isAppForeground) {
    if (e.adType === admob.AD_TYPE.INTERSTITIAL) {
      isInterstitialAvailable = true;
    }
  }
}

function onAdOpened(e) {
  if (e.adType === admob.AD_TYPE.INTERSTITIAL && !isMainAlreadyShown) {
    isShowMainOnCloseAd = true;
  }
}

function onAdClosed(e) {
  if (e.adType === admob.AD_TYPE.INTERSTITIAL && isShowMainOnCloseAd) {
    isShowMainOnCloseAd = false;
    if (!isMainAlreadyShown) {
      showMain(function () {
        isMainAlreadyShown = true;
      });
    }
  }
}

function onPause() {
  if (isAppForeground) {
    isAppForeground = false;
  }
}

function onResume() {
  if (!isAppForeground) {
    setTimeout(admob.requestInterstitialAd, 1);
    isAppForeground = true;
  }
}

function registerAdEvents() {
  document.addEventListener(admob.events.onAdLoaded, onAdLoaded);
  document.addEventListener(admob.events.onAdOpened, onAdOpened);
  document.addEventListener(admob.events.onAdClosed, onAdClosed);

  document.addEventListener("pause", onPause, false);
  document.addEventListener("resume", onResume, false);
}

function onDeviceReady() {
  document.removeEventListener('deviceready', onDeviceReady, false);
  initAds();

  // request an interstitial
  admob.requestInterstitialAd();
}

document.addEventListener("deviceready", onDeviceReady, false);