🙋‍♀️

CordovaアプリにAdmobを導入する(バナー編)

2022/02/13に公開約5,100字

Cordovaアプリにadmobを実装する手順について。
今まではお手軽なnend広告に頼ってきましたが、Admobの方が単価が良いっぽいので思い切って導入してみました。
開発環境はMonacaです。

事前準備

Admobに登録

Admobに登録します。

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

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

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

プラグインをインポート

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

https://github.com/floatinghotpot/cordova-admob-pro

似たプラグインにAdmob Plusというものがありますが、Proの方が簡単なのでこっちを使います。

ZipファイルをダウンロードしてMonacaにインポートします。これで事前準備は完了です。

バナー広告を実装

完成形

app.js
var admobid = { banner: 'ca-app-pub-3940256099942544/2934735716'};//←テスト広告です
var screenWidth=window.innerWidth;
var screenHeight=window.innerHeight;
var adX=screenWidth / 2 - 160;
var adY=screenHeight - 125;
    var adMobInitialize = function() {
    if(AdMob){
        AdMob.createBanner({//
            adId: admobid.banner, 
	    isTesting: true,
            overlap: true,
            position: 10, // default position
            x: adX, // default X of banner
            y: adY, // default Y of banner
            autoShow: true,
            adSize: 'LARGE_BANNER'
        });
    }
}
document.addEventListener("deviceready", adMobInitialize, false);


こんな感じ

解説

var admobid = { banner: 'ca-app-pub-3940256099942544/2934735716'};

Admob IDを指定します。リリース前に自分のIDに差し替えてください。

Google Play StoreとApp Store両方にアプリを出す場合はプラットフォームごとに広告IDを変えます。

app.js
var admobid = {};
if( /(android)/i.test(navigator.userAgent) ) {
    admobid = { // for Android
        banner: 'ca-app-pub-3940256099942544/6300978111',
        interstitial: 'ca-app-pub-3940256099942544/1033173712',
        rewardvideo: 'ca-app-pub-3940256099942544/5224354917',
    };
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
    admobid = { // for iOS
        banner: 'ca-app-pub-3940256099942544/2934735716',
        interstitial: 'ca-app-pub-3940256099942544/4411468910',
        rewardvideo: 'ca-app-pub-3940256099942544/1712485313',
    };
} else {
    admobid = { // for Windows Phone
        banner: 'ca-app-pub-6869992474017983/8878394753',
        interstitial: 'ca-app-pub-6869992474017983/1355127956',
        rewardvideo: '',
    };
}

コード引用:https://ja.docs.monaca.io/sampleapp/samples/admob/


app.js
    var adMobInitialize = function() {
    if(AdMob){
        AdMob.createBanner({//
            adId: admobid.banner, 
            overlap: true,
	    isTesting: true,
            position: 10, // default position
            x: 50, // default X of banner
            y: 100, // default Y of banner
            autoShow: true,
            adSize: 'LARGE_BANNER'
        });
    }
}

AdMob.createBannerでバナーを作成し、オプションでサイズや広告の位置を指定します。

adId-->広告ID

overlap-->重ねるかどうか。falseだと広告のサイズ分ずれるので、基本はtrueでいいと思います。

isTesting-->本番環境かどうか。リリースする際にfalseにします。

position-->表示したい位置を指定する。x,yで自由に指定したい場合は10

  NO_CHANGE: 0,
 TOP_LEFT: 1,
 TOP_CENTER: 2,
 TOP_RIGHT: 3,
 LEFT: 4,
 CENTER: 5,
 RIGHT: 6,
 BOTTOM_LEFT: 7,
 BOTTOM_CENTER: 8,
 BOTTOM_RIGHT: 9,
 POS_XY: 10

x,y-->viewportの左上(top:0;,left;0;)を原点として広告を絶対配置する。px単位。変数も指定できる。

autoShow-->インタースティシャルなど、任意のタイミングで表示させたい場合はfalseにする。

adSize-->バナーのサイズ。値はこちらを参考にしてください。

https://developers.google.com/admob/android/banner

最後に、デバイスが準備できたら広告を呼び出します。

document.addEventListener("deviceready", adMobInitialize, false);

Admob IDを紐付け

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

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

package.json
   "cordova": {
      "plugins": {
          "cordova-plugin-admobpro": {
              "ADMOB_ANDROID_APP_ID": "あなたのID(Android用)",
              "ADMOB_IOS_APP_ID": "あなたのID(iOS用)"
          }
      }
  },

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

var admobid = { banner: 'ca-app-pub-xxxxxxxxx'};

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

AppTrackingTransparencyの実装

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

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

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

まとめ

これでCordovaアプリにAdmobを実装できました。
ちなみに、App Storeに出すアプリでAdmobのようなサードパーティ製広告を利用する際は「Appのプライバシー」に回答する必要があります。回答の仕方は以下の記事が大変参考になります。

https://zenn.dev/kazushige/articles/9afa10b36d6828

参考

https://ja.docs.monaca.io/sampleapp/samples/admob
https://developers.google.com/admob/android/banner
https://github.com/floatinghotpot/cordova-admob-pro
https://github.com/floatinghotpot/cordova-admob-pro/blob/master/www/AdMob.js
https://qiita.com/TaskForceYokohama/items/4367c4c11b9838c91607
http://wiki.nonip.net/index.php/Monaca/admob/admob-pro
https://zenn.dev/kazushige/articles/9afa10b36d6828

Discussion

ログインするとコメントできます