💰

CordovaアプリにAdmobを導入する(インタースティシャル広告編)

2022/07/10に公開

個人開発

Cordovaハイブリッドアプリにadmobのインタースティシャル広告を実装する手順について。
開発環境はMonacaです。
admobバナー広告、リワード広告の実装手順はこちら👇

👨‍🔧事前準備

🚀Admobプログラムに登録

https://admob.google.com/intl/ja/home/

🚀MonacaをProプランにアップグレード

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

🔌プラグインをインポート

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

以下のプラグインをZipでダウンロードし、「Cordovaプラグインの管理」👉「プラグインのインポート」

💰インタースティシャル広告を実装

管理しやすいよう、admob.jsなど適当なファイルを作成します。

admob.js

// プラットフォームごとに広告IDを用意します
  var admobid = {};
  if( /(android)/i.test(navigator.userAgent) ) { // for android & amazon-fireos
    admobid = {
      interstitial: 'ca-app-pub-xxx/yyy'
    };
  } else { // for ios
    admobid = {
      interstitial: 'ca-app-pub-xxx/kkk'
    };
  }
  
  document.addEventListener('DOMContentLoaded', function() {//広告準備
    if(AdMob) AdMob.prepareInterstitial( {adId:admobid.interstitial, autoShow:false} );
});
 
function showad(){ //showad()を任意のタイミングで呼び出します
    if(AdMob) AdMob.showInterstitial();
}

任意のタイミングでshowad()を実行すると広告が表示されます。再度表示するためにはリロードする必要があります。

Android,iOSのテスト広告はこちら👇

🔗Admob IDを紐付け

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

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

package.json

   "cordova": {
      "plugins": {
          "cordova-plugin-admobpro": {
              "ADMOB_ANDROID_APP_ID": "AndroidアプリのID",
              "ADMOB_IOS_APP_ID": "iOSアプリのID"
          }
      }
  },

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

admob.js

 var admobid = {};
 if( /(android)/i.test(navigator.userAgent) ) { // for android & amazon-fireos
   admobid = {
     interstitial: 'ca-app-pub-xxx/yyy'//本番
   };
 } else { // for ios
   admobid = {
     interstitial: 'ca-app-pub-xxx/kkk'//本番
   };
 }

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

🔐AppTrackingTransparencyの実装(iOS)

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

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

config.xml

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

🙋‍♂️こんなアプリ作ってます

こんなアプリ作ってますよという宣伝です。
どこに収益ポイントを設定するか考えてる時が一番楽しいです