Monaca Docs
検索…
AdMob デモ用アプリ
このページでは、Monaca を使用して、AdMob ( モバイルアド/広告ネットワーク ) の実装方法を解説します。この解説で使用しているデモ用アプリは、AdMob Plugin Pro ( Github 上 ) を参考にして、構築されています。
サードパーティー製 Cordova プラグインを確認する場合は、カスタムビルドデバッガー ( Android 版 または iOS 版 ) を作成する必要があります。

テスト環境
  • Android 11.0
  • iOS 14.3
    Banner Ads
    Interstitial Ads

このデモで使用している AdMob の広告ユニット ID ( Ad Unit ID ) は検証用です。実際に使用する広告がある場合には、AdMob のサイト上でアプリを登録する必要があります。
AdMob サイト上でのアプリの登録方法を、次に記します。
  1. 1.
    AdMob Apps にサインアップします。
  2. 2.
    収益化 タブを選択して、+新しいアプリを収益化ボタンをクリックします ( 2 回目のアプリ登録であれば、こちらのボタンが表示されます )。
3. 必要な情報 ( アプリ名、プラットフォーム、広告フォーマットなど ) を入力します。入力後、広告ユニットの ID が表示されます。アプリ上で広告を表示するときに、この ID が必要になります。

ファイル
説明
index.html
スタート画面のページ
js/app.js
アプリの実行時にさまざまな処理を行う JavaScript ファイル
css/style.css
アプリのスタイルシート

  • jQuery
  • Onsen UI

このデモ用アプリでは、Onsen UI を使用して、UI を構築しています。

次のコードを使用して、プロジェクトの起動時に表示されるページを構築しています。
<h3 style="text-align: center;">Monaca with AdMob Demo</h3>
<div id="fullpage">
<h3>Banner Ads</h3>
<ons-input type="checkbox" id='overlap'> overlap</ons-input>
&nbsp;&nbsp;&nbsp;
<ons-input type="checkbox" id='offsetTopBar'> offsetTopBar</ons-input>
<br/><br/>
<ons-button id='btn_size' style="font-size: 80%; background-color: #25a6d9" onclick='show("banner_size.html", "btn_size");'>
<ons-icon icon="fa-chevron-down" fixed-width="false"></ons-icon>
<span id="btn_size_txt">SMART_BANNER</span>
</ons-button>
<ons-button id='btn_pos' style="font-size: 80%; background-color: #25a6d9" onclick='show("banner_pos.html", "btn_pos");'>
<ons-icon icon="fa-chevron-down" fixed-width="false"></ons-icon>
<span id="btn_pos_txt">BOTTOM_CENTER</span>
</ons-button>
<br /><br />
<ons-row>
<ons-col>
<ons-button id='btn_create'>Create Banner</ons-button>
<ons-button id='btn_remove'>Remove Banner</ons-button>
</ons-col>
</ons-row>
<ons-row style="height: 10px;"></ons-row>
<ons-row>
<ons-col>
<ons-button id='btn_show'>Show Banner</ons-button>
<ons-button id='btn_hide'>Hide Banner</ons-button>
</ons-col>
</ons-row>
<hr />
<h3>Interstitial Ads</h3>
<ons-input id="autoshow" type="checkbox" checked> auto show when ready</ons-input>
<br/><br/>
<ons-button id="btn_prepare">Prepare</ons-button>
<ons-button id="btn_showfull">Show</ons-button>
</div>

広告サイズの設定ダイアログの表示には、次のコードが使用されています。このダイアログ上では、AdMob の広告サイズ ( SMART_BANNERMEDIUM_RECTANGLEFULL_BANNER など ) を選択できます。
...
<ons-template id="banner_size.html">
<ons-dialog var="dialog" cancelable mask-color="rgba(0, 0, 0, 0.7)">
<div class="margin10 text-center">
<ons-toolbar inline>
<div class="center">
Banner Size
</div>
</ons-toolbar>
<ons-list style="margin:0; padding:0; font-size: 90%;">
<ons-list-item modifier="tappable">
<ons-input type="radio" name="radio" value='BANNER'> BANNER</ons-input>
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-input type="radio" name="radio" value='FULL_BANNER'> FULL_BANNER</ons-input>
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-input type="radio" name="radio" value='LEADERBOARD'> LEADERBOARD</ons-input>
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-input type="radio" name="radio" value='MEDIUM_RECTANGLE'> MEDIUM_RECTANGLE</ons-input>
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-input type="radio" name="radio" value="SMART_BANNER" checked> SMART_BANNER</ons-input>
</ons-list-item>
</ons-list>
</div>
</ons-dialog>
</ons-template>
...

