Introduction

The objetive of this tutorial is to show how to add Mobile Ads to your Ionic 3 App with AdMob.

What is AdMob?

AdMob is the Google’s advertising platform for monetizing and promoting mobile apps. It's also the most used and recognized by aplications developers. AdMob is available for Android and iOS platforms. It enables app developers to promote their apps through in-app ads, monetize their apps by enabling in-app advertising, and provides smart insights through Google Analytics.


Before you can serve any AdMob ads you must sign up for an AdMob account at www.admob.com AdMob does not charge a fee for creating an account or for serving up AdMob ads(be aware that some AdMob plugins vendors do charge a fee for the use of their plugin). If you have an AdMob account you must create a set of Ad Unit IDs that identify your ad impressions and provide these IDs as part of the AdMob API initialization sequence within your app.


IMPORTANT: each application should have its own set of Ad Unit IDs! If you do not yet have an app in an app store, you can use the "manual" method to identify your app for the purpose of obtaining Ad Unit IDs. We will use cordova admob free plugin.


Remember that AdMob plugin uses cordova, so it will not work in the browser. You need to try it on a real device or on an emulator

Hands on!

Remember... you will need:

An Ionic app where you will integrate AdMob ads. You can either use a blank app, or an existing one. If you are looking for a beautiful ionic starter app you must have a look at our beautiful mobile templates & components.


This is how it will look like


Step 1: Install AdMob Free cordova plugin

Follow these steps to get this DONE:
  • Execute the following command on the terminal:

    $ ionic cordova plugin add cordova-plugin-admob-free

    $ npm install --save @ionic-native/admob-free

  • Import AdMob Free form ionic-native to your app.module.ts file:
    import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';

There are 3 different types of Ads we can display:

  1. Banner Ad
  2. Interstitial Ad
  3. Reward Video Ad

In this example we will cover Banner and Interstitial Ads. However, if you want to learn more you can check the plugin's documentation

Step 2: Banner Ads

Now we will go straight to the code so open your Ionic 3 App with your preferred code editor. Personally I use and recommend atom.


The best way to show you how to create a banner is with a real example of the code, here you can see some Typescript code that handles a banner creation for your app.

Banner Configuration

The banner Ads can be displayed in different positions and can have different sizes. You can check all this customizations here and then add them to your bannerConfig as shown in the code below.

We set autoshow : true so the banner will be shown immediatly after the banner is created.


import { Component } from '@angular/core';
import { NavController, Platform, ToastController } from 'ionic-angular';
import {  AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';

@Component({
  selector: 'page-ads',
  templateUrl: 'ads.html'
})
export class AdsPage {

  constructor(
  private navController: NavController,
    private toastCtrl: ToastController,
    private adMobFree: AdMobFree

	) {
  }

  createBanner(){
  let toast = this.toastCtrl.create({
     message: 'Creating your ad',
     duration: 3000,
     position: 'top'
   });
   toast.present();
   const bannerConfig: AdMobFreeBannerConfig = {
     // add your config here
     // for the sake of this example we will just use the test config
     isTesting: true,
     autoShow: true
   };
   this.adMobFree.banner.config(bannerConfig);

   this.adMobFree.banner.prepare()
   .then(() => {
     // banner Ad is ready
     // if we set autoShow to false, then we will need to call the show method here
   })
   .catch(e => console.log(e));

 }

}

Errors at Banner creation

The banner ad creation can fail so we will subscribe to onAdFailLoad event in app.component.ts and display a message: 'Error creating your ad', however, you can use this event to do something more interesting.

  constructor(
      platform: Platform,
      toastCtrl: ToastController,
      public adMobFree: AdMobFree,
      public statusBar: StatusBar,
      public splashScreen: SplashScreen) {

      platform.ready().then(() => {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.


        document.addEventListener('onAdFailLoad', function(e){
          let toast = toastCtrl.create({
            message: 'Error creating your ad',
            duration: 3000,
            position: 'top'
          });
          toast.present();
        });
        this.statusBar.styleDefault();
        this.splashScreen.hide();
      });
    }

Hide banner Ad

Sometimes you need to hide the banner in some screens or just remove it at all. This functionality is so easy to achive and very usefull in situation where you don't want the ad to be visible.

import { Component } from '@angular/core';
import { NavController, Platform, ToastController } from 'ionic-angular';
import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';

@Component({
  selector: 'page-ads',
  templateUrl: 'ads.html'
})
export class AdsPage {

  constructor(
  private navController: NavController,
    private toastCtrl: ToastController,
    private adMobFree: AdMobFree

	) {
  }

  removeBanner(){
  	this.adMobFree.banner.hide();
  }

}

Step 3: Interstitial Ads

Interstitial Configuration

We will prepere the interstitial and when it's ready it will be displayed automatically. In adMobFree.interstitial.config you need to set you interstitial Ad Id created in your AdMob Account

We set autoshow : true so the interstitial ad will be shown immediatly after it's created.


import { Component } from '@angular/core';
import { NavController, Platform, ToastController } from 'ionic-angular';
import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';

@Component({
  selector: 'page-ads',
  templateUrl: 'ads.html'
})
export class AdsPage {

  constructor(
  private navController: NavController,
    private toastCtrl: ToastController,
    private adMobFree: AdMobFree

	) {
  }

  showInterstitial() {
        this.adMobFree.interstitial.config({
          id: 'ca-app-pub-xxx/xxx',
          autoShow: true
        }
        this.adMobFree.interstitial.prepare();
    }


}

Next Steps

After having AdMob integration working in your Ionic App you can focus on:

As you know we also sell beautiful mobile templates and components that you may find super useful as they save you hours of development, time and effort, while giving your projects a great design from scratch.

Why don’t you give a chance to these Ionic templates and apply this new knowledge?