AdMobとAnalyticsのプラグイン

GoogleのAdMobとAnalyticsをPhoneGap(Cordova)で使用するためのPluginがあったので、紹介します。
まえとは違って、インストールして、使いたいところのJavascriptに記述するだけで使用できます。

AdMob

前に使っていた、cordova-plugin-admobの新しく設計し直されたAdMob Plugin Proが出ていました。

インストール
通常のPluginのインストール通りにすればOK。名前「cordova-plugin-admobpro」が使用できる。

$ phonegap plugin add cordova-plugin-admobpro

使用法
まず、AdMobの広告IDをセットします。以下のは、共通のソースで、スマートフォンのOS別に設定する場合のサンプル。バナーとインターステイシャルを指定できる。

    var admobid = {};
    if( /(android)/i.test(navigator.userAgent) ) { // for android
        admobid = {
            banner: 'ca-app-pub-xxx/xxx', // or DFP format "/6253334/dfp_example_ad"
            interstitial: 'ca-app-pub-xxx/yyy'
        };
    } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) { // for ios
        admobid = {
            banner: 'ca-app-pub-xxx/zzz', // or DFP format "/6253334/dfp_example_ad"
            interstitial: 'ca-app-pub-xxx/kkk'
        };
    } else { // for windows phone
        admobid = {
            banner: 'ca-app-pub-xxx/zzz', // or DFP format "/6253334/dfp_example_ad"
            interstitial: 'ca-app-pub-xxx/kkk'
        };
    }

簡単なバナー広告を表示するタイミングに

if(AdMob) AdMob.createBanner( {
    adId: admobid.banner,
    isTesting: true,
    position: AdMob.AD_POSITION.TOP_CENTER, 
    autoShow: true } );

と記述すればいい。isTestingは、テストが終わって登録するときは、falseにします。
その他、オプションについては、こちらを、メソッドについてはこちらを参照ください。

インターステイシャルの場合は、最初のタイミングで広告を読み込んでおき、

if(AdMob) AdMob.prepareInterstitial( {adId:admobid.interstitial, autoShow:false} );

表示したいタイミングで

if(AdMob) AdMob.showInterstitial();

とすればいい。

DBとのコンフリクション
前から、PhoneGap(Cordova)では、AdMobとDBを両方使うと問題が発生する場合がありましたが、今回のでも、AdMobを使用しているときにDBのオープンを行うと、セキュリティエラーが発生します。
DBのオープンをAdMob使用前にすれば、いまのところ問題なく使用できています。

Analytics

こちらも、通常のPluginのインストール通りにすればOK。名前「cordova-plugin-google-analytics」が使用できる。
使い方も、初期処理で

window.analytics.startTrackerWithId('UA-XXXX-YY');

を行っておき、ページ表示のところで

window.analytics.trackView('Screen Title');

表示すればいい。
詳しい使い方は、こちらを参照ください。

UA-XXXX-YYとか、’Screen Title’は、自分のに合わせてかえてください。

カテゴリー: 開発環境