Ionic - Cordova AdMob

Cordova AdMob 外掛用於本地整合廣告。在本節中，我們將使用admobpro外掛，因為admob已棄用。

使用 AdMob

要在您的應用中使用廣告，您需要註冊 AdMob 並建立一個橫幅廣告。這樣做後，您將獲得一個廣告發布者 ID。由於這些步驟不是 Ionic 框架的一部分，因此我們不會在這裡解釋。您可以按照 Google 支援團隊的步驟操作此處。

您還需要安裝 Android 或 iOS 平臺，因為 Cordova 外掛僅在原生平臺上有效。我們已經在環境搭建章節中討論瞭如何執行此操作。

可以在命令提示符視窗中安裝 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
      } );
}

輸出將如下面的螢幕截圖所示。

相同的程式碼可以應用於 iOS 或 Windows Phone。您只需要為這些平臺使用不同的 ID。除了橫幅廣告外，您還可以使用覆蓋整個螢幕的插屏廣告。

AdMob 方法

下表顯示了可與 AdMob 一起使用的方法。

方法	引數	詳情
createBanner(parameter1, parameter2, parameter3)	adId/options, success, fail	用於建立橫幅廣告。
removeBanner()	/	用於移除橫幅廣告。
showBanner(parameter1)	position	用於顯示橫幅廣告。
showBannerAtXY(parameter1, parameter2)	x, y	用於在指定位置顯示橫幅廣告。
hideBanner();	/	用於隱藏橫幅廣告。
prepareInterstitial(parameter1, parameter2, parameter3)	adId/options, success, fail	用於準備插屏廣告。
showInterstitial();	/	用於顯示插屏廣告。
setOptions(parameter1, parameter2, parameter3)	options, success, fail	用於設定其他方法的預設值。

AdMob 事件

下表顯示了可與 AdMob 一起使用的事件。

事件	詳情
onAdLoaded	廣告載入時呼叫。
onAdFailLoad	廣告載入失敗時呼叫。
onAdPresent	廣告將要顯示在螢幕上時呼叫。
onAdDismiss	廣告被關閉時呼叫。
onAdLeaveApp	使用者點選廣告離開應用時呼叫。

您可以按照以下示例處理這些事件。

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

列印頁面