What we can do with Google’s AdMob? AdMob provides a mobile application monetization platform. The developers of Native and Hybrid applications can monetize their application earn revenue out of it.

AdMob provides a different type of Ad unit that can be added in the application, but Hybrid applications support only

Banner, Interstitial, Rewarded Ads ads are the most popular formats of advertisement in mobile applications.

lets go and lest see how to setup AdMob with ionic 5 and ionic 4.

Step 1) Create a new Ionic application

The first check, as a dependency, you must have NodeJs installed on your computer. then Install the Ionic CLI package by running the following NPM command

$ npm install -g @ionic/cli

Now, create Ionic 5 application in Angular starting with a blank or other template:

$ ionic start ionic-admobtest blank --type=angular

# Change root directory
$ cd ionic-admobtest

Step 2) Install the AdMob Plugin

For use Google AdMob in the Ionic application we need to use the Cordova plugin.

( now you can use capacitor but in this case, I will go Cordova ) Here we will use the AdMob Free plugin.

Run this commands to install the AdMob Free plugin in your application.

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

Note : ca-app-pub-2387490687776151~80XXXXXXX9 Replace your AdMob app id with this id before run this commands

Now we will make changes in the application file to make it work.

Import AdMob free and add as a provider in src/app/app.module.ts, then we will be able to use it in our application.

// app.module.ts
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 { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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

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

Step 3) Create Google AdMob to Ad Unit ID

first Create a new account on Google AdMob or Use the existing one if you already. you can use Google provided free app AdMob test ID for development purposes.

Banner [ca-app-pub-3940256099942544/6300978111]
Interstitial [ca-app-pub-3940256099942544/1033173712]
Interstitial Video [ca-app-pub-3940256099942544/8691691433]
Rewarded Video [ca-app-pub-3940256099942544/5224354917]
Native Advanced [ca-app-pub-3940256099942544/2247696110]
Native Advanced Video [ca-app-pub-3940256099942544/1044960115]

Step 4) Show Ads Methods.

Enter the most simple part, here we will Ad simple methods to show  BannerInterstitial & Rewarded Ads a respective configuration where we add ad unit ID or flag for test mode.

In HTML view “~src/app/home/home.page.html” add the following three buttons to show above mentioned three types of Ads.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  Ionic Freaky Admob Example
  <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs">docs</a> will be your guide.</p>



  
  <ion-button shape="round" color="primary" fill="outline" (click)="showBannerAd()">Show Banner Ad</ion-button>
  
  <ion-button shape="round" color="primary" fill="outline" (click)="showInterstitialAds()">Show Interstitial Ads</ion-button>

  <ion-button shape="round" color="primary" fill="outline" (click)="showRewardVideoAds()">Show Reward Video Ads</ion-button>

</ion-content>

Add this methods in the home component file “~src/app/home/home.page.ts

Setup Banner Ads Function

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

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

Setup Interstitial Ads Ads Function

showInterstitialAds(){
        let interstitialConfig: AdMobFreeInterstitialConfig = {
            isTesting: true, // Remove in production
            autoShow: true//,
            //id: "ca-app-pub-3940256099942544/6300978111"
        };
        this.admobFree.interstitial.config(interstitialConfig);
        this.admobFree.interstitial.prepare().then(() => {
        }).catch(e => alert(e));
    }

Setup Rewarded Ads Ads Function

showRewardVideoAds(){
        let RewardVideoConfig: AdMobFreeRewardVideoConfig = {
            isTesting: true, // Remove in production
            autoShow: true//,
            //id: "ca-app-pub-3940256099942544/6300978111"
        };
        this.admobFree.rewardVideo.config(RewardVideoConfig);
        this.admobFree.rewardVideo.prepare().then(() => {
        }).catch(e => alert(e));
    }

complete “home.page.ts” file code.

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

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

  constructor(
    private admobFree: AdMobFree
  ) {
  }


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

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



    showInterstitialAds(){
        let interstitialConfig: AdMobFreeInterstitialConfig = {
            isTesting: true, // Remove in production
            autoShow: true//,
            //id: "ca-app-pub-3940256099942544/6300978111"
        };
        this.admobFree.interstitial.config(interstitialConfig);
        this.admobFree.interstitial.prepare().then(() => {
        }).catch(e => alert(e));
    }

    showRewardVideoAds(){
        let RewardVideoConfig: AdMobFreeRewardVideoConfig = {
            isTesting: true, // Remove in production
            autoShow: true//,
            //id: "ca-app-pub-3940256099942544/6300978111"
        };
        this.admobFree.rewardVideo.config(RewardVideoConfig);
        this.admobFree.rewardVideo.prepare().then(() => {
        }).catch(e => alert(e));
    }
}

That’s All

Thanks & Happy Coding 🙂

Video Will coming soon Subscribe :

https://www.youtube.com/channel/UCn_OWHM0zllZuVf1Rv0O5mg

Buy ionic app development with local data course

2 Comments

Write A Comment