Add mob is not showing adds ionic 4 application

Question

I want to test add mob ionic 4 application. trying this code and is not showing anything when run on android device.

Trying to test show banner Ads in my app

Installed these plugin and npm module. ionic cordova plugin add cordova-plugin-admob-free npm install @ionic-native/admob-free

This is my versions ionic -v 5.2.3 node -v v10.16.0 npm -v 6.9.0

Calling show showAdmobBannerAds() function inside constructor.

constructor(private platform: Platform,private admobFree: AdMobFree) {
    this.platform.ready().then(() => { 
       this.showAdmobBannerAds()
    });
}

this is my add mob configuration and function.

showAdmobBannerAds(){
    const bannerConfig: AdMobFreeBannerConfig = {
    id: "ca-app-pub-XXXXXX",
    isTesting: true,
    autoShow: true
    };
    this.admobFree.banner.config(bannerConfig);
    this.admobFree.banner.prepare().then(() => {
        console.log('inside add show');
    })
    .catch(e => console.log(e));    
}

Expected to show banner add.

Fearcoder Fearcoder · Accepted Answer · 2019-08-12T07:16:59

I have a solution to make this dynamic:

run the following command:

ionic g service services/admob

Put the following code in the service you generated:

import { Injectable } from '@angular/core';
import {AdMobFree, AdMobFreeBannerConfig} from '@ionic-native/admob-free/ngx';
import { Platform } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class AdmobService {

  constructor(private admobFree: AdMobFree, public platform: Platform) { }

  BannerAd(admobid: string) {
    this.platform
      .ready()
      .then(() => {
        const bannerConfig: AdMobFreeBannerConfig = {
          id: admobid,
          isTesting: true,
          autoShow: false
        };
        this.admobFree.banner.config(bannerConfig);
        this.admobFree.banner
          .prepare()
          .then(() => {
            this.admobFree.banner.show();
          })
          .catch(e => console.log(e));
      })
      .catch(e => console.log(e));
  }
}

Inject the service in the page you want like this:

 constructor(private admob: AdmobService) { }

And call the method you have in the service like this:

id = "YOUR ID";

 ngOnInit() {
    this.admob.BannerAd(this.id);
  }

You now have a service that's reusable.

Hope this helps for you!

Add mob is not showing adds ionic 4 application

1 Answers