Ionic-admob

イオン-Cordova AdMob

Cordova AdMobプラグインは、広告をネイティブに統合するために使用されます。 admobは廃止されるため、この章では admobpro プラグインを使用します。

AdMobを使用する

アプリで広告を使用するには、admobにサインアップしてバナーを作成する必要があります。 これを行うと、*広告発行者ID *が取得されます。これらの手順はIonicフレームワークの一部ではないため、ここでは説明しません。 Googleサポートチームのhttps://support.google.com/admob/?hl=ja#topic=2740022 [こちら]の手順に従うことができます。

Cordovaプラグインはネイティブプラットフォームでのみ機能するため、AndroidまたはiOSプラットフォームをインストールする必要もあります。 これを行う方法については、環境設定の章ですでに説明しました。

AdMobプラグインは、コマンドプロンプトウィンドウにインストールできます。

C:\Users\Username\Desktop\MyApp> cordova plugin add cordova-plugin-admobpro

プラグインをインストールしたので、使用する前にデバイスの準備ができているかどうかを確認する必要があります。 これが、 app.js 内の $ ionicPlatform.ready 関数に次のコードを追加する必要がある理由です。

if( ionic.Platform.isAndroid() )  {
   admobid = {//for Android
      banner: 'ca-app-pub-xxx/xxx'//Change this to your Ad Unit Id for banner...
   };

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

出力は次のスクリーンショットのようになります。

Ionic Cordova Admob

同じコードをiOSまたはWindows Phoneに適用できます。 これらのプラットフォームには異なるIDのみを使用します。 バナーの代わりに、画面全体をカバーするインタースティシャル広告を使用できます。

AdMobメソッド

次の表に、admobで使用できるメソッドを示します。

Method	Parameters	Details
createBanner(parameter1, parameter2, parameter3)	adId/options, success, fail	Used for creating the banner.
removeBanner()	/	Used for removing the banner.
showBanner(parameter1)	position	Used for showing the banner.
showBannerAtXY(parameter1, parameter2)	x, y	Used for showing the banner at specified location.
hideBanner();	/	Used for hiding the banner.
prepareInterstitial(parameter1, parameter2, parameter3)	adId/options, success, fail	Used for preparing interstitial.
showInterstitial();	/	Used for showing interstitial.
setOptions(parameter1, parameter2, parameter3)	options, success, fail	Used for setting the default value for other methods.

AdMobイベント

次の表に、admobで使用できるイベントを示します。

Event	Details
onAdLoaded	Called when the ad is loaded.
onAdFailLoad	Called when the ad is failed to load.
onAdPresent	Called when the ad will be showed on screen.
onAdDismiss	Called when the ad is dismissed.
onAdLeaveApp	Called when the user leaves the app by clicking the ad.

以下の例に従って、これらのイベントを処理できます。

document.addEventListener('onAdLoaded', function(e){
  //Handle the event...
});