为保证快应用广告组件，不被恶意滥用；vivo 平台有对快应用广告接口有做部分迁移。主要涉及是：收回原生广告的自定义点击能力，统一用 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 这边有推荐的样式可供参考。
