CordovaアプリにAdmob広告を表示するよ

2017-06-10スマートフォンアプリ開発Cordova

どうも、最近研究に殺されそうになっている私です。研究なんてやってられないのでCordovaアプリ開発やってます。アプリ開発といえば、以前にTRPGサイコロアプリやクイズ番組のSEアプリなんかを作りました。よかったら使ってみてください。

さて本題です。以前のアプリからAdMobさんの広告を表示させてもらっています。ですが、今回Cordovaでの広告掲載方法を忘れてしまい、調べ直す羽目になりました。そんなわけで、今回はCordovaアプリでのAdMobバナー広告の掲載方法を備忘録的にまとめようと思います。

今回の記事ではすでにCordovaの環境が整っている方向けに書かせてもらいます。そのため、まだ環境が整っていない方は、以前の作業記事なんかを参考に整えてからご覧ください。

Cordova : 6.4.0
OS : MacOS Sierra

Contents

1. AdMobに登録

さて、まずは広告を配信してもらうためにAdMobさんにアプリを登録します。AdMobさんでのアプリ登録方法は細かい箇所が度々更新されるため今回は省略させていただきます。とりあえず欲しいのは”ca-app-pub-3940256099942544/6300978111″こんな感じの広告コードです。

アプリはGoogle Playなどのストアに公開していなくても登録することができますが、アプリを公開したら該当広告と接続するのを忘れないようにしましょう。

2. プラグインのインストール

では次にアプリ内で広告を表示するのに便利なプラグインをインストールします。インストール方法は通常のプラグインと同様にcordovaコマンドから行うことができます。というわけで、以下のコマンドで該当プラグインをインストールしてください。

$ cordova plugin add cordova-plugin-admobpro

1	$ cordova plugin add cordova-plugin-admobpro

もしかしたら追加しているプラットフォームによって、入れ直す必要が出るかもしれませんが、その時はコマンドに出力されているコマンド通り(“cordova plugin save”とか”cordova platform rm xxx”)に対応すれば大丈夫です。

一応本プラグインのGitHubページのリンクを掲載しておきます。

3. 表示部分のコードを追記

では、今入れたプラグインを使って実際に広告を表示するコードを書いていきます。コードを書くファイルは、JavaScriptのファイルでHTMLから読み出していたらなんでもいいと思いますが、今回はCordovaプロジェクト生成時に自動的に作成されるindex.jsに追記しました。というわけでご自身の環境に合わせたファイルに以下のコードを記述してください。

/*** これ以上は省略 ***/
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
        // ここから記述 Admob広告バナーコード
        var admobid = {};
        if( /(android)/i.test(navigator.userAgent) ) {
            admobid = {
                // banner: '[↓ この部分に自身の広告コードを記述]'
                banner: 'ca-app-pub-3940256099942544/6300978111', // TESTCODE
            };
        } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
            admobid = {
                banner: 'ca-app-pub-xxxxxxxxxxxx/yyyyyyyyy',
            };
        } else {
            admobid = {
                banner: 'ca-app-pub-xxxxxxxxxxxx/yyyyyyyyy',
            };
        }
        if(AdMob) AdMob.createBanner({
            adId: admobid.banner,
            position: AdMob.AD_POSITION.BOTTOM_CENTER,
            overlap: false,
            autoShow: true
        });
        //ここまで記述
    },
/*** これ以下は省略 ***/