CordovaのAdMobプラグインとして cordova-plugin-admobproプラグイン、cordova-plugin-admob-freeプラグインと利用してきましたが、AdMob Freeのリポジトリがアーカイブされメンテ終了となったため、AdMob Freeの後継となるadmob-plus-cordovaプラグインを使ってみました。以下にMonacaクラウドIDEでの実装手順を記します。
Memo
アーカイブされましたがAdMob Freeも現在の環境で動作することを確認しました。以前に書きましたAdMob Freeの記事の内容に加えて、cordova-plugin-androidxプラグインとcordova-plugin-androidx-adapterプラグインの２つをインポートする必要があります。
環境
- 開発環境：MonacaクラウドIDE
- Cordova：11.0.0
- ビルド環境：Cordova Android 10.1.2
- ターゲットSDKバージョン：31
- 対象OS：Android
- 利用するプライグイン：
- admob-plus-cordova：1.27.0 (2022-03-03)
実装手順
１．AdMob Plusプラグインをインポート
Cordovaプラグインの設定画面からパッケージ名を入力してAdMob Plusプラグインをインポートします。
２．インストールパラメータ設定
インポートしたadmob-plus-cordovaプラグインの設定ボタンを押してインストールパラメータの入力画面を表示します。
AdMobアプリIDとGoogle Mobile Ads SDKのバージョンを設定します。
インストールパラメータ :
APP_ID_ANDROID=ca-app-pub-3940256099942544~3347511713
PLAY_SERVICES_VERSION=21.0.0
Memo
- AdMobアプリIDの名前はAdMob FreeではADMOB_APP_IDでしたがAdMob PlusではAPP_ID_ANDROIDに変更されています。
- 上記の説明で使用しているAPP_ID_ANDROIDの値はサンプルのアプリIDの値です。実際はAdMobで登録した値を入力します。
- PLAY_SERVICES_VERSIONの記述がない場合はデフォルトの20.4.0が設定されます。このバージョンのGoogle Mobile Ads SDKにはAndroid S（APIレベル31）でアプリがクラッシュするバグがありandroidx.work:work-runtime:2.7.0 に対する明示的な依存関係を指定する必要があります（Mobile Ads SDK（Android）リリースノートのバージョン20.4.0の項参照）。
実際にPLAY_SERVICES_VERSIONを記述せずにアプリをビルドし実行してみると「アプリ名」が繰り返し停止していますと表示されアプリが立ち上がりませんでした。
- APP_ID_ANDROIDを設定していなかったり不正な値を設定した場合も同様にアプリが立ち上がらない状態になります。
- APIレベル30、Cordova Android 10.1.1の環境ではPLAY_SERVICES_VERSIONを記述しなくても問題なく動作します。ただしGoogle PlayのターゲットAPIレベル要件の更新により今後APIレベル31への対応が必要になります。
上記の設定を行うとpackage.jsonに以下のように反映されます。
３．コーディング
AdMob Plusの公式ドキュメントに従いコーディングを行います。一例として以下に自作アプリで実際に使用しているソースコードの一部を記載します。showAdMob関数が呼ばれるたびにインタースティシャル広告を表示します。
var gAdMob = 0;
// 広告の表示
async function showAdMob() {
if (gAdMob) {
await gAdMob.show()
}
}
// AdMobの初期化処理（一回だけ実行）
async function init_ad() {
if (window.admob) {
// AdMob SDKの初期化
await admob.start();
// インタースティシャル広告の生成
gAdMob = new admob.InterstitialAd({
adUnitId: 'ca-app-pub-3940256099942544/1033173712' // test id
});
// 広告の読み込み
await gAdMob.load();
// 広告を閉じたときに発生するイベントのリスナーを登録
document.addEventListener('admob.ad.dismiss', async () => {
console().log("admob is dismiss. reload");
// show()関数で再表示させるための読み込み
await gAdMob.load();
});
} else {
console.log("admob is undefined");
}
}