Как поместить Admob в приложение Vuejs с Cordova?

Question

Я пытаюсь использовать плагин Admob для cordova (https://www.npmjs.com/package/cordova-admob) в проекте Cordova / Vuejs. Я создал проект Cordova, а затем поместил проект build vue (папка / dist) в папку / wwwКордова. Но я понятия не имею, где я должен поместить код для плагина admob для работы.

Я пытался поместить следующий код в мой App.vue, но он не работает

    function onDeviceReady() {
      document.removeEventListener('deviceready', onDeviceReady, false);

      // Set AdMobAds options:
      admob.setOptions({
        publisherId:           "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",  // Required
        interstitialAdId:      "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",  // Optional
        autoShowBanner:        true,                                      // Optional
        autoShowRInterstitial: false,                                     // Optional
        autoShowRewarded:      false,                                     // Optional
        tappxIdiOS:            "/XXXXXXXXX/Pub-XXXX-iOS-IIII",            // Optional
        tappxIdAndroid:        "/XXXXXXXXX/Pub-XXXX-Android-AAAA",        // Optional
        tappxShare:            0.5                                        // Optional
      });

      // Start showing banners (atomatic when autoShowBanner is set to true)
      admob.createBannerView();

      // Request interstitial ad (will present automatically when autoShowInterstitial is set to true)
      admob.requestInterstitialAd();

      // Request rewarded ad (will present automatically when autoShowRewarded is set to true)
      admob.requestRewardedAd();
    }

    document.addEventListener("deviceready", onDeviceReady, false);

Answer 1

Событие «deviceready» должно обернуть ваше приложение vuejs в корневой файл js, а не в компонент.Пример из моего проекта:

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';

import Main from './components/Main.vue';
import StoreComponents from './components/StoreComponents.vue';
import StoreOffers from './components/StoreOffers.vue';

import { pluralize } from './helpers.js';

document.addEventListener('deviceready', function()
{
    Vue.use(VueRouter);

    Vue.filter('pluralize', function (num, words) {
        return pluralize(num, words);
    });

    Vue.prototype.$http = axios;

    // this is how I implemented cordova-plugin-keyboard into Vue
    // but the js logic located inside Vue component
    Vue.prototype.$keyboard = Keyboard;

    // play around with Admob js code here

    const router = new VueRouter({
        routes: [
            {
                path: '/',
                component: Main
            },
            {
                path: '/store',
                component: StoreComponents
            },
            {
                path: '/store/offers',
                component: StoreOffers
            }
        ]
    });

    const app = new Vue({
        el: '#app',
        router: router
    });
}, false);

Вот моя структура проекта Cordova:

/hooks
/platforms
/plugins
/res
/www
  /build
  /dist
  index.html
config.xml
package.json
webpack.config.js

Также вы должны включить плагин admob в cordova config.xml.Это выглядит так:

<plugin name="cordova-plugin-keyboard" spec="^1.2.0" />