How To Add Banner Ads To Ionic Apps Using AdMob Pro Plugin

In this post I will show how you can add banner ads to your Ionic apps. I will be doing this on a new app but you can do it to your existing app as well. I have also written a post on adding banner ads to Ionic 2 apps, so if you are looking for Ionic 2 apps You can check that post out as well.

Step 1)

We will first start by creating a new Ionic project by issuing the following command in the command prompt

ionic start MyNewApp Tabs

1	ionic start MyNewApp Tabs

Step 2)

Now we will need to add the platform to out app. So will do the following command

ionic platform add android

1	ionic platform add android

Step 3)

As we will be using the AdMob Pro plugin we will need to download it in our project. We will do that by the following command

ionic plugin add com.google.cordova.admob

1	ionic plugin add com.google.cordova.admob

you can read more about the plugin in the Admob pro plugin documentation

Step 4)

Now we will need to add the following code to the $ionicPlatform.ready() in the app.js file

  var admobid = {};
        // select the right Ad Id according to platform
        if( /(android)/i.test(navigator.userAgent) ) { 
            admobid = { // for Android
                banner: 'ca-app-pub-6869992474017983/9375997553',
                interstitial: 'ca-app-pub-6869992474017983/1657046752'
            };
        } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
            admobid = { // for iOS
                banner: 'ca-app-pub-6869992474017983/4806197152',
                interstitial: 'ca-app-pub-6869992474017983/7563979554'
            };
        } else {
            admobid = { // for Windows Phone
                banner: 'ca-app-pub-6869992474017983/8878394753',
                interstitial: 'ca-app-pub-6869992474017983/1355127956'
            };
        }

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

varadmobid={};

// select the right Ad Id according to platform

if(/(android)/i.test(navigator.userAgent)){

admobid={// for Android

banner:'ca-app-pub-9500443938156775/6789899376',

interstitial:'ca-app-pub-9500443938156775/6964097373'

};

}elseif(/(ipod|iphone|ipad)/i.test(navigator.userAgent)){

admobid={// for iOS

banner:'ca-app-pub-9500443938156775/6789899376',

interstitial:'ca-app-pub-9500443938156775/6964097373'

};

}else{

admobid={// for Windows Phone

banner:'ca-app-pub-9500443938156775/6789899376',

interstitial:'ca-app-pub-9500443938156775/6964097373'

};

}

if(window.AdMob)AdMob.createBanner({

adId:admobid.banner,

position:AdMob.AD_POSITION.BOTTOM_CENTER,

autoShow:true});

So the finished app.js file looks like this:

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.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 && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }

//======admob code start=============

      var admobid = {};
        // select the right Ad Id according to platform
        if( /(android)/i.test(navigator.userAgent) ) { 
            admobid = { // for Android
                banner: 'ca-app-pub-6869992474017983/9375997553',
                interstitial: 'ca-app-pub-6869992474017983/1657046752'
            };
        } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
            admobid = { // for iOS
                banner: 'ca-app-pub-6869992474017983/4806197152',
                interstitial: 'ca-app-pub-6869992474017983/7563979554'
            };
        } else {
            admobid = { // for Windows Phone
                banner: 'ca-app-pub-6869992474017983/8878394753',
                interstitial: 'ca-app-pub-6869992474017983/1355127956'
            };
        }

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

//=======AdMob Code End=======

});//app ready function ends
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl'
        }
      }
    })
    .state('tab.chat-detail', {
      url: '/chats/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'templates/chat-detail.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

100

101

102

103

104

105

106

107

108

109

110

111

112

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules

// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)

// the 2nd parameter is an array of 'requires'

// 'starter.services' is found in services.js

// 'starter.controllers' is found in controllers.js

angular.module('starter',['ionic','starter.controllers','starter.services'])

.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&&window.cordova.plugins.Keyboard){

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

}

if(window.StatusBar){

// org.apache.cordova.statusbar required

StatusBar.styleLightContent();

}

//======admob code start=============

varadmobid={};

// select the right Ad Id according to platform

if(/(android)/i.test(navigator.userAgent)){

admobid={// for Android

banner:'ca-app-pub-9500443938156775/6789899376',

interstitial:'ca-app-pub-9500443938156775/6964097373'

};

}elseif(/(ipod|iphone|ipad)/i.test(navigator.userAgent)){

admobid={// for iOS

banner:'ca-app-pub-9500443938156775/6789899376',

interstitial:'ca-app-pub-9500443938156775/6964097373'

};

}else{

admobid={// for Windows Phone

banner:'ca-app-pub-9500443938156775/6789899376',

interstitial:'ca-app-pub-9500443938156775/6964097373'

};

}

if(window.AdMob)AdMob.createBanner({

adId:admobid.banner,

position:AdMob.AD_POSITION.BOTTOM_CENTER,

autoShow:true});

//=======AdMob Code End=======

});//app ready function ends

})

.config(function($stateProvider,$urlRouterProvider){

// Ionic uses AngularUI Router which uses the concept of states

// Learn more here: https://github.com/angular-ui/ui-router

// Set up the various states which the app can be in.

// Each state's controller can be found in controllers.js

$stateProvider

// setup an abstract state for the tabs directive

.state('tab',{

url:"/tab",

abstract:true,

templateUrl:"templates/tabs.html"

})

// Each tab has its own nav history stack:

.state('tab.dash',{

url:'/dash',

views:{

'tab-dash':{

templateUrl:'templates/tab-dash.html',

controller:'DashCtrl'

}

})

.state('tab.chats',{

url:'/chats',

views:{

'tab-chats':{

templateUrl:'templates/tab-chats.html',

controller:'ChatsCtrl'

}

})

.state('tab.chat-detail',{

url:'/chats/:chatId',

views:{

'tab-chats':{

templateUrl:'templates/chat-detail.html',

controller:'ChatDetailCtrl'

}

})

.state('tab.account',{

url:'/account',

views:{

'tab-account':{

templateUrl:'templates/tab-account.html',

controller:'AccountCtrl'

}

});

// if none of the above states are matched, use this as the fallback

$urlRouterProvider.otherwise('/tab/dash');

});

NOTE: The app.js file will be different for each template namely tabs,bank,sideMenu, make sure you add the code to the $ionicPlatform.ready() function and no to any function inside it.