AdMob is undefined



  • 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.)



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



  • @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.



  • 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.



  • @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.



  • Glad to help!