implement Ads in ionic 3 using AdMob , ionic native plugin and npm packages

AdMob

AdMob is a mobile advertising company founded by Omar Hamoui. The name AdMob is a portmanteau for "advertising on mobile". It was incorporated on April 10, 2006, while Hamoui was in business school at Wharton. The company is based in Mountain View, California. In November 2009 it was acquired by Google for $750 million. The acquisition was completed on May 27, 2010.Apple Inc. had also expressed interest in purchasing the company the same year, but they were outbid by Google. Prior to being acquired by Google, AdMob acquired the company AdWhirl, formerly Adrollo, which is a platform for developing advertisements in iPhone applications. 

Link: https://www.google.com/admob/

go to the left menu and click - > Apps

then click -> Add Apps

then create the App id the banner, Interstitial, Rewarded

Then Create a project run this command:

ionic start <project name> blank --type ionic1

then move into the newly created directory:

cd <project name>

Install required js and CSS file

$ ionic cordova plugin add cordova-plugin-admobpro
$ npm install --save @ionic-native/admob

Open app.js in src ->app-> app.module.ts and add code

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AdMob } from '@ionic-native/admob';
@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AdMob
  ]
})
export class AppModule {}

Open app.js in src ->app->app.component.ts and add code

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { AdMob } from '@ionic-native/admob';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;
  options : any;
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private admob: AdMob) {
    platform.ready().then(() => {
      var admobid: {
        banner: string,
        interstitial: string,
        Rewarded: string
      };
      if (/(android)/i.test(navigator.userAgent)) {
        admobid = { // for Android
          banner: 'ca-app-pub-xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx',
          interstitial: 'ca-app-pub-xxxxxxxxxxxxxxxxxx/xxxxxxxxxxxx',
          Rewarded: 'ca-app-pub-xxxxxxxxxxxxxxx/xxxxxxxxxx'
        };
      } else if (/(ipod|iphone|ipad)/i.test(navigator.userAgent)){
        admobid = { // for iOS
          banner: 'ca-app-pub-xxxxxxxxxxxxxxx/xxxxxxxxxx',
          interstitial: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxxx',
          Rewarded: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxxx'
        };
      }
     // Banner Ads
      this.admob.createBanner({
        adId: admobid.banner,
        isTesting: false,//comment this out before publishing the app
        autoShow: true
      })
      // Full Screen Ads
        this.admob.prepareInterstitial({
          adId: admobid.interstitial,
          isTesting: false, //comment this out before publishing the app
          autoShow: true
        });
      // Video Ads 
        this.admob.prepareRewardVideoAd({
          adId: admobid.Rewarded,    
          isTesting: false, //comment this out before publishing the app 
          autoShow: true .    
        });
        statusBar.styleDefault(); 
        splashScreen.hide();});
    }
}

Image loader like WhatsApp application code is done you add platform in your application code platform add command: 

ionic cordova platform add android/ios/windows

Build and Run command

ionic cordova build android/ios/windows
ionic cordova run android/ios/windows

Github link: https://github.com/Sudarshan101/ionicAdmob

thank you