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’は、自分のに合わせてかえてください。