LoginSignup
1
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-08-03

動画広告を付けます

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

1.手順

1.Admob Appにサインアップ
2.cordova-admob-proプラグインをMonacaアプリにインポート
3.コードを書く

2.プラグインのインポート

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

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

3.コード

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を見ながら設定するとできると思います(未検証)。

4.参考サイト様

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1