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
アプリのスタイルシート

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

  • jQuery
  • Onsen UI

必要な Cordova プラグイン

HTML の解説

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

起動時のページ

次のコードを使用して、プロジェクトの起動時に表示されるページを構築しています。
1
<h3 style="text-align: center;">Monaca with AdMob Demo</h3>
2
3
<div id="fullpage">
4
<h3>Banner Ads</h3>
5
6
<ons-input type="checkbox" id='overlap'> overlap</ons-input>
7
&nbsp;&nbsp;&nbsp;
8
<ons-input type="checkbox" id='offsetTopBar'> offsetTopBar</ons-input>
9
<br/><br/>
10
<ons-button id='btn_size' style="font-size: 80%; background-color: #25a6d9" onclick='show("banner_size.html", "btn_size");'>
11
<ons-icon icon="fa-chevron-down" fixed-width="false"></ons-icon>
12
<span id="btn_size_txt">SMART_BANNER</span>
13
</ons-button>
14
<ons-button id='btn_pos' style="font-size: 80%; background-color: #25a6d9" onclick='show("banner_pos.html", "btn_pos");'>
15
<ons-icon icon="fa-chevron-down" fixed-width="false"></ons-icon>
16
<span id="btn_pos_txt">BOTTOM_CENTER</span>
17
</ons-button>
18
<br /><br />
19
<ons-row>
20
<ons-col>
21
<ons-button id='btn_create'>Create Banner</ons-button>
22
<ons-button id='btn_remove'>Remove Banner</ons-button>
23
</ons-col>
24
</ons-row>
25
<ons-row style="height: 10px;"></ons-row>
26
<ons-row>
27
<ons-col>
28
<ons-button id='btn_show'>Show Banner</ons-button>
29
<ons-button id='btn_hide'>Hide Banner</ons-button>
30
</ons-col>
31
</ons-row>
32
<hr />
33
34
<h3>Interstitial Ads</h3>
35
<ons-input id="autoshow" type="checkbox" checked> auto show when ready</ons-input>
36
<br/><br/>
37
<ons-button id="btn_prepare">Prepare</ons-button>
38
<ons-button id="btn_showfull">Show</ons-button>
39
40
</div>
Copied!

広告サイズの設定ダイアログ

広告サイズの設定ダイアログの表示には、次のコードが使用されています。このダイアログ上では、AdMob の広告サイズ ( SMART_BANNERMEDIUM_RECTANGLEFULL_BANNER など ) を選択できます。
1
...
2
<ons-template id="banner_size.html">
3
<ons-dialog var="dialog" cancelable mask-color="rgba(0, 0, 0, 0.7)">
4
<div class="margin10 text-center">
5
<ons-toolbar inline>
6
<div class="center">
7
Banner Size
8
</div>
9
</ons-toolbar>
10
11
<ons-list style="margin:0; padding:0; font-size: 90%;">
12
<ons-list-item modifier="tappable">
13
<ons-input type="radio" name="radio" value='BANNER'> BANNER</ons-input>
14
</ons-list-item>
15
<ons-list-item modifier="tappable">
16
<ons-input type="radio" name="radio" value='FULL_BANNER'> FULL_BANNER</ons-input>
17
</ons-list-item>
18
<ons-list-item modifier="tappable">
19
<ons-input type="radio" name="radio" value='LEADERBOARD'> LEADERBOARD</ons-input>
20
</ons-list-item>
21
<ons-list-item modifier="tappable">
22
<ons-input type="radio" name="radio" value='MEDIUM_RECTANGLE'> MEDIUM_RECTANGLE</ons-input>
23
</ons-list-item>
24
<ons-list-item modifier="tappable">
25
<ons-input type="radio" name="radio" value="SMART_BANNER" checked> SMART_BANNER</ons-input>
26
</ons-list-item>
27
</ons-list>
28
</div>
29
</ons-dialog>
30
</ons-template>
31
...
Copied!

広告の表示位置の設定ダイアログ

広告の表示位置の設定ダイアログには、次のコードが使用されています。このダイアログ上では、広告の表示位置 ( TOP_LEFTCENTERBOTTOM_RIGHT など ) を選択できます。
1
...
2
<ons-template id="banner_pos.html">
3
<ons-dialog var="dialog" cancelable mask-color="rgba(0, 0, 0, 0.7)" style="width: 90%; height: auto">
4
<div class="margin10 text-center">
5
<ons-toolbar inline>
6
<div class="center">
7
Banner Position
8
</div>
9
</ons-toolbar>
10
11
<ons-list style="margin:0; padding:0; font-size: 90%">
12
<ons-list-item modifier="tappable">
13
<ons-input type="radio" id="radio1" name="radio" value='1'>TOP_LEFT</ons-input>
14
</ons-list-item>
15
<ons-list-item modifier="tappable">
16
<ons-input type="radio" id="radio1" name="radio" value='2'> TOP_CENTER</ons-input>
17
</ons-list-item>
18
<ons-list-item modifier="tappable">
19
<ons-input type="radio" id="radio1" name="radio" value='3'> TOP_RIGHT</ons-input>
20
</ons-list-item>
21
<!--<ons-list-item modifier="tappable">
22
<ons-input type="radio" id="radio1" name="radio" value='4'> LEFT</ons-input>
23
</ons-list-item>
24
<ons-list-item modifier="tappable">
25
<ons-input type="radio" id="radio1" name="radio" value='5'> CENTER</ons-input>
26
</ons-list-item>
27
<ons-list-item modifier="tappable">
28
<ons-input type="radio" id="radio1" name="radio" value='6'> RIGHT</ons-input>
29
</ons-list-item>-->
30
<ons-list-item modifier="tappable">
31
<ons-input type="radio" id="radio1" name="radio" value='7'> BOTTOM_LEFT</ons-input>
32
</ons-list-item>
33
<ons-list-item modifier="tappable">
34
<ons-input type="radio" id="radio1" name="radio" value='8' checked> BOTTOM_CENTER</ons-input>
35
</ons-list-item>
36
<ons-list-item modifier="tappable">
37
<ons-input type="radio" id="radio1" name="radio" value='9'> BOTTOM_RIGHT</ons-input>
38
</ons-list-item>
39
</ons-list>
40
</div>
41
</ons-dialog>
42
</ons-template>
43
...
Copied!

