Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@TaskForceYokohama

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

動画広告を付けます

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?