You are building an application using ionic framework and you want to integrate Admob ads, That's great because with that you can earn some money from your apps.

As I'm an ionic developer and I love that framework, because it allow me to build apps fast and with technologies that I know like HTML and CSS and JavaScript and also TypeScript, so all those web technologies are enough to make a mobile app with ionic framework, so after building my apps I always look for admob free plugin, since that happens every time I want to publish an app to Google Play Store, I decided to write this mini article to a reference for me and for others that looks for the same thing.

As you know there is another plugin called AdMob Pro which is not free and it takes a percentage out of your earnings if you profit more than $1,000. That's why I recommend the other alternative which is Admob Free.

Adding Admob Free to ionic application

Open your terminal or command prompt if your using windows and let's add the admob free plugin to our ionic project by running this command line here:

ionic cordova plugin add cordova-plugin-admob-free

Add This one here:

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

Great if everything is okay, let's open our project in some code editor and look this specific file which is app.module.ts and let's import the admob free plugin and add it to our imports array just like you see below:

import { AdMobFree } from '@ionic-native/admob-free';

  providers: [
    AdMobFree,
  ]


Now that you have added the admob free to your ionic 3 application, you need a separated service provider, So go ahead and create a service provider from you terminal using this command line:

ionic g provider ads

That should create a new file ads.ts under providers/ads/ folder. Great now that you have created your service provider you need to create some functions that will control your ads in the application. That's why you need to copy the whole code bellow to ads.ts and play around it, it's easy to understand what it did.

import { Injectable } from "@angular/core";
import {
  AdMobFree,
  AdMobFreeBannerConfig,
  AdMobFreeInterstitialConfig,
  AdMobFreeRewardVideoConfig
} from "@ionic-native/admob-free";
import { Platform } from "ionic-angular";

@Injectable()
export class AdsProvider {
  bannerId: string = "ca-app-pub-xxx-your-banner-id-unit";
  intersId: string = "ca-app-pub-xxx-your-interstitial-id-unit";
  rewardId: string = "ca-app-pub-xxx-your-rewarded-id-unit";

  constructor(private admobFree: AdMobFree, public platform: Platform) {}

  showBanner() {
    this.platform
      .ready()
      .then(() => {
        const bannerConfig: AdMobFreeBannerConfig = {
          id: this.bannerId,
          isTesting: false,
          autoShow: false
        };
        this.admobFree.banner.config(bannerConfig);
        this.admobFree.banner
          .prepare()
          .then(() => {
            this.admobFree.banner.show();
          })
          .catch(e => console.log(e));
      })
      .catch(e => console.log(e));
  }

  hideBanner() {
    this.platform
      .ready()
      .then(() => {
        this.admobFree.banner.hide().catch();
      })
      .catch(e => console.log(e));
  }

  loadInterstitial() {
    this.platform.ready().then(() => {
      const interConfig: AdMobFreeInterstitialConfig = {
        id: this.intersId,
        isTesting: false,
        autoShow: false
      };
      this.admobFree.interstitial.config(interConfig);
      this.admobFree.interstitial.prepare();
    });
  }

  showInterstitial() {
    this.platform.ready().then(() => {
      const interConfig: AdMobFreeInterstitialConfig = {
        id: this.intersId,
        isTesting: false,
        autoShow: false
      };
      this.admobFree.interstitial.config(interConfig);
      this.admobFree.interstitial.isReady().then(() => {
        this.admobFree.interstitial.show();
      });
    });
  }

  showRewardVideo() {
    this.platform.ready().then(() => {
      const rewardVideoConfig: AdMobFreeRewardVideoConfig = {
        id: this.rewardId,
        isTesting: false,
        autoShow: false
      };
      this.admobFree.rewardVideo.config(rewardVideoConfig);
      this.admobFree.rewardVideo.prepare().then(() => {
        this.admobFree.rewardVideo.isReady().then(() => {
          this.admobFree.rewardVideo.show();
        });
      });
    });
  }
}

Show Banner Ad

Now every time you want to show your banner ads, you only need to call that method in the page that you want the banned to be shown, for example I always want to show banner ad just after hitting the home page of my application, so what I do mainly is I inject the ads service provider in home.ts page and I call the showBanner() method, see code bellow:

import { AdsProvider } from "../../providers/ads/ads";

    constructor( public _ads: AdsProvider,) {}

  ionViewWillEnter() {
    this._ads.showBanner();
    }

Show Interstitial and Rewarded Ad

That kind of ads need to be preloaded in order to avoid fake clicks and decrease the CTR, so the first thing you should do is just load the interstitial ad first and then show it to the user, so How you do that?.

it's easy, for example the user is in the home page and when he clicks to go profile page you want to show him and interstitial ad, that's why you need to load the interstitial ad once you hit the home page first and show it after he leaves home page.

home.ts page

ionViewDidLoad(){
    ionViewDidLoad(){ this._ads.loadInterstitial(); }
}

profile.ts page

ionViewDidEnter() {
    this._ads.showInterstitial();
  }

That's my way of adding Admob free plugin to my ionic 3 and ionic 4 applications, I hope it's gonna help you and if you see that it should be improved, just feel free to contact me and I will be thankful.

More about Ionic