Angular.js, Ionic apps

Miquel Martín edited this page Oct 27, 2016 · 9 revisions

This plugin is designed to support Ionic apps (which are based in Angular.js) in three simple steps (doesn't need ngCordova):

  • Install the plugin as usual (see here):
    ionic plugin add cordova-admob
  • Include the following script in your index.html (just it, no need to copy any file: the plugin is in charge to copy the script when the app is prepared):
    <script src="lib/angular-admob/angular-admob.js"></script>
  • Call AdMob from your Ionic app. Here is a quick example:
    var app = angular.module('myApp', ['admobModule']);

    app.config(['admobSvcProvider', function (admobSvcProvider) {
      // Optionally you can configure the options here:
      admobSvcProvider.setOptions({
        publisherId:          "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",  // Required
        interstitialAdId:     "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",  // Optional
        tappxIdiOS:           "/XXXXXXXXX/Pub-XXXX-iOS-IIII",            // Optional
        tappxIdAndroid:       "/XXXXXXXXX/Pub-XXXX-Android-AAAA",        // Optional
        tappxShare:           0.5                                        // Optional
      });

      // Optionally configure the events prefix (by default set to 'admob:')
      admobSvcProvider.setPrefix('myTag~');
    }]);


    app.run(['admobSvc', function (admobSvc) {
      // Also you could configure the options here (or in any controller):
      // admobSvcProvider.setOptions({ ... });

      admobSvc.createBannerView();
      // You could also call admobSvc.createBannerView(options);


      // Handle events:
      $rootScope.$on(admobSvc.events.onAdOpened, function onAdOpened(evt, e) {
        console.log('adOpened: type of ad:' + e.adType);
      });
    }]);

For events handling you could also use the 'mytag' + eventName format (note the change from admobSvc.events to 'myTag~' + admob.events):

    var app = angular.module('myApp', ['admobModule']);

    app.config(['admobSvcProvider', function (admobSvcProvider) {
      // Optionally configure the events prefix (by default set to 'admob:')
      admobSvcProvider.setPrefix('myTag~');
    }]);


    app.run(['admobSvc', function (admobSvc) {
      // Handle events:
      $rootScope.$on('myTag~' + admob.events.onAdOpened, function onAdOpened(evt, e) {
        console.log('adOpened: type of ad:' + e.adType);
      });

      // The default prefix for events is 'admob:'
      // $rootScope.$on('admob:' + admob.events...
    }]);

And here it goes an example on how to manage interstitials:

angular.module('myApp', ['admobModule'])

    .constant('AdmobConfig', {
        bannerId: /(android)/i.test(navigator.userAgent) ? "ca-app-pub-XXXXXXXXXXXXXXXX/ANDROID_BANNER_ID" : "ca-app-pub-XXXXXXXXXXXXXXXX/IOS_BANNER_ID",
        interstitialId: /(android)/i.test(navigator.userAgent) ? "ca-app-pub-XXXXXXXXXXXXXXXX/ANDROID_INTERSTITIAL_ID" : "ca-app-pub-XXXXXXXXXXXXXXXX/IOS_INTERSTITIAL_ID",
    })

    .config(function (admobSvcProvider, AdmobConfig) {
        admobSvcProvider.setOptions({
            publisherId: AdmobConfig.bannerId,
            interstitialAdId: AdmobConfig.interstitialId,
            autoShowInterstitial: false,
        });
    })

    .run(function ($rootScope, $ionicPlatform, $timeout, admobSvc) {
        admobSvc.requestInterstitialAd();

        $rootScope.isInterstitialAvailable = false;
        $rootScope.isAppForeground = false;

        $rootScope.$on(admobSvc.events.onAdLoaded, function onAdLoaded(evt, e) {
            if ($rootScope.isAppForeground) {
                if (e.adType === admobSvc.AD_TYPE.INTERSTITIAL) {
                    $rootScope.isInterstitialAvailable = true;
                }
            }
        });

        $rootScope.$on(admobSvc.events.onAdOpened, function onAdOpened(evt, e) {
            if ($rootScope.isAppForeground) {
                if (e.adType === admobSvc.AD_TYPE.INTERSTITIAL) {
                    $rootScope.isInterstitialAvailable = false;
                    $timeout(admobSvc.requestInterstitialAd, 1); // Immediately request next interstitial
                }
            }
        });

        $ionicPlatform.on('pause', function onPause() {
            if ($rootScope.isAppForeground) {
                $rootScope.isAppForeground = false;
            }
        });
        $ionicPlatform.on('resume', function onResume() {
            if (!$rootScope.isAppForeground) {
                $timeout(admobSvc.requestInterstitialAd, 1);
                $rootScope.isAppForeground = true;
            }
        });
    })

    .controller('YourController', function ($rootScope, admobSvc) {
        var vm = this;

        vm.pleaseShowInterstitial = function () {
            if ($rootScope.isInterstitialAvailable) {
                admobSvc.showInterstitialAd();
            }
        };
    });
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.