CordovaアプリにAdmobを導入する（バナー編）
Cordovaアプリにadmobを実装する手順について。
今まではお手軽なnend広告に頼ってきましたが、Admobの方が単価が良いっぽいので思い切って導入してみました。
開発環境はMonacaです。
事前準備
Admobに登録
Admobに登録します。
Monacaのプランをアップグレード
サードパーティプラグインを使うためにはMonacaをProプランにアップグレードする必要があります。月2000円くらいかかりますが、アプリをリリースし終えたらまたFreeプランに戻せばOKです。
プラグインをインポート
Cordova Admob Proプラグインを導入します。
似たプラグインにAdmob Plusというものがありますが、Proの方が簡単なのでこっちを使います。
ZipファイルをダウンロードしてMonacaにインポートします。これで事前準備は完了です。
バナー広告を実装
完成形
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を変えます。
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/
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-->バナーのサイズ。値はこちらを参考にしてください。
最後に、デバイスが準備できたら広告を呼び出します。
document.addEventListener("deviceready", adMobInitialize, false);
Admob IDを紐付け
Admobでアプリを登録します。リリース前でも登録できます。（アプリ公開後にAdmobにアプリのリンクを登録する必要があります。）
package.jsonにアプリIDを登録します。
"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>に以下を追記します。
<edit-config target="NSUserTrackingUsageDescription" file="*-Info.plist" mode="merge">
<string>この識別子は、ユーザーにとって適切な広告を配信するために使用されます。</string>
</edit-config>
まとめ
これでCordovaアプリにAdmobを実装できました。
ちなみに、App Storeに出すアプリでAdmobのようなサードパーティ製広告を利用する際は「Appのプライバシー」に回答する必要があります。回答の仕方は以下の記事が大変参考になります。
参考
Discussion