跳转至正文

AdMob Capacitor 插件

通过 Google AdMob 横幅广告、插屏广告和激励视频广告实现应用变现

安装

bun add @capgo/capacitor-admob bunx cap sync
npm、pnpm 或 yarn
  • npm install @capgo/capacitor-admob
  • pnpm add @capgo/capacitor-admob
  • yarn add @capgo/capacitor-admob

指南

如何在 Capacitor 中使用 AdMob

使用 @capgo/capacitor-admob

AdMob Plus 插件,用于在 Capacitor 应用中展示 Google AdMob 广告。

安装

bun add @capgo/capacitor-admob
bunx cap sync

bunx cap sync 将插件的原生 code 复制到你的原生项目中。每次升级插件后都要重新运行。

导入

import { AdMob } from '@capgo/capacitor-admob';

API 概览

方法 描述
start 初始化并启动 AdMob SDK。
configure 配置 AdMob 设置。
configRequest 配置广告请求设置。
adCreate 创建一个新的广告实例。
adIsLoaded 检查广告是否已加载并准备好显示。
adLoad 加载广告。
adShow 展示已加载的广告。
adHide 隐藏当前显示的广告。
trackingAuthorizationStatus 获取当前的追踪授权状态 (仅限 iOS)。
requestTrackingAuthorization 向用户请求追踪授权 (仅限 iOS)。

示例

start()

初始化并启动 AdMob SDK。

import { AdMob } from '@capgo/capacitor-admob';

await AdMob.start();

configure()

配置 AdMob 设置。

import { AdMob } from '@capgo/capacitor-admob';

await AdMob.configure({
  appMuted: false,
  appVolume: 0.5
});

configRequest()

配置广告请求设置。

import { AdMob, MaxAdContentRating } from '@capgo/capacitor-admob';

await AdMob.configRequest({
  maxAdContentRating: MaxAdContentRating.PG,
  tagForChildDirectedTreatment: true,
  testDeviceIds: ['test-device-id']
});

adCreate()

创建一个新的广告实例。

import { AdMob } from '@capgo/capacitor-admob';

await AdMob.adCreate({
  adUnitId: 'ca-app-pub-3940256099942544/1033173712'
});

adIsLoaded()

检查广告是否已加载并准备好显示。

import { AdMob } from '@capgo/capacitor-admob';

const isLoaded = await AdMob.adIsLoaded({ id: 1 });
if (isLoaded) {
  await AdMob.adShow({ id: 1 });
}

adLoad()

加载广告。

import { AdMob } from '@capgo/capacitor-admob';

await AdMob.adLoad({ id: 1 });

上表列出了 10 个核心方法。监听器、版本辅助函数以及每个方法的完整接口定义,请参阅 GitHub 仓库.

监听事件

addListener 会返回一个句柄。调用 handle.remove() 当屏幕卸载时。

完整参考文档

从“使用 @capgo/capacitor-admob”继续

如果你正在使用 使用 @capgo/capacitor-admob 要规划原生插件工作,请将其与 @capgo/capacitor-admob 有关 @capgo/capacitor-admob 的实现细节, 快速入门 有关“入门指南”中的实现细节, Capgo 插件目录 查看 Capgo 插件目录中的产品工作流, Capgo 提供的 Capacitor 插件 有关 Capgo 开发的 Capacitor 插件的实现细节,以及 添加或更新插件 有关添加或更新插件的实现细节。

常见问题

AdMob 插件常见问题

如何在 Capacitor 应用中安装 AdMob 插件?

运行 "bun add @capgo/capacitor-admob" (或 "npm install @capgo/capacitor-admob"),然后运行 "bunx cap sync",使 iOS 和 Android 项目同步 native code。最后在你的应用 code 中从 "@capgo/capacitor-admob" 导入即可。

@capgo/capacitor-admob 是否支持 React、Vue 和 Angular?

是的。AdMob 是一个 Capacitor 插件,因此它可以与任何在 Capacitor 中运行的 Web 框架配合使用,包括 Ionic、React、Vue、Angular、Svelte 以及原生 JavaScript。

@capgo/capacitor-admob 支持哪个版本的 Capacitor?

Capgo 插件遵循 Capacitor 的主版本号:请使用与 Capacitor 主版本号一致的插件主版本(例如插件 v8 对应 Capacitor 8)。GitHub README 中的兼容性表列出了仍在维护的版本。

@capgo/capacitor-admob 是免费开源的吗?

是的。code 的源代码已在 GitHub 上公开,地址为 https://github.com/Cap-go/capacitor-admob/,并且可以从 npm 免费安装。欢迎提交 Bug 报告和 Pull Request。

我可以在无需经过 App Store 审核的情况下,更新使用 AdMob 的 code 吗?

安装或升级插件会改动原生 code,因此需要重新做一次商店构建。之后,调用该插件的 JavaScript、HTML 和 CSS 改动就能通过 Capgo live updates 立即发布。

无需等待应用审核,即可即时发布 AdMob 更新

只要插件已包含在你的商店版本中,Capgo live updates 就能在几分钟内把 JavaScript、HTML 和 CSS 的改动推送给用户。

开始使用 Capgo