@nativescript/firebase-admob

此插件允许您通过将 Google 移动广告 SDK 集成到应用中来实现 NativeScript 应用的盈利。

注意

在使用此插件之前，如果您尚未设置，请按照 @nativescript/firebase-core 中的说明设置 Firebase 应用。

@nativescript/firebase-admob 插件目前支持加载和显示以下广告类型

横幅广告
插页式广告（全屏）
原生广告
激励视频广告

内容

安装
为 iOS 设置 Admob
为 Android 设置 Admob
使用 @nativescript/firebase-admob

安装

要安装 @nativescript/firebase-admob，请在项目根目录中运行以下命令

cli

npm install @nativescript/firebase-admob

为 iOS 设置 Admob

使用您的 AdMob 应用 ID（在 AdMob UI 中识别）更新 App_Resources/iOS 中的 Info.plist 文件，并在其中添加一个名为 GADApplicationIdentifier 的键，其字符串值为您的应用 ID。

xml

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>

有关配置 Info.plist 和设置应用 ID 的更多信息，请参阅更新您的 Info.plist。

为 Android 设置 Admob

将 AdMob 应用 ID（在 AdMob UI 中识别）添加到应用的 AndroidManifest.xml 文件中，该文件位于 App_Resources/Android/src/main 中。如果未执行此操作，应用启动时将发生崩溃。通过添加一个名为 com.google.android.gms.ads.APPLICATION_ID 的 <meta-data> 标签来添加 ID，如下所示。对于 android:value，请在引号中插入您自己的 AdMob 应用 ID。

xml

<application>
  <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
  <meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"
  />
</application>

有关配置 AndroidManifest.xml 和设置应用 ID 的更多信息，请参阅配置您的应用的步骤 3。

使用 @nativescript/firebase-admob

要使用 @nativescript/firebase-admob 插件，请按照以下步骤操作

1. 初始化移动广告 SDK

在加载广告之前，请通过调用 Admob 类上的静态 init 方法来初始化移动广告 SDK。在应用启动之前，最好在 main.ts 文件中调用此方法一次。

import { Admob } from '@nativescript/firebase-admob'

Admob.init()

2. 将您首选的广告格式添加到应用中

现在已导入移动广告 SDK，您可以开始实现广告了。点击以下任意链接，获取您所需广告格式的详细实施步骤。

横幅广告
插页式广告（全屏）
原生广告
激励视频广告

横幅广告是显示在设备屏幕顶部或底部的矩形广告。它们在用户与应用交互时始终显示在屏幕上，并且可以在一段时间后自动刷新。如果您是移动广告新手，横幅广告是一个不错的起点。

注意：在开发应用时，请确保使用测试广告，而不是实际的生产广告。否则可能会导致您的帐户被暂停。在发布应用之前，请确保将测试单元 ID 替换为您的广告单元 ID。

要为横幅启用专用的测试广告单元 ID，请访问以下链接

以下是几个 NativeScript 版本中添加横幅广告的示例。

在 Page 元素下使用前缀（例如 ui）注册插件命名空间，通过前缀从命名空间访问 BannerAd 视图，并将其添加到 XML 中。

BannerAd 需要设置以下属性

unitId
BannerAdSize：您可以在 layoutChanged 事件的回调函数中设置此值。有关更多信息，请参阅自定义横幅广告尺寸
height 和 width

xml

<Page xmlns:ui="@nativescript/firebase-admob" >

  <StackLayout>
    <ui:BannerAd
      height="100"
      width="100"
      unitId="{{bannerAdUnit}}"
      layoutChanged="{{bannerLoaded}}"
/>
  </StackLayout>

通过将 BannerAd 视图的 AdmobModule 添加到要使用该视图的组件的 @NgModule 装饰器的 imports 数组中来注册 BannerAd 视图。

import { AdmobModule } from '@nativescript/firebase-admob/angular';

