Asial Blog

Recruit! Asialで一緒に働きませんか?

Monacaアプリの広告SDKを入れてみよう(AdMob編)

カテゴリ :
Monaca
タグ :
JavaScript
広告
AdMob
Monaca
HTML5

アプリから収益をあげる手段として広告は今なお有力な選択肢です。しかし昨今のAppleによるリジェクト騒動があったりと、広告SDKを巡る動きはとても早く、追従していくのが大変ではないかと思います。



そこで公式なサポートは難しいのですが、執筆時点での情報としてMonacaアプリへの広告SDKの組み込みについて紹介したいと思います。まずは最も有名と思われる広告プラットフォーム、AdMobの使い方です。



利用はプラグイン利用



AdMobはAdMob Plugin Proというサードパーティー製プラグインを使うのが良いようです。そのためMonacaではゴールドプラン以上の利用が必須になります。



設定メニューからCordovaプラグインの管理を選択して、cordova-admob-proをインストールします。





AdMobでAd unit IDを取得



Google AdMobへ行き、iOS/AndroidそれぞれAd unit IDを取得します。載せ方はBanner、Interstitialが選択できます。Interstitialのがよりリッチで高額とのことですが、あまり多用するとアプリ利用者に嫌われる傾向があります。そのためアプリの画面切り替え、読み込み時の画面などで使われます。





JavaScriptコードの修正



使い方は次のようになります。各プラットフォームごとにAd unit IDを切り替えて設定する必要があります。




  1. var onDeviceReady = function() {
  2.     // select the right Ad Id according to platform
  3.     var admobid = {};
  4.     if( /(android)/i.test(navigator.userAgent) ) { // for android & amazon-fireos
  5.         admobid = {
  6.             banner: 'ca-app-pub-xxxxxxxxxxxx/yyyyyyyyy', // or DFP format "/6253334/dfp_example_ad"
  7.             interstitial: 'ca-app-pub-xxx/yyy'
  8.         };
  9.     } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) { // for ios
  10.         admobid = {
  11.             banner: 'ca-app-pub-xxxxxxxxxxxx/yyyyyyyyy', // or DFP format "/6253334/dfp_example_ad"
  12.             interstitial: 'ca-app-pub-xxx/kkk'
  13.         };
  14.     } else { // for windows phone
  15.         admobid = {
  16.             banner: 'ca-app-pub-xxx/zzz', // or DFP format "/6253334/dfp_example_ad"
  17.             interstitial: 'ca-app-pub-xxx/kkk'
  18.         };
  19.     }
  20.     if(AdMob) AdMob.createBanner( {
  21.         adId: admobid.banner, 
  22.         position: AdMob.AD_POSITION.TOP_CENTER, 
  23.         autoShow: true } );
  24. };
  25. document.addEventListener("deviceready", onDeviceReady, false);

後はバナーであれば AdMob.createBanner を実行します。interstitialの場合は次のようになります。



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

アプリをビルドする





独自のプラグインを使っていますので、アプリストア配布のMonacaデバッガーではデバッグできません。デバッグビルドなど、ビルドした上でアプリを実機にインストールして確認してください。






プラグインがサードパーティー製という点が若干不安の残る点ではありますが、開発は活発に行われているようなので今後のバージョンアップにも追従してくれると思われます。



また、AdMobはGoogleが運営しているとあって規約上の問題になるようなことはしないと思われますので、他のプラットフォームに比べると安心して利用できるのではないでしょうか。