Cordova便利ですよね．最近アプリ公開したのですが，cordovaで作ってみました．

今回の記事はそんなCordovaを使ってアプリを作った際にAdMobで広告を載せたいなと思った時に色々とハマったのでそれを書きます．

ネット上にもかなり情報は豊富なのですが，Monacaの記事だったり，Vue.js使ってる記事が少なかったので，誰かの助けになれば幸いです．

導入の仕方

cordova-plugin-admob-freeを使いましたが，これの導入としては，一旦プロジェクトフォルダで

npm run cordova-build-android

をした後にできた，./src-cordova内で

cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="<YOUR_ANDROID_ADMOB_APP_ID_AS_FOUND_IN_ADMOB>"

することで導入することができます．

YOUR_ANDROID…のところにはAdMobのAppIDを入れてください．

どこに書いたらいいのか

どこにAdMobのソースを書いたらいいのかということですが，これは普通にmain.jsに書いたらいいみたいです．

ただ，そのまま書いてもうまく動かないので，色々調べた結果．．

https://stackoverflow.com/questions/56973308/how-to-put-admob-in-a-vuejs-app-with-cordova

ここにある通りにvueの読み込みごとdevicereadyとしてdocument.addEventListenerに登録する形で書くことでうまく動きました．

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

document.addEventListener(
  'deviceready',
  function() {
    new Vue({
      vuetify,
      render: h => h(App)
    }).$mount('#app')

    var admobid = {
      banner: 'ca-app-pub------'
    }
    if (/(android)/i.test(navigator.userAgent)) {
      // Android
      admobid = {
        banner: 'ca-app-pub------'
      }
    } else if (/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
      // ios
      admobid = {
        banner: 'ca-app-pub------'
      }
    }
    admob.banner.config({
      id: admobid.banner,
      isTesting: false, 
      autoShow: true
    })
    admob.banner.prepare()
  },
  false
)

例としてはこんな感じです．

一応，これで広告が動作していることは確認できたので，参考にどうぞ．