Ionic - Cordova AdMob


Cordova AdMob 插件用于原生集成广告。由于 admob 已被弃用,因此我们将在本章中使用admobpro插件。

使用 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
      } );
}

输出将如以下屏幕截图所示。

离子科尔多瓦 Admob

相同的代码可应用于 iOS 或 Windows Phone。您只会为这些平台使用不同的 ID。您可以使用覆盖整个屏幕的插页式广告来代替横幅。

AdMob 方法

下表显示了可与 admob 一起使用的方法。

方法 参数 细节
创建横幅(参数1,参数2,参数3) adId/选项,成功,失败 用于创建横幅。
删除横幅() / 用于移除横幅。
显示横幅(参数1) 位置 用于展示横幅。
showBannerAtXY(参数1, 参数2) x、y 用于在指定位置显示横幅。
隐藏横幅(); / 用于隐藏横幅。
准备间质性(参数1,参数2,参数3) adId/选项,成功,失败 用于准备插页式广告。
显示插页式广告(); / 用于显示插页式广告。
setOptions(参数1,参数2,参数3) 选项,成功,失败 用于设置其他方法的默认值。

AdMob 活动

下表显示了可与 admob 一起使用的事件。

事件 细节
广告加载时 广告加载时调用。
广告失败加载 广告加载失败时调用。
广告呈现 当广告将在屏幕上显示时调用。
广告关闭时 广告被关闭时调用。
广告离开应用程序 当用户通过点击广告离开应用程序时调用。

您可以按照以下示例处理这些事件。

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