Ionic 2, ads with AdMob

Well, our app development is nearing to completion and maybe we want monetize it. An option is to use Google AdMob to serve ads, and it's very easy in Ionic 2. Here you can find the official documentation.

The first step is install the plugin, from a terminal, inside your project run

   ionic plugin add cordova-plugin-admobpro

And to add the ionic native AdMob module run

   npm install --save @ionic-native/admob

And we already have everything we need, as it is assumed to we have an AdMob app ID.
First edit the src/app/app.module.ts, import the plugin and add it in the providers section

   import { NgModule, ErrorHandler } from '@angular/core';
   import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
   import { Http } from '@angular/http';
   import { TranslateModule, TranslateLoader, TranslateStaticLoader } 
                                    from 'ng2-translate/ng2-translate'
   import { MyApp } from './app.component';

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

   export function createTranslateLoader(http: Http) {
      return new TranslateStaticLoader(http, 'assets/i18n', '.json');
   }

   @NgModule({
      declarations: [
         MyApp
      ],
   imports: [
      IonicModule.forRoot(MyApp)
      TranslateModule.forRoot({
         provide: TranslateLoader,
         useFactory: (createTranslateLoader),
         deps: [Http]
      })
     ],
   bootstrap: [IonicApp],
   entryComponents: [
      MyApp
   ],
   providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},
              AdMob]
   })
   export class AppModule {}
 

The next step is edit the src/app/app.component.ts and first import the plugin, configure the AdMob, create the banner and show it.

   import { Component } from '@angular/core';
   import { Platform } from 'ionic-angular';
   import { StatusBar, Splashscreen } from 'ionic-native';
  
   import { TabsPage } from '../pages/tabs/tabs';


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

   interface AdMobType {
      banner: string
   };

   @Component({
      templateUrl: 'app.html'
   })
   export class MyApp {
      rootPage = TabsPage;

      constructor(platform: Platform, private admob: AdMob) {
         platform.ready().then(() => {

            StatusBar.styleDefault();
            Splashscreen.hide();

            // AdMob settings
           var adMobID: AdMobType;
           if (/(android)/i.test(navigator.userAgent)) {
              adMobID = {
                 banner: 'ca-app-pub-android/id'
              };
           } else if (/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
              adMobID = {
                 banner: 'ca-app-pub-iOS/id'
              };        
           } else {
              adMobID = {
                 banner: 'ca-app-pub-Windows/id'
              };        
           }

           if (this.admob) {
              this.admob.createBanner({
                 adId: adMobID.banner,
                 isTesting: true,
                 position: this.admob.AD_POSITION.BOTTOM_CENTER,
                 autoShow: true
              });
           }
         });
      }
   }

When the app are ready to release, in createBanner comment isTesting property or set it to false. For the banner position, if you want set it to top, change the position property to AD_POSITION.TOP_CENTER.

Finally the app looks like