How to monetize ionic apps or games using google admob?

To monetize ionic apps or games is very easy. All you need is 90% setup and 10% code.

Install Cordova Admob Pro:

To install Cordova Admob Pro, open command editor and locate to ionic root folder where ionic apps is installed in my case it is c:\testAdmob. Type the below command to install admob pro.

  c:\testAdmob>ionic plugin add cordova-plugin-admobpro 

Admob Setup:

To sign up to Google admob Account, go to admob website.

Follow the instruction on page.
Login to your account, click on monetize menu link. Click on “Monetize a new app” button.


Under select an app, click on “add your app manually” tab. Type the app name and platform.
As soon as you click on “add app” button, you will get app id like this App ID: ca-app-pub-2754404983641276~4306028761.
Customize this banner as your app require.
Select ad format (banner or intertitial) and name ad unit. This can be anything you want.

You can add Firebase Analytics as well. This is optional. Finally click on done button. We will get the unit id like this ca-app-pub-2754404983641276/3715442768 . Repeat this process once again for intertitial ads.

Code integration:

Add below code under ionic platform ready function in app.js file. Don’t forget to change unit id with your new generated id.

//======admob code start=============
      var defaultOptions = {
          adSize: 'SMART_BANNER',
          width: 360, // valid when set adSize 'CUSTOM'
          height: 90, // valid when set adSize 'CUSTOM'
          position: AdMob.AD_POSITION.BOTTOM_CENTER,
          x: 0,       // valid when set position to POS_XY
          y: 0,       // valid when set position to POS_XY
          isTesting: false,
          autoShow: true
      window.AdMob.setOptions( defaultOptions );

     var admobid = {};
        // select the right Ad Id according to platform
        if( /(android)/i.test(navigator.userAgent) ) { 
            admobid = { // for Android
                banner: 'ca-app-pub-2754404983641276/3715442768',
                interstitial: 'ca-app-pub-2754404983641276/3671743565'
        } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
            admobid = { // for iOS
                banner: 'ca-app-pub-2754404983641276/3715442768',
                interstitial: 'ca-app-pub-2754404983641276/3671743565'
        } else {
            admobid = { // for Windows Phone
                banner: 'ca-app-pub-2754404983641276/3715442768',
                interstitial: 'ca-app-pub-2754404983641276/3671743565'
        if(window.AdMob) AdMob.createBanner( {

         if(window.AdMob) AdMob.prepareInterstitial({
            //isTesting:true,//comment this out before publishing the app
    //======admob code end =============

Now banner integration part has done. There are one more setting if you want to earn more money by adding interstitial ads which are full banner ads. In above code we have only prepared the Interstitial ads but not displayed. It is good practice to load ads after some action or state changed or done. Add Below code in controller so that ads can be visible.

.controller('ActorCtrl', ['$scope', function($scope) {
   // after leaving the state
   $scope.$on('$ionicView.beforeLeave', function(e) {
        // console.log("Leaving");
        if (window.AdMob) AdMob.showInterstitial();        

Testing on mobile or emulator

When you are testing you app on browser or android phone, make sure to set true value to isTesting. On live app make it false again. Please note this ads will only visible on mobile not on desktop browser.

To generator apk, type below code in command prompt. I often test apk in my mobile to get real test.

ionic build android

To run emulator, type below code.

ionic emulate android

On mobile device install the app, you able to see the ads banner.

Post Author: sachinw68