🎬

CordovaアプリにAdmobを導入する(リワード広告編)

2022/03/17に公開

JavaScript

Cordovaアプリにadmobリワードを実装する手順について。
開発環境はMonacaです。
admobバナーの実装手順はこちら

事前準備

Admobに登録

Admobに登録します。
https://admob.google.com/intl/ja/home/

Monacaのプランをアップグレード

サードパーティプラグインを使うためにはMonacaをProプランにアップグレードする必要があります。月2000円くらいかかりますが、アプリをリリースし終えたらまたFreeプランに戻せばOKです。

プラグインをインポート

Cordova Admob Proプラグインを導入します。

リワード広告を実装

完成形

リワード

let admobid = {};
// リリース前に本番IDに差し替えてください
if( /(android)/i.test(navigator.userAgent) ) {
  admobid = { // Android
    rewardvideo: 'ca-app-pub-3940256099942544/5224354917',
  };
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
  admobid = { // iOS
    rewardvideo: 'ca-app-pub-3940256099942544/5224354917',
  };
} else {
  admobid = { // Windows Phone
    banner: '',
    interstitial: '',
    rewardvideo: '',
  };
}
let adMobInitialize = function() {
    if(AdMob){
        AdMob.prepareRewardVideoAd({
            adId:admobid.rewardvideo,
            isTesting:true, // 本番前にfalseに変えてください
            autoShow: false
        });
    }
}
document.addEventListener("deviceready", adMobInitialize, false);

//任意のタイミングで以下を実行↓
    AdMob.showRewardVideoAd();

Admob IDを紐付け

Admobでアプリを登録します。リリース前でも登録できます。（アプリ公開後にAdmobにアプリのリンクを登録する必要があります。）

package.jsonにアプリIDを登録します。

package.json

   "cordova": {
      "plugins": {
          "cordova-plugin-admobpro": {
              "ADMOB_ANDROID_APP_ID": "",
              "ADMOB_IOS_APP_ID": "あなたのID"
          }
      }
  },

最後に、広告のテストIDコードを本番用のものに差し替えます。Admobで広告ユニットを作成し、

let admobid = { rewardvideo: 'ca-app-pub-xxxxxxxxx'};

にユニットIDを設定します。

AppTrackingTransparencyの実装

AppTrackingTransparencyは、こちらが特に何もしなくてもAdmobが勝手に出してくれます。
しかし、デフォルトのメッセージが英語なので日本でリリースするアプリなら日本語に直さないとリジェクトされます。

config.xmlの<platform name="ios"></platform>に以下を追記します。

config.xml

    <edit-config target="NSUserTrackingUsageDescription" file="*-Info.plist" mode="merge">
      <string>この識別子は、ユーザーにとって適切な広告を配信するために使用されます。</string>
    </edit-config>