Admob ads with ionic

I spent many hours to implement google admob ads with ionic with no luck, I found many tutorial but none of them worked and finally after googling a lot i found one plugin which worked for me. Of course this wasnt also easy, i had to read all the documentation and go through their codes to find out how exactly it works and then finally i saw a small banner at the bottom.
I am sharing my code with you all so when you try to implement admob ads with ionic you dont have to struggle. Lets take a look at the code. Before starting this i assume that you already have a google admob account publisher id, If you dont have, you can create one here.

Install google admob plugin

To use with Ionic Framework, use one of the following command lines:

1	ionic plugin add com.admob.google

1	ionic plugin add https://github.com/appfeel/admob-google-cordova.git

Include admob js file in index.html

You shall find angular-admob.js file inside plugins folder at plugins\com.admob.google\www

1	<script src="js/angular-admob.js"></script>

Call body onload funtion

1	< body ng-app="starter" onload="runads()" >

And finally create banner code.

Dont forget to change ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII with your publisher id provided by google admob

function initAds() {
    if (admob) {
      var adPublisherIds = {
        ios : {
          banner : "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII"
        },
        android : {
          banner : "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",
          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,
        tappxIdiOs:       "/XXXXXXXXX/Pub-XXXX-iOS-IIII",
        tappxIdAndroid:   "/XXXXXXXXX/Pub-XXXX-Android-AAAA",
        tappxShare:       0.5
      });

registerAdEvents();

} else {
      alert('AdMobAds plugin not ready');
    }
  }

// optional, in case respond to events
  function registerAdEvents() {
    document.addEventListener(admob.events.onAdLoaded, onAdLoaded);
    document.addEventListener(admob.events.onAdFailedToLoad, function (e) {});
    document.addEventListener(admob.events.onAdOpened, function (e) {});
    document.addEventListener(admob.events.onAdClosed, function (e) {});
    document.addEventListener(admob.events.onAdLeftApplication, function (e) {});
    document.addEventListener(admob.events.onInAppPurchaseRequested, function (e) {});
  }

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

// display a banner at startup
    admob.createBannerView();

// request an interstitial
    admob.requestInterstitialAd();
  }
// ]]></script>

function runads(){

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

}

function initAds() {

if (admob) {

var adPublisherIds = {

ios : {

banner : "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII"

android : {

banner : "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",

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,

tappxIdiOs: "/XXXXXXXXX/Pub-XXXX-iOS-IIII",

tappxIdAndroid: "/XXXXXXXXX/Pub-XXXX-Android-AAAA",

tappxShare: 0.5

});

registerAdEvents();

} else {

alert('AdMobAds plugin not ready');

}

function onAdLoaded(e) {

if (e.adType === admob.AD_TYPE.INTERSTITIAL) {

admob.showInterstitialAd();

showNextInterstitial = setTimeout(function() {

admob.requestInterstitialAd();

}, 2 * 60 * 1000); // 2 minutes

}

// optional, in case respond to events

function registerAdEvents() {

document.addEventListener(admob.events.onAdLoaded, onAdLoaded);

document.addEventListener(admob.events.onAdFailedToLoad, function (e) {});

document.addEventListener(admob.events.onAdOpened, function (e) {});

document.addEventListener(admob.events.onAdClosed, function (e) {});

document.addEventListener(admob.events.onAdLeftApplication, function (e) {});

document.addEventListener(admob.events.onInAppPurchaseRequested, function (e) {});

}

function onDeviceReady() {

document.removeEventListener('deviceready', onDeviceReady, false);

initAds();

// display a banner at startup

admob.createBannerView();

// request an interstitial

admob.requestInterstitialAd();

}

// ]]></script>

To download the APK file, Right click on download demo button and then click on “Save link as” and click “Save”

Index.html Code Download demo APK

More resources here

https://github.com/appfeel/admob-google-cordova/wiki/Setup
https://github.com/appfeel/admob-google-cordova/wiki
https://github.com/floatinghotpot/cordova-admob-pro
https://github.com/appfeel/admob-google-cordova

2 Comments

kalaiselvan says:

May 19, 2016 at 6:56 pm

it’s working vecy nice.

but i need to show interstitial ads every page enter….. please help me

Invoker says:

September 9, 2016 at 7:09 am

well done. I did the same as you, read the all documents. and finally it ends here.

If you could set it up in $ionicPlatform.ready it would be great.

Google admob ads with ionic android app