Click here to Skip to main content
14,542,223 members

Adding AdMob to Ionic Framework Application Step By Step

Rate this:
5.00 (2 votes)
Please Sign up or sign in to vote.
5.00 (2 votes)
29 Jun 2015CPOL
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:
    .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)

Share

About the Author

Nikola Breznjak
Software Developer (Senior)
Croatia Croatia
I’m an engineer at heart and a jack of all trades kind of guy.

For those who care about titles, I hold a masters degree in computing from FER (and a black belt in karate, but that’s another story…).

During the last years, worked in a betting software industry where I made use of my knowledge in areas ranging from full-stack (web & desktop) development to game development through Linux and database administration and use of various languages (C#, PHP, JavaScript to name just a few).

Currently, I’m a senior software engineer at TelTech, where we make innovative communications apps, and I <3 it.

Lately, I’m very passionate about Ionic framework and am currently in the top 3 answerers on StackOverflow in Ionic framework. I wrote a book about Ionic framework which you can get for free on Leanpub: Ionic framework – step by step from idea through prototyping to the app stores.

Other technical writing:

+ wrote a book Getting MEAN with MEMEs
was a technical reviewer for a book Deploying Node published by Packt
was a technical reviewer for a book Getting started with Ionic published by Packt
After writing 300 posts, this is why I think you should start blogging too

Come and see what I write about on my blog.

Comments and Discussions

 
PraiseGreat work Pin
Fatma ASamee1-Oct-16 22:39
MemberFatma ASamee1-Oct-16 22:39 
GeneralRe: Great work Pin
Nikola Breznjak1-Oct-16 23:52
professionalNikola Breznjak1-Oct-16 23:52 
GeneralRe: Great work Pin
Fatma ASamee2-Oct-16 10:12
MemberFatma ASamee2-Oct-16 10:12 
GeneralRe: Great work Pin
Nikola Breznjak2-Oct-16 10:40
professionalNikola Breznjak2-Oct-16 10:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Technical Blog
Posted 29 Jun 2015

Tagged as

Stats

18.1K views
2 bookmarked