- 离子基础教程
- 离子 - 主页
- 离子 - 概述
- Ionic - 环境设置
- Ionic CSS 组件
- 离子 - 颜色
- 离子 - 内容
- 离子 - 标头
- 离子 - 页脚
- 离子 - 按钮
- Ionic - 列表
- 离子 - 卡片
- 离子 - 形式
- 离子 - 切换
- Ionic - 复选框
- Ionic - 单选按钮
- 离子 - 范围
- 离子 - 选择
- Ionic - 选项卡
- 离子 - 网格
- 离子 - 图标
- 离子 - 填充
- Ionic JavaScript 组件
- Ionic - JS 操作表
- Ionic - JS 背景
- Ionic - JS 内容
- Ionic - JS 表单
- Ionic - JS 事件
- Ionic - JS 标头
- Ionic - JS 页脚
- Ionic - JS 键盘
- Ionic - JS 列表
- Ionic - JS 加载
- Ionic - JS 模态
- Ionic - JS 导航
- Ionic - JS 弹出窗口
- Ionic - JS 弹出窗口
- Ionic - JS 滚动
- Ionic - JS 侧边菜单
- Ionic - JS 幻灯片盒
- Ionic - JS 选项卡
- 离子先进概念
- Ionic - Cordova 集成
- 离子 - AdMob
- 离子 - 相机
- 离子 - Facebook
- Ionic - 在应用程序浏览器中
- Ionic - 原生音频
- 离子 - 地理定位
- 离子 - 媒体
- Ionic - 启动画面
- 离子有用资源
- 离子 - 快速指南
- 离子 - 有用的资源
- 离子 - 讨论
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 } ); }
输出将如以下屏幕截图所示。
相同的代码可应用于 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... });