@NgModule({
    imports: [
    AdmobModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

接下来，将 BannerAd 视图添加到 HTML 中。BannerAd 需要设置以下属性

unitId
BannerAdSize：您可以在 layoutChanged 事件的回调函数中设置此值。有关更多信息，请参阅自定义横幅广告尺寸
height 和 width

html

<BannerAd
  height="100"
  width="100"
  [unitId]="bannerAdUnit"
  (layoutChanged)="bannerLoaded($event)"
>
</BannerAd>

在 app.ts 文件中注册 BannerAd 视图，如下所示

import { createApp } from 'nativescript-vue'
import Admob from '@nativescript/firebase-admob/vue'
import Home from './components/Home.vue'

const app = createApp(Home)
app.use(Admob)

然后将其添加到标记中，如下所示。BannerAd 需要设置以下属性

unitId
BannerAdSize：您可以在 layoutChanged 事件的回调函数中设置此值。有关更多信息，请参阅自定义横幅广告尺寸
height 和 width

html

<BannerAd
  height="100"
  width="100"
  :unitId="bannerAdUnit"
  @layoutChanged="bannerLoaded"
/>

要定义自定义横幅广告尺寸，您可以选择以下两种方法

使用所需的宽度和高度实例化 BannerAdSize 类，并将其设置为 BannerAd 的 size 属性。

import { BannerAdSize } from '@nativescript/firebase-admob'

const adSize = new BannerAdSize(300, 50)

banner.size = adSize

将 size 设置为 BannerAdSize 类的任何常量。

下表列出了可用的常量及其表示的尺寸。

AdSize 常量	尺寸（单位：dp）（WxH）	描述
`BANNER`	`320x50`	标准横幅广告
`LARGE_BANNER`	`320x100`	大型横幅广告
`MEDIUM_RECTANGLE`	`320x250`	中等矩形
`FULL_BANNER`	`468x60`	全尺寸横幅广告
`LEADERBOARD`	`728x90`	排行榜
`createAnchoredAdaptiveBanner(width, orientation)`	提供的宽度 x 自适应高度	自适应横幅广告
`createInLineAdaptiveBanner(width, orientation)`	提供的宽度 x 自适应高度	自适应横幅广告

该插件使您能够监听广告的不同生命周期事件，例如广告加载时。在调用 load 方法之前注册事件处理程序。

const bannerView = event.object;

// Called when an ad is successfully received.
bannerView.on('adLoaded', (args) =>{
console.log('Ad loaded.'),
});

 // Called when an ad request failed.
bannerView.on('adFailedToLoad', (args) =>{
   console.log('Ad failed to load: ', args.error);
});

 // Called when the user removes an overlay that covers the screen.
bannerView.on('adClosed', (args) =>{
   console.log('Ad closed.');
});

 // Called when an impression occurs on the ad.
bannerView.on('adImpression', (args) =>{
   console.log('Ad impression.');
});

 // Called when an tap/touch/click occurs on the ad.
bannerView.on('adClicked', (args) =>{
   console.log('Ad tapped');
});

要向用户显示横幅广告，请获取 BannerAd 视图的引用，然后在其上调用 load 方法。

bannerView.load()

添加插页式广告

插页式广告是全屏广告，会覆盖应用的界面，直到用户关闭。它们最适合用在应用执行流程中的自然暂停点，例如游戏关卡之间或任务完成后。

在开发过程中测试插页式广告

注意：当您的应用处于开发模式时，请确保使用测试广告，而不是实际的生产广告。否则可能会导致您的帐户被暂停。在发布应用之前，请确保将测试单元 ID 替换为您的广告单元 ID。要启用专用的测试广告单元 ID，请访问以下链接

向用户展示插页式广告

要向用户展示插页式广告，请按照以下步骤操作

从 @nativescript/firebase-admob 中导入 InterstitialAd 类。

import { InterstitialAd } from '@nativescript/firebase-admob'

创建插页式广告实例。

通过在类上调用静态方法 createForAdRequest 来创建插页式广告实例。createForAdRequest 方法需要一个广告单元 ID，并且您可以选择性地传递一个 RequestOptions 对象。

import { InterstitialAd } from '@nativescript/firebase-admob'
const ad = InterstitialAd.createForAdRequest(
  'ca-app-pub-3940256099942544/4411468910'
)

监听广告生命周期事件

要监听广告生命周期事件（例如，广告何时显示或关闭），请在显示广告之前，在广告实例上调用 onAdEvent 方法，并向其传递一个回调函数来处理这些事件。

import { InterstitialAd } from '@nativescript/firebase-admob'
const ad = InterstitialAd.createForAdRequest(
  'ca-app-pub-3940256099942544/4411468910'
)

ad.onAdEvent((event, error, data) => {
  switch (event) {
    case AdEventType.LOADED:
      break
    case AdEventType.CLOSED:
      break
    case AdEventType.OPENED:
      break
    case AdEventType.IMPRESSION:
      break
    case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
      break
  }
})

加载广告通过在广告实例上调用 load 方法来加载广告。

import { InterstitialAd } from '@nativescript/firebase-admob'
const ad = InterstitialAd.createForAdRequest(
  'ca-app-pub-3940256099942544/4411468910'
)

ad.onAdEvent((event, error, data) => {
  switch (event) {
    case AdEventType.LOADED:
      break
    case AdEventType.CLOSED:
      break
    case AdEventType.OPENED:
      break
    case AdEventType.IMPRESSION:
      break
    case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
      break
  }
})

ad.load()

展示广告

要展示广告，请在广告实例上调用 show 方法。此方法是在 load 方法之后调用的。

import { InterstitialAd } from '@nativescript/firebase-admob'
const ad = InterstitialAd.createForAdRequest(
  'ca-app-pub-3940256099942544/4411468910'
)

ad.onAdEvent((event, error, data) => {
  switch (event) {
    case AdEventType.LOADED:
      break
    case AdEventType.CLOSED:
      ad.show()
      break
    case AdEventType.OPENED:
      break
    case AdEventType.IMPRESSION:
      break
    case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
      break
  }
})

ad.load()

后续步骤

请参阅插页式广告最佳实践和插页式广告指南。
查看插页式广告案例研究。
如果您尚未创建，请在 AdMob UI 中创建自己的插页式广告单元。

原生广告

原生广告是通过平台原生 UI 组件向用户展示的广告资源。它们使用与您构建布局时相同的视图类型显示，并且可以格式化为与其中包含的用户体验的视觉设计相匹配。从编码角度来看，这意味着当原生广告加载时，您的应用会收到一个包含其资源的 NativeAd 对象，然后应用（而不是 Google Mobile Ads SDK）负责显示它们。

在 NativeScript Core 中添加原生广告

要将原生广告添加到您的 {N} Core 应用中，请按照以下步骤操作

使用前缀 ui（可以是任何名称）在 Page 元素下注册插件命名空间。

xml

<Page xmlns:ui="@nativescript/firebase-admob" >

</Page>

使用前缀访问 NativeAdView 并将其添加到标记中。

xml

<Page xmlns:ui="@nativescript/firebase-admob" >
<ActionBar title="Admob" />
<StackLayout>

  <ui:NativeAdView height="400" loaded="{{nativeAdLoaded}}" />

</StackLayout>
</Page>

在开发模式下测试原生广告

注意：在开发应用时，请确保使用测试广告单元 ID 而不是实时生产广告。否则可能会导致您的帐户被暂停。只需确保在发布应用之前，将测试广告单元 ID 替换为您自己的广告单元 ID。

要启用专用的测试广告单元 ID，请访问以下链接

在视图模型文件中从 @nativescript/firebase-admob 导入 NativeAdLoader 类。

import { NativeAdLoader } from '@nativescript/firebase-admob'

NativeAdLoader 类是用于管理原生广告的接口。

实例化 NativeAdLoader。通过调用其构造函数来创建 NativeAdLoader 实例。构造函数接受 3 个参数。必需的 adUnitId 作为第一个参数，可选的 RequestOptions 和 NativeAdOptions 对象分别作为第二个和第三个参数。

const loader = new NativeAdLoader(
  'ca-app-pub-3940256099942544/3986624511',
  null,
  {
    nativeAdOptions: {
      adChoicesPlacement: AdChoicesPlacement.TOP_RIGHT,
    },
  }
)

监听原生广告生命周期事件

要监听原生广告生命周期事件，请在 NativeAdView 加载后，在 NativeAdLoader 实例上调用 onAdEvent 方法。

xml

<ui:NativeAdView height="400" loaded="{{ nativeAdLoaded }}">
  <GridLayout height="300" width="300">
    <Label id="headLineView" />
    <ui:MediaView id="mediaView" height="100%"/>
    <Label id="bodyView" />
    <Button id="callToActionView" />
  </GridLayout>
</ui:NativeAdView>

nativeAdLoaded(event){
const view = event.object;
loader.onAdEvent((event, error, data) => {
	if (event === NativeAdEventType.LOADED) {
		const ad = data as NativeAd;

		const headLineView = view.getViewById('headLineView');
		headLineView.text = ad.headline;
		const mediaView = view.getViewById('mediaView');
		view.mediaView = mediaView;
		mediaView.mediaContent = ad.mediaContent;
		const callToActionButton = view.getViewById('callToActionView');
		view.callToActionView = callToActionButton;
		callToActionButton.text = ad.callToAction;
		const bodyView = view.getViewById('bodyView');
		bodyView.text = ad.body;
		view.nativeAd = ad;
		console.log('nativead loaded');
	} else if (event === 'adFailedToLoad') {
		console.log('nativead failed to load', error);
	}
});
}

展示原生广告要展示原生广告，请在 NativeAdLoader 实例上调用 load 方法。

loader.load()

NativeAdOptions 接口

NativeAdOptions 对象用于在原生广告上设置以下选项。

属性	类型	描述
`returnUrlsForImageAssets`	`布尔值`	可选：如果设置为 `true`，则 SDK 不会加载图像资源内容，并且可以使用原生广告图像 URL 来获取内容。默认为 `false`。
`multipleImages`	`布尔值`	可选：某些图像资源包含一系列图像。将此属性设置为 `true` 会告诉应用显示资源的所有图像。`false`（默认值）值会通知应用显示图像资源中一系列图像中的第一张图像。
`adChoicesPlacement`	AdChoicesPlacement	可选：广告选择覆盖层默认设置为右上角。应用可以通过将此属性设置为以下之一来更改此覆盖层呈现的角。
`videoOptions`	videoOptions	可选：用于设置作为原生广告一部分返回的视频资源的视频选项。如果广告包含视频（如果 `ad.mediaContent.hasVideoContent = true`），则显示视频。
`mediaAspectRatio`	MediaAspectRatio	可选：这将设置要为原生广告返回的图像或视频的纵横比。

AdChoicesPlacement

enum AdChoicesPlacement {
  TOP_LEFT = 'topLeft',
  TOP_RIGHT = 'topRight',
  BOTTOM_RIGHT = 'bottomRight',
  BOTTOM_LEFT = 'bottomLeft',
}

videoOptions

videoOptions 属性是一个具有以下属性的对象

属性	类型	可选
`startMuted`	`布尔值`	是
`clickToExpandRequested`	`布尔值`	是
`customControlsRequested`	`布尔值`	是

MediaAspectRatio

enum MediaAspectRatio {
  LANDSCAPE = 'landscape',
  PORTRAIT = 'portrait',
  SQUARE = 'square',
  ANY = 'any',
}

就是这样！您的应用现在已准备好展示原生广告。

后续步骤

在我们的原生广告手册中了解更多关于原生广告的信息。
请参阅原生广告政策和指南，了解如何实施原生广告。
查看一些客户成功案例：案例研究 1，案例研究 2

激励广告

激励广告是用户可以选择与之交互的广告以换取应用内奖励。

在开发模式下测试激励广告

注意：在开发应用时，请确保使用测试广告，而不是实际的生产广告。否则可能会导致您的帐户被暂停。在发布应用之前，请确保将测试单元 ID 替换为您的广告单元 ID。

要启用专用的测试广告单元 ID，请访问以下链接

展示激励广告

请按照以下步骤展示激励广告

从 @nativescript/firebase-admob 中导入 RewardedAd 类。

import { RewardedAd } from '@nativescript/firebase-admob'

创建 RewardedAd 实例

通过在 RewardedAd 类上调用 createForAdRequest 静态方法并向其传递广告单元 ID 来创建激励广告实例。

import { RewardedAd } from '@nativescript/firebase-admob'
const ad = RewardedAd.createForAdRequest(
  'ca-app-pub-3940256099942544/1712485313'
)

监听广告生命周期事件在调用 load 方法加载广告之前，请调用 onAdEvent 方法并向其传递一个回调函数来处理广告事件。

import { RewardedAd } from '@nativescript/firebase-admob'
const ad = RewardedAd.createForAdRequest(
  'ca-app-pub-3940256099942544/1712485313'
)

ad.onAdEvent((event, error, data) => {
  if (event === AdEventType.LOADED) {
    console.log('rewarded', 'loaded')
  } else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
    console.error('loading error', error)
  }
})

加载广告要加载广告，请在 RewardAd 实例上调用 load 方法。

import { RewardedAd } from '@nativescript/firebase-admob'
const ad = RewardedAd.createForAdRequest(
  'ca-app-pub-3940256099942544/1712485313'
)

ad.onAdEvent((event, error, data) => {
  if (event === AdEventType.LOADED) {
    console.log('rewarded', 'loaded')
  } else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
    console.error('loading error', error)
  }
})
ad.load()

展示广告

要在屏幕上显示广告，请在广告实例上调用 show() 方法。

import { RewardedAd } from '@nativescript/firebase-admob'
const ad = RewardedAd.createForAdRequest(
  'ca-app-pub-3940256099942544/1712485313'
)

ad.onAdEvent((event, error, data) => {
  if (event === AdEventType.LOADED) {
    console.log('rewarded', 'loaded')
    ad.show()
  } else if (event === AdEventType.FAILED_TO_LOAD_EVENT) {
    console.error('loading error', error)
  }
})
ad.load()

激励广告事件

RewardAd 会发出以下您可以监听的生命周期事件

ad.onAdEvent((event, error, data) => {
  switch (event) {
    case AdEventType.LOADED:
      break
    case AdEventType.CLOSED:
      break
    case AdEventType.OPENED:
      break
    case AdEventType.IMPRESSION:
      break
    case AdEventType.FAILED_TO_SHOW_FULL_SCREEN_CONTENT:
      break
  }
})

当用户获得奖励时，会调用 onAdEvent 以及事件 rewarded_earned_reward。请务必实现此功能，并在用户观看广告后对其进行奖励。

定向

RequestConfiguration 对象收集每个广告请求的全局配置，并由 firebase().admob().setRequestConfiguration() 应用。

面向儿童的广告设置

有关面向儿童的广告设置，请阅读面向儿童的设置。

以下示例表示您希望将您的内容视为面向儿童的，以便于 COPPA 的目的

import { Admob, RequestConfiguration } from '@nativescript/firebase-admob'
const requestConfiguration: RequestConfiguration = {
  tagForChildDirectedTreatment: true,
}
Admob.getInstance().requestConfiguration = requestConfiguration

要处理未满同意年龄的用户的广告请求，请阅读未满同意年龄的用户。

以下示例表示您希望在广告请求中包含 TFUA。

import { Admob, RequestConfiguration } from '@nativescript/firebase-admob'
const requestConfiguration: RequestConfiguration = {
  tagForUnderAgeOfConsent: true,
}
Admob.getInstance().requestConfiguration = requestConfiguration

如果启用面向儿童的设置的标签和 tagForUnderAgeOfConsent 都设置为 true，则面向儿童的设置优先。

广告内容过滤

此设置可以通过 RequestConfiguration.maxAdContentRating 设置

为这些请求返回的 AdMob 广告的内容评级等于或低于该级别。此网络额外内容的可能值基于数字内容标签分类，并且应该是以下 MaxAdContentRating 对象之一

MaxAdContentRating.G
MaxAdContentRating.PG
MaxAdContentRating.T
MaxAdContentRating.MA

以下代码配置一个 RequestConfiguration 对象，以指定返回的广告内容应对应于不高于 G 的数字内容标签指定

import {
  Admob,
  MaxAdContentRating,
  RequestConfiguration,
} from '@nativescript/firebase-admob'
const requestConfiguration: RequestConfiguration = {
  maxAdContentRating: MaxAdContentRating.G,
}
Admob.getInstance().requestConfiguration = requestConfiguration

许可证

Apache 许可证版本 2.0

Admob

@nativescript/firebase-admob

内容

安装

为 iOS 设置 Admob

为 Android 设置 Admob

使用 @nativescript/firebase-admob

1. 初始化移动广告 SDK

2. 将您首选的广告格式添加到应用中

横幅广告

在开发模式下测试横幅广告

在 NativeScript Core 中添加横幅广告

在 NativeScript Angular 中添加横幅广告

在 NativeScript Vue 中添加横幅广告

自定义横幅广告尺寸

监听横幅广告生命周期事件

向用户显示横幅广告

添加插页式广告

在开发过程中测试插页式广告

向用户展示插页式广告

后续步骤

原生广告

在 NativeScript Core 中添加原生广告

在开发模式下测试原生广告

NativeAdOptions 接口

AdChoicesPlacement

videoOptions

MediaAspectRatio

后续步骤

激励广告

在开发模式下测试激励广告

展示激励广告

激励广告事件

定向

面向儿童的广告设置

广告内容过滤

许可证

贡献者

@nativescript/firebase-admob ​

内容 ​

安装 ​

为 iOS 设置 Admob ​

为 Android 设置 Admob ​

使用 @nativescript/firebase-admob ​

1. 初始化移动广告 SDK ​

2. 将您首选的广告格式添加到应用中 ​

横幅广告 ​

在开发模式下测试横幅广告 ​

在 NativeScript Core 中添加横幅广告 ​

在 NativeScript Angular 中添加横幅广告 ​

在 NativeScript Vue 中添加横幅广告 ​

自定义横幅广告尺寸 ​

监听横幅广告生命周期事件 ​

向用户显示横幅广告 ​

添加插页式广告 ​

在开发过程中测试插页式广告 ​

向用户展示插页式广告 ​

后续步骤 ​

原生广告 ​

在 NativeScript Core 中添加原生广告 ​

在开发模式下测试原生广告 ​

NativeAdOptions 接口 ​

AdChoicesPlacement ​

videoOptions ​

MediaAspectRatio ​

后续步骤 ​

激励广告 ​

在开发模式下测试激励广告 ​

展示激励广告 ​

激励广告事件 ​

定向 ​

面向儿童的广告设置 ​

处理未满同意年龄的用户的广告请求 ​

广告内容过滤 ​

许可证 ​

贡献者

@nativescript/firebase-admob

内容

安装

为 iOS 设置 Admob

为 Android 设置 Admob

使用 @nativescript/firebase-admob

1. 初始化移动广告 SDK

2. 将您首选的广告格式添加到应用中

横幅广告

在开发模式下测试横幅广告

在 NativeScript Core 中添加横幅广告

在 NativeScript Angular 中添加横幅广告

在 NativeScript Vue 中添加横幅广告

自定义横幅广告尺寸

监听横幅广告生命周期事件

向用户显示横幅广告

添加插页式广告

在开发过程中测试插页式广告

向用户展示插页式广告

后续步骤

原生广告

在 NativeScript Core 中添加原生广告

在开发模式下测试原生广告

NativeAdOptions 接口

AdChoicesPlacement

videoOptions

MediaAspectRatio

后续步骤

激励广告

在开发模式下测试激励广告

展示激励广告

激励广告事件

定向

面向儿童的广告设置

处理未满同意年龄的用户的广告请求

广告内容过滤

许可证