Ionic 4 Implement AdMob Free Native Plugin in Latest Ionic 4 Applications more efficiently

As the latest stable version of Ionic 4 is released, some of the previous methods to implement AdMob Free plugin are depreciated. AdMob Free plugin helps to add AdMob Google ads in Ionic Application.

As we all know that we can add three types of AdMob ads in a hybrid application like Ionic for now, which are Banner Ads, Interstitial Ads ad Reward Video Ads.

In this post, we will also discuss to Implement Interstitial and Reward Ads more efficiently to protect the app from Google PlayStore policy violations.

So let’s Implement AdMob Free plugin in latest Ionic 4 Application.

Create a new Ionic 4 Application

Don’t forget to update your Ionic CLI to latest version 4.10.3 using below command

$ npm install -g ionic

Create a new Ionic blank app

$ ionic start Ionic4AdMobFree blank
$ cd Ionic4AdMobFree

Add Cordova and Ionic Native AdMob Free Plugin

Install the AdMob Free plugin using the following npm commands.

You can read more about how to get App ID from AdMob site here

$ ionic cordova plugin add cordova-plugin-admob-free  --save --variable ADMOB_APP_ID="ca-app-pub-2387490687776151~80XXXXXXX9"
$ npm install @ionic-native/admob-free

Service for AdMob Free Methods

Next, we will create a new AdMob service under a service folder to keep three of our methods to show all three type of Ads in the application.

“~Ionic4AdmobFree/src/app/service/admobfree.service.ts”

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


@Injectable()
export class AdmobFreeService {

  //Interstitial Ad's Configurations
  interstitialConfig: AdMobFreeInterstitialConfig = {
    // add your config here
    // for the sake of this example we will just use the test config
    isTesting: true,
    autoShow: false,
    //id: "ca-app-pub-39402XXXXXXXX2544/6300978111"
  };

  //Reward Video Ad's Configurations
  RewardVideoConfig: AdMobFreeRewardVideoConfig = {
    isTesting: true, // Remove in production
    autoShow: false//,
    //id: "ca-app-pub-3940XXXXXXX42544/6300978111"
  };

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

    platform.ready().then(() => {

      // Load ad configuration
      this.admobFree.interstitial.config(this.interstitialConfig);
      //Prepare Ad to Show
      this.admobFree.interstitial.prepare()
        .then(() => {
          // alert(1);
        }).catch(e => alert(e));


      // Load ad configuration
      this.admobFree.rewardVideo.config(this.RewardVideoConfig);
      //Prepare Ad to Show
      this.admobFree.rewardVideo.prepare()
        .then(() => {
          // alert(2);
        }).catch(e => alert(e));

    });

    //Handle interstitial's close event to Prepare Ad again
    this.admobFree.on('admob.interstitial.events.CLOSE').subscribe(() => {
      this.admobFree.interstitial.prepare()
        .then(() => {
          alert("Interstitial CLOSE");
        }).catch(e => alert(e));
    });
    //Handle Reward's close event to Prepare Ad again
    this.admobFree.on('admob.rewardvideo.events.CLOSE').subscribe(() => {
      this.admobFree.rewardVideo.prepare()
        .then(() => {
          alert("Reward Video CLOSE");
        }).catch(e => alert(e));
    });
  }


  BannerAd() {
    let bannerConfig: AdMobFreeBannerConfig = {
      isTesting: true, // Remove in production
      autoShow: true//,
      //id: "ca-app-pub-39402XXXXXXX44/6300978111"
    };
    this.admobFree.banner.config(bannerConfig);

    this.admobFree.banner.prepare().then(() => {
      // success
    }).catch(e => alert(e));
  }

  InterstitialAd() {
    //Check if Ad is loaded
    this.admobFree.interstitial.isReady().then(() => {
      //Will show prepared Ad
      this.admobFree.interstitial.show().then(() => {
      })
        .catch(e => alert("show " + e));
    })
      .catch(e => alert("isReady " + e));
  }

  RewardVideoAd() {
    //Check if Ad is loaded
    this.admobFree.rewardVideo.isReady().then(() => {
      //Will show prepared Ad
      this.admobFree.rewardVideo.show().then(() => {
      })
        .catch(e => alert("show " + e));
    })
      .catch(e => alert("isReady " + e));
  }


}

For Interstitial and Reward Video Ads we have added configuration part before constructor, in platform ready event we are preparing both these ad type with content. After when these both ads are shown up and closed, then on CLOSE event these will prepare again.

You can check more events here

This method will prevent ads to show up after the user exit the application which is a violation of Google Play store policies.

Import Plugin and Service in App’s main module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

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

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AdmobFreeService } from './service/admobfree.service';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    AdMobFree,
    AdmobFreeService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Next, we will update Home page HTML and Component files to call these Ads.

home.page.ts

import { Component, OnInit } from '@angular/core';
import { AdmobFreeService } from '../service/admobfree.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage  implements OnInit {

  constructor(
    private admobFreeService: AdmobFreeService,
  ) {}

  ngOnInit() {
    this.admobFreeService.BannerAd();
  }

  showInterstitial(){
    this.admobFreeService.InterstitialAd();
  }
  
  showRewardVideo(){
    this.admobFreeService.RewardVideoAd();
  }


}

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic 4 AdMob Free Demo
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
 

  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-button (click)="showInterstitial()">Show Interstitial Ad</ion-button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-button (click)="showRewardVideo()">Show Reward Video Ad</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>  


</ion-content>

After updating your app with the above code, you can run and check on a real device by running following command

$ ionic cordova run android --device

Find GitHub source code here

So here we discussed the latest and policy safe method to implement AdMob ads in Ionic 4 Applications using AdMob Free plugin by Ratson 🙂