Monacaで開発したアプリにAdmob広告を導入する手順 後編
下記の前編の記事にて、AdMobでの広告ユニットの作成まで終わりました。
次に、開発中のアプリに広告を実装していきます。
※Monacaの開発環境でAdmob広告を実装するには
cordova-plugin-admob-pro というサードパーティー製のCordovaプラグインを使用するため、
MonacaのGoldプラン（月額5000円 or 年額50000円）以上のプランを契約する必要があります。
スポンサーリンク
プラグインのインポート
プロジェクトを開き、上部メニューの「設定」→「Cordovaプラグインの管理」の
テキストボックスに「cordova-plugin-admob-pro」と入力して検索し、
AdMob Plugin Pro をインポートします。
admob.js ファイルを作成
以下のコードで admob.js というファイルを作成します。
（ファイル名は任意ですが、以下の説明では admob.js として解説します。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
// 1. 広告ユニットIDの設定 var admobid = {}; var onDeviceReady = function() { if( /(android)/i.test(navigator.userAgent) ) { // for android & amazon-fireos admobid = { banner: 'ca-app-pub-9999999999999999/0000000001', interstitial: 'ca-app-pub-9999999999999999/0000000002' }; } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) { // for ios admobid = { banner: 'ca-app-pub-9999999999999999/0000000003', interstitial: 'ca-app-pub-9999999999999999/0000000004' }; } else { // for windows phone admobid = { banner: 'ca-app-pub-9999999999999999/0000000005', interstitial: 'ca-app-pub-9999999999999999/0000000006' }; } // 2. アプリ起動時にバナー広告を表示 if(AdMob) AdMob.createBanner( { adId: admobid.banner, position: AdMob.AD_POSITION.BOTTOM_CENTER, autoShow: true } ); }; document.addEventListener("deviceready", onDeviceReady, false); // 3. ゲームスタート時にインタースティシャル広告の準備開始＋最初のページに戻る時に表示 document.addEventListener("pageinit", function(e) { if (e.target.id == "start-page1" || e.target.id == "start-page2") { if(AdMob) AdMob.prepareInterstitial({ adId: admobid.interstitial, autoShow: false }); } else if (e.target.id == "entrance-page") { if(AdMob) AdMob.isInterstitialReady(function(ready){ if(ready) AdMob.showInterstitial(); }); } }, false); // 4. エラー処理 document.addEventListener('onAdFailLoad',function(data){ console.log( data.error + ',' + data.reason ); if(data.adType == 'banner') AdMob.hideBanner(); else if(data.adType == 'interstitial') interstitialIsReady = false; }); |
1. 広告ユニットIDの設定
アプリの読み込みが完了した時点で広告ユニットIDを設定する処理を行います。
banner: 'ca-app-pub-9999999999999999/0000000001',
interstitial: 'ca-app-pub-9999999999999999/0000000002'
の部分には、それぞれ作成したバナー、インタースティシャルの広告ユニットIDを記入します。
2. アプリ起動時にバナー広告を表示
AdMob.createBanner でバナー広告を作成します。
position: AdMob.AD_POSITION.BOTTOM_CENTER
この部分でバナー広告の位置を設定しています。
（この例では画面下部中央に表示します。）
autoShow: true
true だと広告配信側で準備ができ次第即時表示、
false だと広告表示設定のみここでしておいて、あとで任意のタイミングで true （表示）にする処理ができます。
この例では即時表示しています。
3. ゲームスタート時にインタースティシャル広告の準備開始＋最初のページに戻る時に表示
AdMob.prepareInterstitial でインタースティシャル広告を表示する準備をします。
インタースティシャル広告は広告呼び出しの準備をしてから表示されるまで若干のタイムラグがあるため、
autoShow: false
としておくことでこの段階では表示処理はせず準備だけしておき、
のちに任意のタイミング（ゲームの1ステージクリア等）で
AdMob.showInterstitial で表示させます。
その際、準備ができているかどうかを
AdMob.isInterstitialReady で確認することができます。
例のコードでは、id が start-page1 か start-page2 のページに遷移したタイミングで準備を開始、
そのページの内容が終わった後に id が entrance-page のページに戻るときに
インタースティシャル広告が表示されるという処理になっています。
4. エラー処理
広告の読み込みに失敗したときの処理です。
admob.js の呼び出しを記述
広告表示処理をするページ内でさきほどの admob.js を呼び出します。
|
1 |
<script src="./admob.js"></script> |
ons-page タグに id を設定
インタースティシャル広告の準備、表示の際に使用する id を各ページに設定します。
|
1 2 3 4 5 |
<ons-page id="start-page1"> // ページごとの内容 </ons-page> |