AdMob not loading ads in ionic/angular app

Question

I'm having some problems getting ads to work. I can't rap my brain around why it isn't working. I have the following plugins installed:

com.google.playservices 19.0.0 "Google Play Services for Android" com.rjfun.cordova.plugin.admob 2.1.7 "AdMob" I've have used this tutorial: https://blog.nraboy.com/2014/06/using-admob-ionicframework/1

This is my code in the apps.js:

 .run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }

        // select the right Ad Id according to platform
        if (window.plugins && window.plugins.AdMob) {
            var admob_key = "ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx";
            var admob = window.plugins.AdMob;
            admob.createBannerView(
                {
                    'publisherId': admob_key,
                    'adSize': admob.AD_SIZE.BANNER,
                    'bannerAtTop': false
                },
                function () {
                    admob.requestAd(
                        {'isTesting': false},
                        function () {
                            admob.showAd(true);
                        },
                        function () {
                            console.log('failed to request ad');
                        }
                    );
                },
                function () {
                    console.log('failed to create banner view');
                }
            );
        }
    });
});

This results in a black banner area at the bottom of the app, however no ad is ever loaded. This code is currently live, on the admob site I can see a couple hundred session. However my impressions and Request rpm are both at zero for a couple of days now. Anybody have any idea what might be wrong?

Answer 1

I had the same issue. In fact the version of AdMob plugin in the blog post isn't supported anymore, you have to use the new one cordova-admob-pro which works fine with all android versions and iOS versions as well.

Here a blog post about how to use the new version:

http://redwanhilali.com/ionic-admob-integration/

I hope it helps.

Answer 2

Raymond is right, I have used the following code to install the plugin

> Ionic plugin add cordova-plugin-admobpro

Note: Please upgrade your cordova CLI to version 5

Open app.js and just paste the following code inside .run method and done!

var admobid = {};

// select the right Ad Id according to platform

if( /(android)/i.test(navigator.userAgent) ) { 
    admobid = { // for Android
        banner: 'ca-app-pub-3940256099942544/6300978111',
        interstitial: 'ca-app-pub-XXXXXXXXXXXXXXXX/NNNNNNNNNN'
    };
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
    admobid = { // for iOS
        banner: 'ca-app-pub-3940256099942544/6300978111',
        interstitial: 'ca-app-pub-XXXXXXXXXXXXXXXX/NNNNNNNNNN'
    };
} else {
    admobid = { // for Windows Phone
        banner: 'ca-app-pub-3940256099942544/6300978111',
        interstitial: 'ca-app-pub-XXXXXXXXXXXXXXXX/NNNNNNNNNN'
    };
}

if(window.AdMob) AdMob.createBanner( {
  adId:admobid.banner, 
  isTesting: true,
  position:AdMob.AD_POSITION.BOTTOM_CENTER, 
  autoShow:true} );

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

Don't forget to set 'isTesting: false' while deploying your app to the store.

Answer 3

I am the author of the plugin you are using. Please migrate to the pro version:

cordova plugin add com.google.cordova.admob

Or (if you are using cordova CLI v5.x),

cordova plugin add cordova-plugin-admobpro

Here is a working demo using cordova-plugin-admobpro in a Ionic framework APP: https://github.com/floatinghotpot/admob-demo-app-ionic

Suggest:

1. Follow the commands in the link to build a working demo;
2. Look into the content in demo/ folder and check file js/admob.js

https://github.com/floatinghotpot/admob-demo-app-ionic/blob/master/demo/js/admob.js

You can even directly copy this file to your project, then reference in your index.html:

<script src="js/admob.js"></script>

Like this demo index.html: https://github.com/floatinghotpot/admob-demo-app-ionic/blob/master/demo/index.html#L21

Answer 4

I also spent 2 days to make it work, After reading lot of docs i got it working finally. Below code worked for me. I have written detailed blog post also and working code download as well as working apk. Read Here OR follow below steps (I assume you already have publisher id and all other things)

1) Install admob plugin

ionic plugin add cordova-admob

2) Include angular-admob.js file

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

3) Call body onload function to init admob

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

4) Put below code at the bottom of page (Dont forget to replace your publisher id with 'ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII'). It works only on mobile devices and not in pc browser. Once app started wait for a 20-25 seconds to load ads.

<script type="text/javascript">
  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>