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

此次接口迁移的目的是收回原生广告的自定义点击能力，统一用<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这边有推荐的样式可供参考。