Ionic 4 Admob tutorial with screenshots

Install the Cordova and Ionic Native plugins:

ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ca-pub-4480115196234187"

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

Add this plugin to your app's module:

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

providers: [

    StatusBar,

    SplashScreen,

    AdMobFree,

    {provide: ErrorHandler, useClass: IonicErrorHandler}

]

Now write the code to show banner ad and Interstitial Ad in your component:

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

constructor(public navCtrl: NavController,

              private admobFree: AdMobFree) {

    

     this.showBannerAd();

     this.showinterstitialAd();

}

showBannerAd() {

    const bannerConfig: AdMobFreeBannerConfig = {

      // add your config here

      // for the sake of this example we will just use the test config

      isTesting: false,

      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));

  }

  showinterstitialAd() {

    const interstitialConfig: AdMobFreeInterstitialConfig = {

      // add your config here

      // for the sake of this example we will just use the test config

      isTesting: false,

      autoShow: true

    };

    this.admobFree.interstitial.config(interstitialConfig);

    this.admobFree.interstitial.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));

  }

After that once you build and install the app in real android devivce you will be able to see ad as below:

Banner Ad:

Interstitial Ad: