菜单

4、插屏广告接入及API说明

插屏广告接入

1. 插屏广告介绍

插屏广告是 app 运行时，以弹窗显示的一种广告形式。

2. 插屏广告集成说明

插屏对象可以重复请求，广告请求成功后，未调用显示前不要重复拉取；
广告关闭后可再次调用 loadAd 后会重新拉取广告。
提供两种集成方式

java 复制代码

 1.通过AMPSInterstitialAd的showAd方法弹窗显示广告

 2.通过NavPathStack的pushDestinationByName方式显示
    eg：this.pathStack.pushDestinationByName(AMPSInterstitialAd.dialogName, true)

3. 插屏广告 API 说明

3.1 AMPSInterstitialAd 创建参数说明

3.1.1 ampsAd.AdOptions 属性说明

属性	说明	必须
spaceId	广告位 ID	是
apiKey	商户 ID	否
timeoutInterval	拉取广告超时时间	否

3.1.2 AMPSInterstitialAd 方法说明

方法	说明
constructor(option: ampsAd.AdOptions, callBack: ampsAd.CallBack)	构造方法创建广告对象，option 参数配置，callBack：回调方法集
loadAd	广告请求
showAd	通过弹窗形式展示广告，参数传当前组件 this
getECPM	获取竞价
notifyBidWin	竞价成功上报
notifyBidLose	竞价失败上报

3.1.3 AMPSInterstitialNavDestinationView 使用说明

将 AMPSInterstitialNavDestinationView 是通过 NavPathStack 的 pushDestinationByName 展示广告

1.创建 pathStack 属性对象，pathStack: NavPathStack = new NavPathStack()

2.创建 NavDestination 组件的 builder 方法添加 AMPSInterstitialNavDestinationView

typeScript 复制代码

 @Builder pageMap(name: string) {
  if (name === AMPSInterstitialAd.dialogName) { 
    AMPSInterstitialNavDestinationView({ ad: this.interAd, pathStack: this.pathStack })
  } 
}

3.添加 navigation 组件绑定 pathStack

typeScript 复制代码

 Navigation(this.pathStack) {
 //。。。
 }.navDestination(this.pageMap)

4.在回调方法 onRenderOk 中调用 pushDestinationByName

typeScript 复制代码

 onRenderOk: (): void => { 
  this.pathStack.pushDestinationByName(AMPSInterstitialAd.dialogName, true) 
},

3.1.4 ampsAd.CallBack 回调方法说明

方法	说明
onLoadSuccess?: () => void	插屏广告加载成功
onLoadFailure?: (code: number, message: string) => void	插屏广告加载失败
onRenderOk?: () => void	插屏广告渲染数据准备成功
onRenderFailure?: () => void	插屏广告渲染数据准备失败
onAdShown?: () => void	插屏广告显示
onAdExposure?: () => void	插屏广告曝光
onAdClicked?: () => void	插屏广告点击
onAdClosed?: () => void	插屏广告关闭
onOpenLandingPage?: () => void	插屏广告弹出落地页
onCloseLandingPage?: () => void	插屏广告落地页关闭

4. 插屏广告代码示例

广告加载与显示：

TypeScript 复制代码

import { ampsAd, AMPSInterstitialAd, AMPSInterstitialNavDestinationView } from 'amps';
import { promptAction } from '@kit.ArkUI';
import { apiKey } from '../entryability/EntryAbility';

@Entry
@Component
struct InterstitialPage {
  @State spaceId: string = '111502';
  navigationDialog: boolean = false


  pathStack: NavPathStack = new NavPathStack()
  @Builder
  pageMap(name: string) {
    if (name === AMPSInterstitialAd.dialogName) {
      AMPSInterstitialNavDestinationView({ ad: this.interAd, pathStack: this.pathStack })
    }
  }
  callback: ampsAd.CallBack = {
    onLoadSuccess: (): void => {
    },
    onLoadFailure: (code: number, message: string): void => {
      promptAction.showToast({message:message})
    },
    onRenderOk: (): void => {
      if (this.navigationDialog) {
        this.pathStack.pushDestinationByName(AMPSInterstitialAd.dialogName, true)
      } else {
        this.interAd.showAd(this.getUIContext())
      }

    },
    onAdShown: (): void => {
    },
    onAdExposure: (): void => {
    },
    onAdClicked: (): void => {

    },
    onAdClosed: (): void => {
    },
    onOpenLandingPage: (): void => {

    },
    onCloseLandingPage: (): void =>{

    }
  }
  interAd: AMPSInterstitialAd = new AMPSInterstitialAd({
    apiKey: apiKey,
    spaceId: this.spaceId,
  }, this.callback)

  requestInterAd() {

    this.interAd.option.spaceId = this.spaceId
    this.interAd.load()
  }
  build() {
    Navigation(this.pathStack) {
      Column({ space: 10 }) {

        Row({space:5}){
          Text("spaceId:")
          TextInput({placeholder: '请输入spaceId',text:$$this.spaceId}).layoutWeight(1)
        }
        .width('80%')
        Button('插屏广告弹窗')
          .onClick(() => {
            this.navigationDialog = false
            this.requestInterAd()
          })

        Button('插屏广告-navigation弹窗')
          .onClick(() => {
            this.navigationDialog = true
            this.requestInterAd()
          })
      }

      .justifyContent(FlexAlign.Center)
      .height('100%')
      .width('100%')
    }.navDestination(this.pageMap)
  }
}

5. 插屏广告注意事项

插屏广告加载必须在 SDK 初始化完成之后。
广告数据准备成功（onRenderOk）之后，再调用 showAd 方法或者 pathStack.pushDestinationByName。

上一个

3、开屏广告接入及API说明

下一个

5、原生广告接入及API说明

最近修改: 2025-04-10

大纲