I am creating a Cordova Android app in which I am using Admob Plus plugin to show Admob ads.
Ads work without problems in homepage (index. html). But, they aren’t showing in route pages when using Onclick event:
<span id="show-interstitial-btn">InterstitialAd</span>
It has been a few weeks I am trying to solve the problem. I’ve tried every possible solution in this forum and F7 docs. And I am giving up on it.
My question is: How can I load the script and make it work through all pages?
(I hope that you give real examples of code samples if it is possible).
Admob code script wich is in a folder names .js/.:
let banner;
document.addEventListener( ‘deviceready’, async () => {
await admob.start();
banner = new admob.BannerAd( {
adUnitId: 'ca-app-pub-3940256099942544/6300978111',
} );
await banner.show();
}, false);
// on click
//‘use strict’
let lastAdTime = 0
const adm = {
initialize() {
document.addEventListener(
‘deviceready’,
this.onDeviceReady.bind(this),
false,
)
document.addEventListener(
'admob.ad.load',
(evt) => {
const { ad } = evt
console.log('admob.ad.load', ad.id, ad instanceof admob.AppOpenAd)
},
false,
)
document.addEventListener(
'admob.ad.dismiss',
(evt) => {
console.log('admob.ad.dismiss', evt.ad.id)
},
false,
)
document.addEventListener(
'admob.ad.show',
(evt) => {
console.log('admob.ad.show', Object.keys(evt))
},
false,
)
},
onDeviceReady() {
//this.receivedEvent(‘deviceready’)
if (cordova.platformId === 'ios') {
admob.requestTrackingAuthorization().then(console.log)
}
admob
.start()
.then(() => this.initAppOpenAd())
.then(() =>
admob.BannerAd.config({
backgroundColor: '#A7A7A7',
marginTop: 10,
marginBottom: 10,
}),
)
.catch(alert)
// this.initButton(‘show-banner-btn’, this.showBannerAd)
// this.initButton(‘show-offset-banner-btn’, this.showBannerAdOffset)
// this.initButton(‘show-top-banner-btn’, this.showBannerAdTop)
this.initButton(‘show-interstitial-btn’, this.showInterstitialAd)
//this.initButton(‘show-rewarded-btn’, this.showRewardedAd)
this.initButton(‘show-rewardedi-btn’, this.showRewardedInterstitialAd)
//this.initButton(‘show-native-btn’, this.showNativeAd)
},
initAppOpenAd() {
const ad = new admob.AppOpenAd({
adUnitId: ‘ca-app-pub-3940256099942544/5662855259’,
orientation: admob.AppOpenAd.Orientation.Portrait,
// orientation: admob.AppOpenAd.Orientation.LandscapeLeft,
})
document.addEventListener(
'resume',
() => {
const shouldSkip = Date.now() - lastAdTime <= 1000 * 5
console.log('adm resumed', lastAdTime, shouldSkip)
if (shouldSkip) return;
ad.isLoaded().then((loaded) => (loaded ? ad.show() : ad.load()))
},
false,
)
},
showInterstitialAd() {
const interstitial = new admob.InterstitialAd({
adUnitId: ‘ca-app-pub-3940256099942544/1033173712’,
})
interstitial.on(‘dismiss’, () => {
console.log(“interstitial dismissed”)
lastAdTime = Date.now()
})
return interstitial.load().then(() => interstitial.show()).then(() => {
setTimeout(() => {
interstitial.load().then(() => interstitial.show())
}, 5000)
})
},
showRewardedAd() {
const rewarded = new admob.RewardedAd({
adUnitId: ‘ca-app-pub-3940256099942544/5224354917’,
})
rewarded.on(‘dismiss’, () => {
lastAdTime = Date.now()
})
return rewarded.load().then(() => rewarded.show())
},
showRewardedInterstitialAd() {
const rewardedInterstitial = new admob.RewardedInterstitialAd({
adUnitId: ‘ca-app-pub-3940256099942544/6978759866’,
})
rewardedInterstitial.on(‘dismiss’, () => {
lastAdTime = Date.now()
})
return rewardedInterstitial.load().then(() => rewardedInterstitial.show())
},
receivedEvent(id) {
const parentElement = document.getElementById(id)
const listeningElement = parentElement.querySelector(’.listening’)
const receivedElement = parentElement.querySelector(’.received’)
listeningElement.setAttribute('style', 'display:none;')
receivedElement.setAttribute('style', 'display:block;')
console.log(`Received Event: ${id}`)
},
initButton(id, displayAd) {
/**
* @type {HTMLButtonElement}
*/
const btn = document.getElementById(id)
btn.addEventListener(‘click’, function () {
btn.disabled = true
displayAd()
.catch(alert)
.then(function () {
btn.disabled = false
})
})
},
}
adm.initialize()
Another strange thing is that another code I use to play audio files works fine on all pages. And I don’t know why.
Here is the code:
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
var my_media = new playAudio();
}
// Audio player
//
var my_media = null;
var mediaTimer = null;
// Play audio
//
my_media = {}; // init the play object
function playAudio(src, id) {
if (!my_media[id]){ // check if media already created
my_media[id] = new Media(src, onSuccess, onError);
}
my_media[id].play();
function onSuccess() {
console.log(“playAudio():Audio Success”);
my_media[id].release();
}
}
/*
function playAudioSuccess() {
// stopAudio(my_media);
if (my_media_success != null) {
my_media_success.release();
}
*/
//playAudio(‘file:///android_asset/www/media/1.mp3’);
// Pause audio
//
function pauseAudio() {
if (my_media) {
my_media.pause();
}
}
// Stop audio
//
function stopAudio() {
if (my_media) {
my_media.stop();
}
clearInterval(mediaTimer);
mediaTimer = null;
}
// onSuccess Callback
//
function onSuccess() {
console.log("playAudio():Audio Success");
}
// onError Callback
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// Set audio position
//
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position;
}