Adding AdMob to Ionic framework application step by step

ionicAdMob2

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 info 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 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:
  2. Add the platform for which you want to build the application:
  3. In case you’re developing on a Mac, you can also choose to add:
  4. Add the cordova-plugin-admob plugin by entering the following command in your command prompt when in the root folder of your project:
    As a side note, you can always check the list of all installed plugins by executing:
  5. Add the following code to your app.js file (located in the www folder) inside the .run function:
    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:
  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 :/

Written by Nikola Brežnjak