はじめに
最近知ったのですが、以前記事にしたCordova AdMobプラグインcordova-admob-proにはちょっとした問題があるようです。プラグイン作成者は無料で利用する場合は2%のユーザートラフィックを共有させてもらうだけで大丈夫ですと公表しているのですが、ユーザーが調べたところ30%共有されていたケースがあったそうです。（ユーザーに入る広告費が30%減るということみたいです）
cordova-plugin-admobpro issues #354
そこでRatsonさんが完全無料のAdMobプラグインcordova-plugin-admob-freeを開発しました（開発へ至るまでの経緯はこちら）。
Ratsonさんはcordova-plugin-admob-freeプラグインの後継となるadmob-plusプラグインも開発中です。
環境
- 開発環境：Monaca、Windows10
- テストデバイス：Android 6.0.1
- テストプロジェクト：Onsen UI + Vue
- 利用するプラグイン：
- cordova-plugin-admob-free v0.27.0
- cordova-admob-sdk v0.24.1
参考にした情報
- monaca cordova-admob-freeがビルドエラーになる – teratail
- 【Monaca】cordova-plugin-admob-freeを使用してAdmob広告を表示する – ITK dev
実装手順
MonacaのOnsen UI + VueプロジェクトでAdMob Freeプラグインを利用します。本内容はteratailで解説されていますので詳細についてはそちらをご参照ください。
１．AdMob SDKプラグインをダウンロード
https://gitlab.com/ratson/cordova-admob-sdk からzipファイルをダウンロードします。
２．AdMob SDKプラグインをインポート
Cordovaプラグインの設定画面からさきほどダウンロードしたzipファイル（cordova-admob-sdk-master.zip）を選択してAdMob SDKプラグインをインポートします。
３．AdMob Freeプラグインをインポート
Cordovaプラグインの設定画面からパッケージ名を入力してAdMob Freeプラグインをインポートします。
４． ADMOB_APP_ID の設定
AdMob FreeプラグインのインストールパラメータにAdMobのアプリIDを設定します。
以上でプラグインの設定は完了です。
５．サンプルコード
AdMob Freeプラグインのexamplesを参考にしています。
App.Vue
<template>
<v-ons-page>
<v-ons-toolbar>
<div class="center">{{ title }}</div>
<div class="right">
<v-ons-toolbar-button>
<v-ons-icon icon="ion-navicon, material: md-menu"></v-ons-icon>
</v-ons-toolbar-button>
</div>
</v-ons-toolbar>
<div style="text-align: center; padding-top:10px">Hello World!</div>
<p style="text-align: center">
<v-ons-button @click="banner">Banner</v-ons-button>
<v-ons-button @click="interstitial">Interstitial</v-ons-button>
</p>
</v-ons-page>
</template>
<script>
export default{
data() {
return {
title: 'My app'
};
},
beforeCreate () {
this.$ons.ready(function() {
var admobid = {
banner: 'ca-app-pub-3940256099942544/6300978111',
interstitial: 'ca-app-pub-3940256099942544/1033173712'
}
// Banner
admob.banner.config({
id: admobid.banner,
isTesting: true,
autoShow: false,
})
admob.banner.prepare()
.then (() => {
console.log('banner prepare success!')
})
.catch (err => {
console.log('banner prepare error!', err)
})
// Interstitial
admob.interstitial.config({
id: admobid.interstitial,
isTesting: true,
autoShow: false,
})
admob.interstitial.prepare()
.then (() => {
console.log('interstitial prepare success!')
})
.catch (err => {
console.log('interstitial prepare error!', err)
})
}) // ons.ready
document.addEventListener('admob.banner.events.LOAD_FAIL', function(event) {
console.log("LOAD_FAIL banner", event)
})
document.addEventListener('admob.interstitial.events.LOAD_FAIL', function(event) {
console.log("LOAD_FAIL interstitial", event)
})
document.addEventListener('admob.interstitial.events.LOAD', function(event) {
console.log("LOAD", event)
})
document.addEventListener('admob.interstitial.events.CLOSE', function(event) {
console.log("CLOSE", event)
admob.interstitial.prepare()
})
},
methods: {
banner () {
admob.banner.show()
},
interstitial () {
admob.interstitial.show()
}
}
}
</script>
６．AdMob広告の表示確認
プロジェクトをデバッグビルドしAndroid端末にインストールして確認しました。
バナー広告
インタースティシャル広告
テスト広告について
Google AdMobのガイドには次のように記載されています。
アプリの開発やテストでは実際の広告を使用せず、必ずテスト広告を使ってください。実際の広告でテストすると、アカウントが停止される場合があります。
https://developers.google.com/admob/android/banner?hl=ja
GoogleはAdMobアカウントと関連付けられていないテスト用の広告ユニットを提供しています。以下のリンク先に記載しているサンプル広告ユニットIDを自由に利用することができます。
テスト広告 – Google AdMob > Mobile Ads SDK（Android）
| 広告フォーマット | サンプル広告ユニット ID |
|---|---|
| バナー | ca-app-pub-3940256099942544/6300978111 |
| インタースティシャル | ca-app-pub-3940256099942544/1033173712 |
| インタースティシャル動画 | ca-app-pub-3940256099942544/8691691433 |
| 動画リワード | ca-app-pub-3940256099942544/5224354917 |
| ネイティブ アドバンス | ca-app-pub-3940256099942544/2247696110 |
| ネイティブ アドバンス動画 | ca-app-pub-3940256099942544/1044960115 |
特記事項（2019/9/8追記）
当時の私のケースになりますが、アプリのリリース直前にisTestingをfalseにして最終確認を行ったところ、広告が表示されませんでした。原因が分からず不安だったのですが、いったんGoogle Play Consoleでベータ版としてリリースし動作確認したところ、広告が表示されました。製品版としてリリースしたアプリでも表示されました。本番用の広告を表示するためにはGoogle Playストアを介す必要があるのかもしれません。ご参考まで。
