vivo快应用原生广告接口迁移指南

快应用教程 May 27, 2021

此次接口迁移的目的是收回原生广告的自定义点击能力,统一用<ad-click-button></ad-click-button> 组件触发广告点击。迁移的生效范围限定为vivo平台。

此次接口迁移涉及接口为ad.createNativeAd,可按照下面步骤进行接口迁移。

  • 替换ad.createNativeAd接口为ad.createNativeComponentAd
  • 替换广告点击区域为<ad-click-button></ad-click-button>组件

下面举例来说明迁移的方法:

<template>
  <div class="wrap" onclick="reportAdClick(adList[0].adId)">
    <div class="ad"> // 绑定广告点击区域
      <image src="{{adList[0].imgUrlList[0]}}" oncomplete="reportAdShow(adList[0].adId)" alt="ad"></image>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      adList: []
    }
  },
  async onInit() {
    this.ad = await require("@service.ad").createNativeAd({
      adUnitId: this.adUnitId
    });
    this.ad.onLoad((res) => {
      this.adList = res.adList; // 监听广告资源
    })
    this.ad.load();
  },
  
  reportAdClick(adId) {
    this.ad.reportAdClick({ adId }); // 上报广告点击
  },
  reportAdShow(adId) {
    if (this.adList.length === 0) return;
    this.ad.reportAdShow({ adId }); // 上报广告展现
  },
}
</script>

这是一个原生广告原本的调用方法,可以通过如下方式,快速切换为点击组件广告:

<template>
  <div class="wrap">
    <div class="ad"> // 绑定广告点击区域
      <image src="{{adList[0].imgUrlList[0]}}" oncomplete="reportAdShow(adList[0].adId)" alt="ad"></image>
      <ad-click-button adid="{{adList[0].adId}}"></ad-click-button> // 增加广告点击按钮组件,传入广告adId
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      adList: []
    }
  },
  async onInit() {
    this.ad = await require("@service.ad").createNativeComponentAd({
      adUnitId: this.adUnitId
    });
    this.ad.onLoad((res) => {
      this.adList = res.adList; // 监听广告资源
    })
    this.ad.load();
  },
  reportAdShow(adId) {
    if (this.adList.length === 0) return;
    this.ad.reportAdShow({ adId }); // 上报广告展现
  },
}
</script>

这里最主要的区别在于增加了广告点击按钮,所以迁移的时候需要适配按钮的UI。vivo这边有推荐的样式可供参考。

v20210603-101818

v20210603-101750

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.