広告の表示位置の設定ダイアログには、次のコードが使用されています。このダイアログ上では、広告の表示位置 ( TOP_LEFTCENTERBOTTOM_RIGHT など ) を選択できます。
...
<ons-template id="banner_pos.html">
<ons-dialog var="dialog" cancelable mask-color="rgba(0, 0, 0, 0.7)" style="width: 90%; height: auto">
<div class="margin10 text-center">
<ons-toolbar inline>
<div class="center">
Banner Position
</div>
</ons-toolbar>
<ons-list style="margin:0; padding:0; font-size: 90%">
<ons-list-item modifier="tappable">
<ons-input type="radio" id="radio1" name="radio" value='1'>TOP_LEFT</ons-input>
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-input type="radio" id="radio1" name="radio" value='2'> TOP_CENTER</ons-input>
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-input type="radio" id="radio1" name="radio" value='3'> TOP_RIGHT</ons-input>
</ons-list-item>
<!--<ons-list-item modifier="tappable">
<ons-input type="radio" id="radio1" name="radio" value='4'> LEFT</ons-input>
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-input type="radio" id="radio1" name="radio" value='5'> CENTER</ons-input>
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-input type="radio" id="radio1" name="radio" value='6'> RIGHT</ons-input>
</ons-list-item>-->
<ons-list-item modifier="tappable">
<ons-input type="radio" id="radio1" name="radio" value='7'> BOTTOM_LEFT</ons-input>
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-input type="radio" id="radio1" name="radio" value='8' checked> BOTTOM_CENTER</ons-input>
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-input type="radio" id="radio1" name="radio" value='9'> BOTTOM_RIGHT</ons-input>
</ons-list-item>
</ons-list>
</div>
</ons-dialog>
</ons-template>
...

ここでは、app.js ファイル内に記述されている、主な関数を解説します。

最初に行う処理は、admobid オブジェクトの初期化です。次に記述されているブロックでは、端末のプラットフォームに応じて、異なる広告ユニット ID ( Ad Unit ID ) を指定しています。いずれの場合でも、インタースティシャル広告とバナー広告の 2 種類を、オブジェクトに格納しています。
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: '',
};
}
このデモに使用されている広告ユニット ID ( Ad Unit ID ) は、検証用の ID です。製品版に使用する広告ユニット ID は、別途、AdMob サイトで作成する必要があります。その場合には、AdMob サイトへ行き、アカウントの登録作業から行ってください。

Cordova と AdMob プラグインの読み込み完了後に、initialization() 関数が呼び出されます。この関数内では、次の関数を呼び出しています。
  • AdMob.getAdSettings(): 広告の設定情報へアクセスします。
  • AdMob.setOptions(): 広告の表示設定 ( 表示位置、背景色など )を行います。
  • onAdFailLoad イベントハンドラー:広告の読み込み失敗時、エラーの詳細を表示します。
