菜单

插屏广告接入及API说明

插屏广告接入

1. 插屏广告介绍

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

2. 插屏广告集成说明

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

java 复制代码

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

 2.通过在布局中使用AMPSBuildInterstitialView直接加载

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	获取竞价
notifyRTBWin	竞价成功上报
notifyRTBLoss	竞价失败上报

3.1.3 AMPSBuildInterstitialView 使用说明

AMPSBuildInterstitialView 是通过组件形式直接在布局中显示方式。结合Stack层叠布局达到弹窗效果。

1.通过AMPSBuildInterstitialView开发者在布局中利用Stack自行根据回调显示和关闭控制。

typeScript 复制代码

  build() {
    Stack() {
      Scroll() {
        Column({ space: 10 }) {
          Text("页面显示内容")
        }
         
      }
      .height('100%')
      .padding({ top: 50 })
      //通过AMPSBuildInterstitialView显示插屏内容
      if (this.showFlag) {
        AMPSBuildInterstitialView(this.interAd)
      }
    }
  }

2.在回调方法 onRenderOk 中设置showFlag 为 true，刷新页面显示广告。在关闭回调中监听关闭，通过showFlag状态移除广告组件。

typeScript 复制代码

 onRenderOk: (): void => { 
  this.showFlag = true
},
onAdClosed: (): void => {
  this.showFlag = false
  }

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	插屏广告关闭
onVideoPlayStart?: () => void	插屏素材视频播放开始
onVideoPlayEnd?: () => void	插屏视频素材播放结束
onVideoPlayError?: () => void	插屏视频素材播放异常
onVideoSkipToEnd?: () => void	插屏视频素材跳到结束

4. 插屏广告代码示例

广告加载与显示：

TypeScript 复制代码

@Entry
@Component
struct InterstitialPage {
  spaceId: string = TextIds.AMPS_SPACE_ID_INTERSTITIAL
  @State showAd: boolean = false
  @State isLoading: boolean = false
  pathStack: NavPathStack = new NavPathStack()
  callback: ampsAd.CallBack = {
    onLoadSuccess: (): void => {
      console.log('-----InterstitialPage-onLoadSuccess------')
    },
    onLoadFailure: (code: number, message: string): void => {
      console.log('-----InterstitialPage-onLoadFailure:'+ message)
      promptAction.showToast({ message: `${message}:code=${code}` })
    },
    onRenderOk: (): void => {
      console.log('-----InterstitialPage-onRenderOk------')
      //方式一
      if (this.interAd.hasSHowAdMethod()) {
        this.interAd.showAd({ windowStage: EntryAbility.windowStage,uiContext:this.getUIContext() })
      } else {
        //方式二
        this.showAd = true
      }

    },
    onAdShow: (): void => {
      console.log('-----InterstitialPage-onAdShow------')
    },
    onAdExposure: (): void => {
      console.log('-----InterstitialPage-onAdExposure------')
    },
    onAdClicked: (): void => {
      console.log('-----InterstitialPage-onAdClicked------')
    },
    onAdClosed: (): void => {
      this.showAd = false
      console.log('-----InterstitialPage-onAdClosed------')
    },
    onVideoPlayStart(){
      console.log('-----InterstitialPage-onVideoPlayStart------')
    },
    onVideoPlayEnd(){
      console.log('-----InterstitialPage-onVideoPlayEnd------')
    },
    onVideoPlayError(){
      console.log('-----InterstitialPage-onVideoPlayError------')
    },
    onVideoSkipToEnd(){
      console.log('-----InterstitialPage-onVideoSkipToEnd------')
    }

  }


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

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

  build() {
    Stack() {
      Column() {

        Row() {
          Button("返回")
            .fontColor(Color.Black)
            .fontSize(22)
            .align(Alignment.BottomStart)
            .backgroundColor(Color.Transparent)
            .onClick(() => {
              router.back()
            })
        }
        .alignItems(VerticalAlign.Bottom)
        .width('100%')
        .height("60")

        Column({ space: 10 }) {
          Row({ space: 5 }) {
            Text("spaceId:")
            TextInput({ placeholder: '请输入spaceId', text: $$this.spaceId }).layoutWeight(1)
          }
          .width('80%')

          if (this.isLoading) {
            Text("广告加载中。。。")
          } else {
            Button('加载插屏广告')
              .onClick(() => {
                this.requestInterAd()
              })
          }

        }
        .justifyContent(FlexAlign.Center)
        .layoutWeight(1)
        .width('100%')
      }
      if (this.showAd) {
        Column() {
          Stack() {
            AMPSBuildInterstitialView(this.interAd)
          }
          .flexGrow(1)
          .width('100%')
          .height("100%")
        }
        .width("100%")
        .height("100%")
      }
    }
  }
}

5. 插屏广告注意事项

插屏广告加载必须在 SDK 初始化完成之后。
广告数据准备成功（onRenderOk）之后，再调用 showAd 方法或者通过Stack方式通过 AMPSBuildInterstitialView组件进行显示。

上一个

开屏广告接入及API说明

下一个

原生(模板)广告接入及API说明

最近修改: 2025-06-10

大纲