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

# 動画広告を付けます

[cordova-admob-proプラグイン](https://github.com/floatinghotpot/cordova-admob-pro)を使ってMonacaアプリに広告をつける方法の覚書です。
[こちら](https://docs.monaca.io/ja/sampleapp/samples/admob/)を参考にしました。


###１．手順
１．[Admob App](https://apps.admob.com/v2/home)にサインアップ
２．[cordova-admob-proプラグイン](https://github.com/floatinghotpot/cordova-admob-pro)をMonacaアプリにインポート
３．コードを書く


###２．プラグインのインポート
プラグインをzip形式でダウンロードします
![image.png](https://qiita-image-store.s3.amazonaws.com/0/256202/dfde8143-275b-b7a4-bc2b-62309fb25b4b.png)



monacaの「Cordovaプラグイン」の項目から、ダウンロードしたzipをインポートします
![image.png](https://qiita-image-store.s3.amazonaws.com/0/256202/e63ceb5b-0491-e59a-4755-af392b3bd991.png)



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

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

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

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

```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日ほど時間がかかる](https://stackoverflow.com/questions/26843507/admob-sdk-error-code0)こともあるそうなので、ビルドして様子を見ます。

動画以外の形態の広告（バナー広告等）を使う場合は、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