JavaScript の解説

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

admobid オブジェクト

最初に行う処理は、admobid オブジェクトの初期化です。次に記述されているブロックでは、端末のプラットフォームに応じて、異なる広告ユニット ID ( Ad Unit ID ) を指定しています。いずれの場合でも、インタースティシャル広告とバナー広告の 2 種類を、オブジェクトに格納しています。
1
var admobid = {};
2
if( /(android)/i.test(navigator.userAgent) ) {
3
admobid = { // for Android
4
banner: 'ca-app-pub-3940256099942544/6300978111',
5
interstitial: 'ca-app-pub-3940256099942544/1033173712',
6
rewardvideo: 'ca-app-pub-3940256099942544/5224354917',
7
};
8
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
9
admobid = { // for iOS
10
banner: 'ca-app-pub-3940256099942544/2934735716',
11
interstitial: 'ca-app-pub-3940256099942544/4411468910',
12
rewardvideo: 'ca-app-pub-3940256099942544/1712485313',
13
};
14
} else {
15
admobid = { // for Windows Phone
16
banner: 'ca-app-pub-6869992474017983/8878394753',
17
interstitial: 'ca-app-pub-6869992474017983/1355127956',
18
rewardvideo: '',
19
};
20
}
Copied!
このデモに使用されている広告ユニット ID ( Ad Unit ID ) は、検証用の ID です。製品版に使用する広告ユニット ID は、別途、AdMob サイトで作成する必要があります。その場合には、AdMob サイトへ行き、アカウントの登録作業から行ってください。

initialization() 関数

Cordova と AdMob プラグインの読み込み完了後に、initialization() 関数が呼び出されます。この関数内では、次の関数を呼び出しています。
  • AdMob.getAdSettings(): 広告の設定情報へアクセスします。
  • AdMob.setOptions(): 広告の表示設定 ( 表示位置、背景色など )を行います。
  • onAdFailLoad イベントハンドラー:広告の読み込み失敗時、エラーの詳細を表示します。
1
function initialization(){
2
AdMob.getAdSettings(function(info){
3
console.log('adId: ' + info.adId + '\n' + 'adTrackingEnabled: ' + info.adTrackingEnabled);
4
}, function(){
5
console.log('failed to get user ad settings');
6
});
7
8
AdMob.setOptions({
9
//adId: admobid.banner,
10
//adSize: 'SMART_BANNER',
11
position: AdMob.AD_POSITION.BOTTOM_CENTER,
12
isTesting: true, // set to true, to receiving test ad for testing purpose
13
bgColor: 'black', // color name, or '#RRGGBB'
14
// autoShow: true // auto show interstitial ad when loaded, set to false if prepare/show
15
// offsetTopBar: false, // avoid overlapped by status bar, for iOS7+
16
});
17
18
// new events, with variable to differentiate: adNetwork, adType, adEvent
19
$(document).on('onAdFailLoad', function(e){
20
// when jquery used, it will hijack the event, so we have to get data from original event
21
if(typeof e.originalEvent !== 'undefined') e = e.originalEvent;
22
var data = e.detail || e.data || e;
23
24
alert('error: ' + data.error +
25
', reason: ' + data.reason +
26
', adNetwork:' + data.adNetwork +
27
', adType:' + data.adType +
28
', adEvent:' + data.adEvent); // adType: 'banner', 'interstitial', etc.
29
});
30
31
$('#btn_size').click(showBannerSize);
32
$('#btn_pos').click(showBannerPos);
33
$('#btn_create').click(createSelectedBanner);
34
$('#btn_show').click(showBannerAtPosition);
35
36
$('#btn_remove').click(function(){
37
AdMob.removeBanner();
38
});
39
40
$('#btn_hide').click(function(){
41
AdMob.hideBanner();
42
});
43
44
// test interstitial ad
45
$('#btn_prepare').click(function(){
46
AdMob.prepareInterstitial({
47
adId:admobid.interstitial,
48
autoShow: $('#autoshow').prop('checked')
49
});
50
});
51
52
$('#btn_showfull').click(function(){
53
AdMob.showInterstitial();
54
});
55
}
Copied!

createSelectedBanner() 関数

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

showBannerAtPosition() 関数

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

prepareInt() 関数

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

showBannerSize() 関数

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

showBannerPos() 関数

この関数を使用して、広告の表示位置の設定ダイアログ ( OnsenUI のダイアログを使用 ) を表示します。
1
function showBannerPos() {
2
var dlg = "banner_pos.html";
3
if (!dialogs[dlg]) {
4
ons.createDialog(dlg).then(function(dialog) {
5
dialogs[dlg] = dialog;
6
dialog.show();
7
8
$('input[name=radio_pos]').on('change', function() {
9
var selected_value = $('input[name=radio_pos]:checked').val();
10
var selected_text = btnPosLabel(selected_value);
11
$("#btn_pos_txt").text(selected_text);
12
selected_pos_value = selected_value;
13
dialog.hide();
14
});
15
});
16
} else {
17
dialogs[dlg].show();
18
}
19
}
Copied!
最終更新 21d ago