nativescript-admob plugin error

Question

I added the nativescript-admob plugin to my NativeScript Angular project and have the below code in a service that I inject into a component:

import { Injectable } from "@angular/core";
import * as Admob from "nativescript-admob";

@Injectable()
export class AdmobService {

  private androidBannerId = "ca-app-pub-3940256099942544/6300978111";
  private iosBannerId = "";

  public createBanner() {
    Admob.createBanner({
      testing: false,
      size: Admob.AD_SIZE.SMART_BANNER,
      // iosBannerId: this.iosBannerId,
      androidBannerId: this.androidBannerId,
      // iosTestDeviceIds: ["yourTestDeviceUDIDs"],
      margins: {
        bottom: 500
      }
    }).then(function() {
      console.log("admob createBanner done test");
    }, function(error) {
      console.log("admob createBanner error: " + error);
    });
  }

  public hideBanner() {
    Admob.hideBanner().then(function() {
      console.log("admob hideBanner done");
    }, function(error) {
      console.log("admob hideBanner error: " + error);
    });
  }
}

And here is how I use it in a component:

import { Component } from "@angular/core";
import { Page } from "tns-core-modules/ui/page";
import { AdmobService } from "~/service/admob.service";

@Component({
  selector: "Start",
  moduleId: module.id,
  templateUrl: "./start.component.html",
  styleUrls: ["./start.component.scss"]
})
export class StartComponent {

  constructor(private page: Page, private admob: AdmobService) {
    this.page.on("loaded", () => {
      this.admob.createBanner();
    });
  }

}

When I initiate the AdMob banner after the page has loaded no ad banner shows up like it should (I'm using the android test banner ID provided by AdMob) and I get the below output in the console, which looks like an error:

chromium: [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0
07-21 14:17:56.082 22107 22107 I cr_BrowserStartup: Initializing chromium process, singleProcess=false
07-21 14:17:56.174 22107 22107 I zygote  :   at void com.android.webview.chromium.WebViewChromium.init(java.util.Map, boolean) (PG:53)
07-21 14:17:56.175 22107 22107 I zygote  :   at void com.android.webview.chromium.WebViewChromium.init(java.util.Map, boolean) (PG:53)
07-21 14:17:56.176 22107 22107 I zygote  :   at void com.android.webview.chromium.WebViewChromium.init(java.util.Map, boolean) (PG:53)
07-21 14:17:56.176 22107 22107 I zygote  :   at void com.android.webview.chromium.WebViewChromium.init(java.util.Map, boolean) (PG:53)
07-21 14:17:56.177 22107 22107 I zygote  :   at void com.android.webview.chromium.WebViewChromium.init(java.util.Map, boolean) (PG:53)
07-21 14:17:56.178 22107 22107 I zygote  :   at void com.android.webview.chromium.WebViewChromium.init(java.util.Map, boolean) (PG:53)

What do I need to do to get an AdMob banner working?

Answer 1

This actually ended up being a weird bug with the admob plugin. So when you navigate to a page in your app for the first time the loaded event is fired but the ad never shows up. When you navigate to it a second time the ad does show up. To fix this I added the banner initialization function to the navigatedTo event as well.

this.page.on("navigatedTo", () => {
  this.admob.createBanner();
});

This fixed the problem so that the banner showed up the first time and every time you navigate to the page after that.