How to add AdsMob into ionic 4 EJSS templates

This tutorial is by prof. felix and lookang

Firstly, create your app with Ionic and test it.

After that, you can include AdMob (see https://www.freakyjolly.com/ionic-admob-free-native-tutorial/ ) using the following steps:

1) Install the AdMob Plugin in your ionic project. The ca-app-pub-0121577198857509~3332380085 is from the https://apps.admob.com/v2/apps/list?_ga=2.17866169.1871561092.1589958673-1888724434.1587873282&_gac=1.149496644.1589958673.CjwKCAjwqpP2BRBTEiwAfpiD-83Wm_dLVh_pbfKQ3XONyx4SH0AYVO260sNKxq-ICQe5rNwlUlmZAxoCzaAQAvD_BwE&pli=1

ca-app-pub-0121577198857509~3332380085
this is a unique ADMOB_APP_ID generate it on your own adsMob platform
to solve the iOS problem with ITM-90809 IOS Deprecated API Usage #418 i hope

$ ionic cordova plugin add cordova-plugin-admob-tomitank --save --variable ADMOB_APP_ID="ca-app-pub-0121577198857509~4462345846"

$ ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ca-app-pub-0121577198857509~3332380085" 

$ npm install @ionic-native/admob-free

2) 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.

- Add the statement: "import { AdMobFree } from '@ionic-native/admob-free/ngx';"

- Add the variable into the providers: "AdMobFree,"

Example for "src/app/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 {}

3) Create AdMob functions in src/app/pages/home/home.ts

- Add the statement: "import { AdMobFree, AdMobFreeBannerConfig,AdMobFreeInterstitialConfig,AdMobFreeRewardVideoConfig } from '@ionic-native/admob-free/ngx';"

- Add the constructor variable: "private admobFree: AdMobFree"

- Add functions showBannerAd, showInterstitialAds, showRewardVideoAds. the ids can be generated on AdsMob

Example for "src/app/pages/home/home.ts":

import { ElementRef, Component, ViewChild } from '@angular/core';

import { NavController } from '@ionic/angular';

import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

import { ActivatedRoute } from '@angular/router';

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

declare var app_toc: any;

@Component({

  selector: 'app-home',

  templateUrl: 'home.html',

  styleUrls: ['home.scss']

})

export class HomePage {

  currentPage: any;

  pages: any;

  url: SafeUrl;

  id: string;

  

  constructor(private admobFree: AdMobFree, private route: ActivatedRoute, public navCtrl: NavController, private sanitizer: DomSanitizer, public myElement: ElementRef) {

// app vars

this.pages = app_toc;

this.id = this.route.snapshot.paramMap.get('id');

// navigation vars

    this.currentPage = this.pages[+this.id];

this.url = sanitizer.bypassSecurityTrustResourceUrl(this.currentPage.url);

  }

  

    showBannerAd() {

let bannerConfig: AdMobFreeBannerConfig = {

// isTesting: false, // Remove in production

autoShow: true,

// id: "ca-app-pub-0121577198857509/7759224572" //ios

id: "ca-app-pub-0121577198857509/1253011655" // android

};

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-0121577198857509/6174680160" //ios

id: "ca-app-pub-0121577198857509/4257367374" // android

};

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-0121577198857509/8880734556" //ios

id: "ca-app-pub-0121577198857509/2313730318" //android

};

this.admobFree.rewardVideo.config(RewardVideoConfig);

this.admobFree.rewardVideo.prepare().then(() => {

}).catch(e => alert(e));

}

}

4) Modify src/app/pages/home/home.html

- Add button for function showBannerAd: "<ion-button id="banner" style="width:0px; height:0px" (click)="showBannerAd()"></ion-button>"

- Add button for function showRewardVideo: "<ion-button id="banner" style="width:0px; height:0px" (click)="showRewardVideo()"></ion-button>"

- Add button for function showInterstitialAds: "<ion-button id="banner" style="width:0px; height:0px" (click)="showInterstitialAds()"></ion-button>"

Example for "src/app/pages/home/home.html":

<ion-content scroll="true" overflow-scroll="true">

   <ion-button id="banner" style="width:0px; height:0px" (click)="showBannerAd()"></ion-button>

   <ion-button id="reward" style="width:0px; height:0px" (click)="showRewardVideo()"></ion-button>

   <ion-button id="interstitial" style="width:0px; height:0px" (click)="showInterstitialAds()"></ion-button>

      

   <iframe data-tap-disabled="true" [src]=url></iframe>

</ion-content>

5) Add the following custom functions in your EjsS simulation:

function showRewardVideo() {

const e = new Event("click");

try { // allow code to run in browser

const element = parent.document.getElementById("banner");

element.dispatchEvent(e);

} catch(e) {

const element = false; 

  }

}

function showBannerAd() {

const e = new Event("click");

try { // allow code to run in browser 

const element = parent.document.getElementById("reward");

element.dispatchEvent(e);

} catch(e) {

const element = false; 

  }

}

function showInterstitialAds() {

const e = new Event("click");

try { // allow code to run  in browser

const element = parent.document.getElementById("interstitial");

element.dispatchEvent(e);

} catch(e) {

const element = false; 

  }

}

6) Call the previous functions where you need in your EjsS simulation:

  showRewardVideo();

  showBannerAd();

  showInterstitialAds();

7) Build your app as usual for Android

8) for iOS app, need to add the following code to config.xml to prevent error https://stackoverflow.com/questions/55577811/xcode-error-when-added-admob-plugin-to-ionic-project where ca-app-pub-0121577198857509~5557104582  is from the Google AdsMob page about the iOS app. The bluetooth is also a requirement for the message to be more targeted instead if the generic one.

<platform name="ios">

        <edit-config file="*-Info.plist" mode="merge" target="NSBluetoothAlwaysUsageDescription">

            <string>App uses Bluetooth to find, connect and communicate with nearby devices. Please grant access. </string>

        </edit-config>

        <config-file parent="GADApplicationIdentifier" target="*-Info.plist">

            <string>ca-app-pub-0121577198857509~5557104582</string>

        </config-file>

        <config-file parent="GADIsAdManagerApp" target="*-Info.plist">

            <true />

        </config-file>