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. AdMob Apps にサインアップします。

  2. 収益化 タブを選択して、+新しいアプリを収益化ボタンをクリックします ( 2 回目のアプリ登録であれば、こちらのボタンが表示されます )。

3. 必要な情報 ( アプリ名、プラットフォーム、広告フォーマットなど ) を入力します。入力後、広告ユニットの ID が表示されます。アプリ上で広告を表示するときに、この ID が必要になります。

ファイル構成

ファイル

説明

index.html

スタート画面のページ

js/app.js

アプリの実行時にさまざまな処理を行う JavaScript ファイル

css/style.css

アプリのスタイルシート

必要な JS/CSS コンポーネント

  • jQuery

  • Onsen UI

必要な Cordova プラグイン

HTML の解説

このデモ用アプリでは、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>
...

JavaScript の解説

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

admobid オブジェクト

最初に行う処理は、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 サイトへ行き、アカウントの登録作業から行ってください。

initialization() 関数

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();
});
}

createSelectedBanner() 関数

この関数では、設定情報に基づき、広告を表示しています。

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
});
}

showBannerAtPosition() 関数

この関数では、選択された表示位置に基づき、広告を表示しています。

function showBannerAtPosition(){
var ads_pos = selected_pos_value;
if(AdMob) AdMob.showBanner( ads_pos );
}

prepareInt() 関数

この関数では、インタースティシャル広告を読み込み、次に、表示しています。

function prepareInt(){
AdMob.prepareInterstitial({
adId:admobid.interstitial,
autoShow: $('#autoshow').prop('checked')
});
}

showBannerSize() 関数

この関数を使用して、バナーサイズの設定ダイアログ ( 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();
}
}

showBannerPos() 関数

この関数を使用して、広告の表示位置の設定ダイアログ ( 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();
}
}