Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Javascript

Adding AdMob to Ionic Framework Application Step By Step

5.00/5 (2 votes)
29 Jun 2015CPOL2 min read 23.4K  
How to add AdMob to Ionic framework application

If you want, you can take a look at the screencast of this tutorial. This is actually my first shocked screencast blog post, so go easy on me. :)

I’ve been searching for a start to end tutorial on this but with no luck. Now, when I finally figured out how to use it, I’m documenting the exact steps which I did in order to get the AdMob working inside my Ionic app. You can fork the project from GitHub or download and test the .apk file on your device.

I broke down the steps in two parts: AdMob settings and Ionic settings.

AdMob Settings

Let’s start with AdMob settings:

  1. Sign in /Sign up for AdMob at https://www.google.com/admob/
  2. Click the Monetize new app button:

    Screen Shot 2015-05-05 at 23.21.06

  3. If your app is not yet published, you can add it manually:

    Screen Shot 2015-05-05 at 23.23.07

  4. Create new tracking ID:

    Screen Shot 2015-05-05 at 23.25.20

  5. Configure the adds type, size, placement, style, name:

    Screen Shot 2015-05-05 at 23.26.29

  6. You can read additional information on how to implement GA and AdMob, but for now, let’s just click Done:

    Screen Shot 2015-05-05 at 23.28.10

  7. You will now see the following similar screen:

    Screen Shot 2015-05-05 at 23.30.11

    The most important thing to note here is this Ad unit ID, which in my test case is

    ca-app-pub-7957971173858308/3599533362.

Ionic Settings

I’m counting on the fact that you know how to use Ionic since you’re looking for a specific topic like this, so I am going skip the part of actually explaining how to use the Ionic cli. Ok, enough chit-chat, now I’m going to show you the steps on how to implement AdMob in your Ionic project:

  1. Start a new Ionic blank project:
    ionic create IonicAdMobTest blank
  2. Add the platform for which you want to build the application:
  3. ionic platform add android
    In case you’re developing on a Mac, you can also choose to add:
    ionic platform add ios
  4. Add the cordova-plugin-admob plugin by entering the following command in your command prompt when in the root folder of your project:
    cordova plugin add com.rjfun.cordova.plugin.admob
    As a side note, you can always check the list of all installed plugins by executing:
    cordova plugin list
  5. Add the following code to your app.js file (located in the www folder) inside the .run function:
    JavaScript
    .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) {
                // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
            }
    
            if(window.plugins && window.plugins.AdMob) {
                var admob_key = device.platform == "Android" ? 
                "ca-app-pub-7957971173858308/3666912163" : "ca-app-pub-7957971173858308/3666912163";
                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'); }
                );
            }
        });
    })
    Of course, change it according to your own admob_key which you obtained in the first part (step 8).
  6. Start the emulator by running:
    ionic build ios && ionic emulate ios
    
    //or, for android
    ionic build android && ionic emulate android
  7. and you should get the following screen in your emulated application:

    IonicAdMobTest

  8. You can clone the project from GitHub, or download the .apk (unzip needed) file and test on your Android device.

That’s all folks. Hope this helps someone by saving time on endless testing as I did. :/

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)