function initialization(){
AdMob.getAdSettings(function(info){
console.log('adId: ' + info.adId + '\n' + 'adTrackingEnabled: ' + info.adTrackingEnabled);
}, function(){
console.log('failed to get user ad settings');
});
AdMob.setOptions({
//adId: admobid.banner,
//adSize: 'SMART_BANNER',
position: AdMob.AD_POSITION.BOTTOM_CENTER,
isTesting: true, // set to true, to receiving test ad for testing purpose
bgColor: 'black', // color name, or '#RRGGBB'
// autoShow: true // auto show interstitial ad when loaded, set to false if prepare/show
// offsetTopBar: false, // avoid overlapped by status bar, for iOS7+
});
// new events, with variable to differentiate: adNetwork, adType, adEvent
$(document).on('onAdFailLoad', function(e){
// when jquery used, it will hijack the event, so we have to get data from original event
if(typeof e.originalEvent !== 'undefined') e = e.originalEvent;
var data = e.detail || e.data || e;
alert('error: ' + data.error +
', reason: ' + data.reason +
', adNetwork:' + data.adNetwork +
', adType:' + data.adType +
', adEvent:' + data.adEvent); // adType: 'banner', 'interstitial', etc.
});
$('#btn_size').click(showBannerSize);
$('#btn_pos').click(showBannerPos);
$('#btn_create').click(createSelectedBanner);
$('#btn_show').click(showBannerAtPosition);
$('#btn_remove').click(function(){
AdMob.removeBanner();
});
$('#btn_hide').click(function(){
AdMob.hideBanner();
});
// test interstitial ad
$('#btn_prepare').click(function(){
AdMob.prepareInterstitial({
adId:admobid.interstitial,
autoShow: $('#autoshow').prop('checked')
});
});
$('#btn_showfull').click(function(){
AdMob.showInterstitial();
});
}

この関数では、設定情報に基づき、広告を表示しています。
function createSelectedBanner(){
AdMob.removeBanner();
var ads_size = $("#btn_size_txt").text();
var ads_pos = selected_pos_value;
if(AdMob) AdMob.createBanner({
adId: admobid.banner,
overlap: $('#overlap').prop('checked'),
offsetTopBar: $('#offsetTopBar').prop('checked'),
adSize: ads_size,
position: ads_pos
});
}

この関数では、選択された表示位置に基づき、広告を表示しています。
function showBannerAtPosition(){
var ads_pos = selected_pos_value;
if(AdMob) AdMob.showBanner( ads_pos );
}

この関数では、インタースティシャル広告を読み込み、次に、表示しています。
function prepareInt(){
AdMob.prepareInterstitial({
adId:admobid.interstitial,
autoShow: $('#autoshow').prop('checked')
});
}

この関数を使用して、バナーサイズの設定ダイアログ ( OnsenUI のダイアログを使用 ) を表示します。この設定ダイアログ上では、広告サイズ ( BANNER、SMART_BANNER、MEDIUM_RECTANGLE など ) を選択できます。バナーサイズの詳細は、こちら ( 「 Banner Size 」 欄 ) をご確認ください。
function showBannerSize() {
var dlg = "banner_size.html";
if (!dialogs[dlg]) {
ons.createDialog(dlg).then(function(dialog) {
dialogs[dlg] = dialog;
dialog.show();
$('input[name=radio_size]').on('change', function() {
var selected_value = $('input[name=radio_size]:checked').val();
$("#btn_size_txt").text(selected_value);
dialog.hide();
});
});
} else {
dialogs[dlg].show();
}
}

この関数を使用して、広告の表示位置の設定ダイアログ ( OnsenUI のダイアログを使用 ) を表示します。
function showBannerPos() {
var dlg = "banner_pos.html";
if (!dialogs[dlg]) {
ons.createDialog(dlg).then(function(dialog) {
dialogs[dlg] = dialog;
dialog.show();
$('input[name=radio_pos]').on('change', function() {
var selected_value = $('input[name=radio_pos]:checked').val();
var selected_text = btnPosLabel(selected_value);
$("#btn_pos_txt").text(selected_text);
selected_pos_value = selected_value;
dialog.hide();
});
});
} else {
dialogs[dlg].show();
}
}
リンクのコピー
概要
デモ
事前準備
ファイル構成
必要な JS/CSS コンポーネント
必要な Cordova プラグイン
HTML の解説
起動時のページ
広告サイズの設定ダイアログ
広告の表示位置の設定ダイアログ
JavaScript の解説
admobid オブジェクト
initialization() 関数
createSelectedBanner() 関数
showBannerAtPosition() 関数
prepareInt() 関数
showBannerSize() 関数
showBannerPos() 関数