adMobのプラグインを使ってmonacaアプリに広告をつける

11671 ワード
広告 adMob monaca 広告 テキストリンク

動画広告を付けます

cordova-admob-proプラグインを使ってMonacaアプリに広告をつける方法の覚書です。
こちらを参考にしました。

１．手順

１．Admob Appにサインアップ
２．cordova-admob-proプラグインをMonacaアプリにインポート
３．コードを書く

２．プラグインのインポート

プラグインをzip形式でダウンロードします

monacaの「Cordovaプラグイン」の項目から、ダウンロードしたzipをインポートします

３．コード

ons.ready(function() {...});の中でadMobプラグインの初期化処理を実行します。
$(document).ready(function(){...}と共存させようとすると失敗します。

    ons.ready(function() {
        // Admobプラグイン使えるか検証
        if (! AdMob) { alert( 'admob plugin not ready' ); return; }
        else { alert( 'Admob OK' ); }         // デバッグ用

        // Admob初期化
        initialization();
        // 例えば動画広告を出す処理（初期化したら後は好きなタイミングで広告を出す）
        showRewardVideo();
    });

別のjsファイルに初期化処理や広告を呼ぶ処理を書きます

    var admobid = {};
    // デモ広告でテストする場合、IDは以下のままでOK
    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: '',
        };
    }

    function initialization() {
        // 初期化
        AdMob.getAdSettings(
            function(info){
                // 成功時処理
            }, 
            function(){
                // 失敗時処理
            }
        );

        // オプションの設定
        AdMob.setOptions({
            //adId: admobid.banner, // admobのID
            position: AdMob.AD_POSITION.BOTTOM_CENTER, // 動画が出る位置
            isTesting: true, // テストするときはtrue
            bgColor: 'black', // 背景色
            // autoShow: true // 自動再生
        });

        $(document).on('onAdFailLoad', function(e){
            // 広告表示に失敗した時の処理
            if(typeof e.originalEvent !== 'undefined') e = e.originalEvent;
            var data = e.detail || e.data || e;
            alert('error: ' + data.reason );  
        });
    }

    // 動画広告
    function showRewardVideo(){
        AdMob.removeBanner();
        AdMob.prepareRewardVideoAd(admobid.rewardvideo, 
        function(){
            // 成功時処理
            alert("prepare : OK");
        }, 
        function(){
            // 失敗時処理
            alert("error");
        });
    }

広告を取得するには2日ほど時間がかかることもあるそうなので、ビルドして様子を見ます。

動画以外の形態の広告（バナー広告等）を使う場合は、Monacaのプロジェクトの
plugins/cordova-plugin-admobpro/www/AdMob.jsを見ながら設定するとできると思います（未検証）。

４．参考サイト様

https://docs.monaca.io/ja/sampleapp/samples/admob/
https://stackoverflow.com/questions/26843507/admob-sdk-error-code0
https://stackoverflow.com/questions/33566485/failed-to-load-ad-3