Zenn
💰

monacaアプリにadmobを実装する（リワード広告）

2021/11/17に公開
iOS
AdMob
Cordova
Monaca
tech

Monacaアプリにadmobを実装する手順です。monaca関連は日本語の情報が少ないのでまとめてみました。とりあえずこの記事の通りにやれば問題なく実装できるはずです。

なお、今回はadmobの「リワード広告」の実装を例に解説します。iOSアプリを想定しています

事前準備

  • admobへのアプリ登録をする。
  • admobでリワード広告の広告ユニットを作成する
  • monacaをProプランにアップデートする
  • ビルド環境を最新のものに設定する

これらの事前準備は済んでいるものとします。

プラグインの設定

admobを利用するためのプラグインをインポートします。

cordova-admob-sdkをインポート
以下のリンクからZIPファイルをダウンロードして「プラグインのインポート」👉「圧縮されたパッケージをアップロード」

https://apps.jp.net/files/admob_sdk.zip

次に、cordova-plugin-admob-freeをインポートします。

「プラグインのインポート」👉「URLもしくはパッケージ名を指定」から、以下を指定します。

cordova-plugin-admob-free@0.27.0

プラグインがインポートできたら、インストールパラメータを設定します。

cordova-plugin-admob-freeの「設定」に以下を追加します。

ADMOB_APP_ID=ca-app-pub-??????????~????????

ADMOB_APP_IDにはadmobのアプリIDを入力します。

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

config.xml
    <config-file target="*-Info.plist" parent="GADApplicationIdentifier">
      <string>ca-app-pub-XXXX~XXXX</string> 
    </config-file>
    <config-file parent="GADIsAdManagerApp" platform="ios" target="*-Info.plist">
        <true />
    </config-file>
　　　　　　　　<preference name="WKWebViewOnly" value="true"/>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>
    <feature name="CDVWKWebViewEngine">
      <param name="ios-package" value="CDVWKWebViewEngine"/>
    </feature>
　　　　　　　　<edit-config file="*-Info.plist" mode="merge" target="NSBluetoothAlwaysUsageDescription">
      <string>Some advertisements use bluetooth.</string>
    </edit-config>

<string></string>にadmobのアプリIDを入れます。

これでプラグインの設定が完了しました。

AppTrackingTransparencyの実装

iOS14.5以降、広告を出す場合はAppTrackingTransparencyを設定しないとリジェクトされるようになりました。AppTrackingTransparencyとは、アプリ初回起動時に出てくる「他社によるアクティビティの追跡を許可しますか？」みたいなやつです。

config.xmlに以下を追加します。

config.xml
<key>SKAdNetworkItems</key>
  <array>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>cstr6suwn9.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>4fzdc2evr5.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>2fnua5tdw4.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>ydx93a7ass.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>5a6flpkh64.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>p78axxw29g.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>v72qych5uu.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>c6k4g5qg8m.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>s39g8k73mm.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>3qy4746246.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>3sh42y64q3.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>f38h382jlk.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>hs6bdukanm.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>prcb7njmu6.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>v4nxqhlyqp.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>wzmmz9fp6w.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>yclnxrl5pm.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>t38b2kh725.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>7ug5zh24hu.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>9rd848q2bz.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>n6fk4nfna4.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>kbd757ywx3.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>9t245vhmpl.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>4468km3ulz.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>2u9pt9hc89.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>8s468mfl3y.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>av6w8kgt66.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>klf5c3l5u5.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>ppxm28t8ap.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>424m5254lk.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>uw77j35x4d.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>578prtvx9j.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>4dzt52r2t5.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>e5fvkxwrpn.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>8c4e2ghe7u.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>zq492l623r.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>3qcr597p9d.skadnetwork</string>
    </dict>
  </array>

https://github.com/chemerisuk/cordova-plugin-idfa

次に、上記リンクからIDFAプラグインをインポートします。

config.xmlの<platform name="ios"></platform>に以下を追記します。
<string></string>は自由に変更できますが、日本でリリースするアプリなら日本語にしないとリジェクトされます。

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

そして、アプリ起動時に表示させたいので、トップ画面のJSファイルに以下を追加します。

main.js
const idfaPlugin = cordova.plugins.idfa;

idfaPlugin.getInfo()
    .then(info => {
        if (!info.trackingLimited) {
            return info.idfa || info.aaid;
        } else if (info.trackingPermission === idfaPlugin.TRACKING_PERMISSION_NOT_DETERMINED) {
            return idfaPlugin.requestPermission().then(result => {
                if (result === idfaPlugin.TRACKING_PERMISSION_AUTHORIZED) {
                    return idfaPlugin.getInfo().then(info => {
                        return info.idfa || info.aaid;
                    });
                }
            });
        }
    })
    .then(idfaOrAaid => {
        if (idfaOrAaid) {
            console.log(idfaOrAaid);
        }
    });

これで全ての準備は整ったので、あとは広告を実装するだけです。

リワード広告を実装する

メンテナンスしやすいように広告用のスクリプトはmain.jsとは別のファイルにまとめておいた方がいいです。

reward.jsを用意し、以下を記述します。

reward.js
// admob js
// deviceready時に初期化処理
document.addEventListener('deviceready', function() {
 if (typeof admob === 'undefined') {
   return;
 }
// リワード広告を初期化
 admob.rewardvideo.config({
   // 広告ID
   id: 'ca-app-pub-???????????/???????????',  
   // テスト時はtrueにする
   isTesting: true,
 });

});

// 広告を表示する
function showReward()
{
 if (typeof admob === 'undefined') {
   alert("時間を開けて再度お試しください");
   return;
 }
  admob.rewardvideo.prepare();
 admob.rewardvideo.show();
}

document.addEventListener('admob.rewardvideo.events.CLOSE', function(){
 // 広告が閉じたタイミングでリワードを出す



});

後は任意のタイミングでshowReward()を呼び出すだけです。広告の表示まで２秒くらいかかるので、ローディングアニメーションなんかを噛ませるといいでしょう。

後はカスタムビルドデバッガーで動作を確認して、実装完了です。リリースする際は忘れずにisTestingをfalseにしてください。

Discussion