Admob Plus on Ionic Cordova Project

cordova
1

Hi guys l have an issue with AdMob Plus plugin implementing it on Ionic Cordova project. I have setup the Admob Plus plugin using the Cordova setup and has followed the documentation. I am using the test App ID for google : “APP_ID_ANDROID”: “ca-app-pub-3940256099942544~3347511713”,

package.json file

      "cordova-admob-plus": {

        "APP_ID_ANDROID": "ca-app-pub-3940256099942544~3347511713",

        "PLAY_SERVICES_VERSION": "19.5.0"

      }

Ads Test IDs from Google for quick test

Banner: adUnitId: ‘ca-app-pub-3940256099942544/9214589741’,

InterstitialAds: ‘ca-app-pub-3940256099942544/1033173712’,

Below is my files and functions

import { AdMob,BannerAd,InterstitialAd,AdMobConfig,} from ‘admob-plus-cordova’;
import { HttpClient } from ‘@angular/common/http’;
import { Component, OnInit } from ‘@angular/core’;
import { Router } from ‘@angular/router’;
import { AlertController, Platform, ToastController } from ‘@ionic/angular’;

import {
AdMob,
BannerAd,
InterstitialAd,
AdMobConfig,
} from ‘admob-plus-cordova’;

@Component({
selector: ‘app-tutor-dashboard’,
templateUrl: ‘./tutor-dashboard.page.html’,
styleUrls: [‘./tutor-dashboard.page.scss’],
})
export class TutorDashboardPage implements OnInit {
counter: any;
roleID: any;
url = environment.url;
signalID = environment.oneSignalID;
constructor(
private storage: Storage,
private http: HttpClient,
private router: Router,
private platform: Platform,
) {
console.log(this.url);
}

ngOnInit() {}

ionViewWillEnter() {}

async bannerAdMob() {
document.addEventListener(‘deviceready’, async () => {
//alert(‘Device ready, starting AdMob’);
const banner = new BannerAd({
adUnitId: ‘ca-app-pub-3940256099942544/9214589741’,
});
alert(‘AdMob initialized’ + JSON.stringify(banner));
await banner.show();
});
}

async interstitialAdMob() {
document.addEventListener(‘deviceready’, async () => {
//alert(‘Device ready, starting AdMob’);
const interstitial = new InterstitialAd({
adUnitId: ‘ca-app-pub-3940256099942544/1033173712’,
});
alert(‘AdMob initialized’ + JSON.stringify(interstitial));
await interstitial.load();
await interstitial.show();
});
}
}

The view of the page

Banner Ad
Interstitial Ad

I keep on getting the output below when l log

alert(‘AdMob initialized’ + JSON.stringify(banner));

{
“opts”: {“position”: “bottom”, “size”:5, “adUnitId”: “ca-app-pub-3940256099942544/9214589741”},
“id”: “ca-app-pub-3940256099942544/9214589741”, “_loaded”: false
}

Is there something l am doing wrong ? Please see my environment below. Your assistance will be much appreciated

Ionic:

Ionic CLI                     : 7.2.1 (C:\Users\bevin\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework               : @ionic/angular 8.3.0
@angular-devkit/build-angular : 18.2.4
@angular-devkit/schematics    : 18.2.4
@angular/cli                  : 18.2.4
@ionic/angular-toolkit        : 11.0.1

Cordova:

Cordova CLI       : 12.0.0 (cordova-lib@12.0.2)
Cordova Platforms : android 14.0.1
Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 11 other plugins)

Utility:

cordova-res : 0.15.4
native-run  : 2.0.1

System:

NodeJS : v22.12.0 (C:\Program Files\nodejs\node.exe)
npm    : 10.9.0
OS     : Windows 10