AdMob デモ用アプリ

検索…
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 プラグイン
​AdMob Plugin Pro                                               
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_BANNER、MEDIUM_RECTANGLE、FULL_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_LEFT、CENTER、BOTTOM_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!