AdMobを載せたアプリをCordovaでandroidビルドする際につまづいたTips(Vue.js)
2019年12月17日

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
)
例としてはこんな感じです.
一応,これで広告が動作していることは確認できたので,参考にどうぞ.