【Cordova】アプリ内にAdMobのバナー広告を導入する方法

タイトル通り、Cordovaで開発したアプリにバナー広告を入れる方法です。
ちなみに、AndroidとiOSの両方に対応しています。
本当はネイティブ広告という、Twitterのタイムラインで表示されるような、記事っぽくみえる広告を導入したかったのですが、どうやらプラグインが対応していないようです。

今回使ったのは、cordova-plugin-admob-free というプラグインです。
GitHubはこちら。

GitHub – ratson/cordova-plugin-admob-free: Cordova AdMob Plugin
https://github.com/ratson/cordova-plugin-admob-free

まずインストールは下記のコマンドをコマンドプロンプト等で実行します。

cordova plugin add cordova-plugin-admob-free --save

インストールが終わったら、下記のコードをプログラムに記述するだけ！
なお、私の環境では、index.js というファイルに記述しました。

// AdMob 広告ID
var admobid = {}
if (/(android)/i.test(navigator.userAgent)) {  // Android
    admobid = {
        banner: 'ca-app-pub-3940256099942544/6300978111'
    }
} else if (/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {  // ios
    admobid = {
        banner: 'ca-app-pub-3940256099942544/2934735716'
    }
}

document.addEventListener('deviceready', function () {
    // バナー広告表示
    admob.banner.config({
        id: admobid.banner,
        isTesting: true,  // テスト広告
        autoShow: true,
    })
    admob.banner.prepare()
}, false);

コードの上の方で、アプリを使っている端末が Android なのか iOS なのかを取得しています。
Android と iOS では、広告のIDが異なるので、この処理も重要です。

なお、広告のIDはテスト用のものを使っています。
なんでも、動作を確認している段階のアプリで本番用の広告IDを使うと、最悪の場合アカウント停止になることもあるとのことだったので…。
絶対にそれは避けたいので、慎重に。

ちなみに、広告の種類は他に「インタースティシャル」という画面に大きく表示される広告と、あとは「動画広告」もあります。
このあたりは、お好みで使い分けてください。
…が、個人的に画面全部を覆うような広告は嫌いなので、使うとすればバナー広告かな。

以上、アプリ内に広告を入れる方法でした。
アプリの利用者数が増えてきたら、導入を検討していきたいと思います。