AdMob is undefined

kiril4913

I try to use the [Cordova AdMob Plugin] (https://www.npmjs.com/package/cordova-plugin-admob-free), I follow the docs but I got the alert( ‘admob plugin not ready’ ).

While debugging I’ve notice that window.plugins and window.plugins.AdMob are undefined. But in official instructions and sources the AdMob plugin uses these variables.

So how can I access to cordova (Quasar’s) plugins?
cordova is defined object but it doesn’t have the plugins object.
I also tried to use the navigator it even has the plugins object but it has 0 length array.
use just AdMob also fails…

May be someone can suggest another good plugin for AdMobiles?

Here is my quasar info:
Operating System Windows_NT(10.0.17134) - win32/x64
NodeJs 8.11.3

Global packages
NPM 6.1.0
yarn Not installed
quasar-cli 0.16.4
vue-cli 2.9.6
cordova 8.0.0

Important local packages
quasar-cli 0.16.4 (Quasar Framework CLI)
quasar-framework 0.16.0 (Build responsive websites, PWAs, hybrid mobile apps and Electron apps, all simultaneously using same codebase)
quasar-extras 2.0.2 (Quasar Framework fonts, icons and i18n.)
vue 2.5.16 (Reactive, component-oriented view layer for modern web interfaces.)
vue-router 3.0.1 (Official router for Vue.js 2)
vuex 3.0.1 (state management for Vue.js)
electron Not installed
electron-packager Not installed
electron-builder Not installed
@babel/core 7.0.0-beta.49 (Babel compiler core.)
webpack 4.9.1 (Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loade
rs to preprocess files, i.e. json, jsx, es7, css, less, … and your custom stuff.)
webpack-dev-server 3.1.4 (Serves a webpack app. Updates the browser on changes.)
workbox-webpack-plugin 3.2.0 (A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.)

genyded

Where/how are you adding AdMob into Quasar/Vue? Should be a Quasar plugin and if so can you show that code?

kiril4913

@genyded
1. I’ve created the separate file adMob.js and put there and export funcs from the docs:

AdMob.js
*export function initAd(){
if ( window.plugins && window.plugins.AdMob ) {
var ad_units = {
ios : {
banner: ‘ca-app-pub-5355876415777246~3649456198’, //PUT ADMOB ADCODE HERE
interstitial: ‘ca-app-pub-5355876415777246~3649456198’ //PUT ADMOB ADCODE HERE
},
android : {
banner: ‘ca-app-pub-5355876415777246~3649456198’, //PUT ADMOB ADCODE HERE
interstitial: ‘ca-app-pub-5355876415777246~3649456198’ //PUT ADMOB ADCODE HERE
}
};
var admobid = ( /(android)/i.test(navigator.userAgent) ) ? ad_units.android : ad_units.ios;

window.plugins.AdMob.setOptions( {
  publisherId: admobid.banner,
  interstitialAdId: admobid.interstitial,
  adSize: window.plugins.AdMob.AD_SIZE.SMART_BANNER,	//use SMART_BANNER, BANNER, LARGE_BANNER, IAB_MRECT, IAB_BANNER, IAB_LEADERBOARD
  bannerAtTop: false, // set to true, to put banner at top
  overlap: true, // banner will overlap webview
  offsetTopBar: false, // set to true to avoid ios7 status bar overlap
  isTesting: true, // receiving test ad
  autoShow: false // auto show interstitial ad when loaded
});

registerAdEvents();
window.plugins.AdMob.createInterstitialView();	//get the interstitials ready to be shown
window.plugins.AdMob.requestInterstitialAd();

} else {
alert( ‘admob plugin not ready’ );
}
}
//functions to allow you to know when ads are shown, etc.
export function registerAdEvents() {
document.addEventListener(‘onReceiveAd’, function(){});
document.addEventListener(‘onFailedToReceiveAd’, function(data){});
document.addEventListener(‘onPresentAd’, function(){});
document.addEventListener(‘onDismissAd’, function(){ });
document.addEventListener(‘onLeaveToAd’, function(){ });
document.addEventListener(‘onReceiveInterstitialAd’, function(){ });
document.addEventListener(‘onPresentInterstitialAd’, function(){ });
document.addEventListener(‘onDismissInterstitialAd’, function(){
window.plugins.AdMob.createInterstitialView(); //REMOVE THESE 2 LINES IF USING AUTOSHOW
window.plugins.AdMob.requestInterstitialAd(); //get the next one ready only after the current one is closed
});
}

//display the banner
export function showBannerFunc(){
window.plugins.AdMob.createBannerView();
}
//display the interstitial
export function showInterstitialFunc(){
window.plugins.AdMob.showInterstitialAd();
}*

default.vue
2. Call the initAd(), showBannerFunc(), showInterstitialFunc() from my default.vue component from “layout” package in “deviceready” listener (before export default):

*document.addEventListener(‘deviceready’, ()=>{
// alert("window.plugins = " + window.plugins);
// alert("window.plugins.AdMob = " + window.plugins.AdMob);
alert("cordova = " + cordova);
alert("cordova.AdMob = " + cordova.AdMob);
initAd();
showBannerFunc();
showInterstitialFunc();
}, false);

export default {
name: ‘LayoutDefault’,
components: {
…
}
}*

I get fired alerts and white screen because of the error of undefined.

genyded

I am not familiar with that library, but I do not see an import or require of AdMob anywhere, so don’t see how adding it to a window/global variable will work. Typically it would look something like:

import AdMob from 'admob'

AdMob.setOptions ({
  publisherId: admobid.banner,
  interstitialAdId: admobid.interstitial,
  adSize: AdMob.AD_SIZE.SMART_BANNER,	  
  bannerAtTop: false, // set to true, to put banner at top
  overlap: true, // banner will overlap webview
  offsetTopBar: false, // set to true to avoid ios7 status bar overlap
  isTesting: true, // receiving test ad
  autoShow: false // auto show interstitial ad when loaded
})

AdMob.registerAdEvents(); // I AM GUESSING THIS IS AN AdMob method since your code did not show where is came from
AdMob.createInterstitialView();	//get the interstitials ready to be shown
AdMob.requestInterstitialAd();

window.plugins.AdMob = AdMob

This really does not seem like a Quasar issue and you may want to try to find a basic course or blog on JS module imports and exports. Those are prerequisites to using Quasar, Vue, or any JS based framework.

kiril4913

@genyded thank you very much for your replies. You are right the issue was about wrong AdMob installation. I’ve added the plugin not by “coroda plugin add …” but “npm install …”. I’ve found out this when use the “cordova plugin list” command.

genyded

Glad to help!

No More Posting New Topics!

AdMob is undefined