【关键词】
原生广告、adbutton、下载
【问题背景】
快应用中的原生广告推出了adbutton组件来直接下载广告app，在使用的时候，点击adbutton按钮的安装文案，不是直接下载广告app，而是跳转到落地页后直接下载，这种情形该如何解决？
相关代码：
<template>
<!-- Only one root node is allowed in template. -->
<div class="container">
<div class="item-container">
<input class="input-text" placeholder="请输入slotid" onchange="setProductIdValue"></input>
<input type="button" class="btn" value="加载并展示原生广告" onclick="showNativeAd()" />
<ad-button if="native.isShowImg" class="adbutton" adunitid="{
{native.adUnitId}}" adid="{
{native.adData.adId}}" open-type="1" valuetype="1" onclick="onAdButtonClick()"></ad-button>
<div if="native.isShow" class="container">
<stack>
<video id="video" if="native.isShowVideo" src="{
{native.adVideoSrc}}" autoplay="true" onclick="reportNativeClick()" class="ad-video"></video>
<image if="native.isShowImg" src="{
{native.adImgSrc}}" onclick="reportNativeClick()"></image>
</stack>
<text if="native.isShowData">{
{ native.adData }}</text>
<text if="native.errStr">{
{ native.errStr }}</text>
<text if="native.isShowDesc">{
{ native.desc }}</text>
</div>
</div>
</div>
</template>
<style>
.container {
flex: 1;
flex-direction: column;
}
.input-text {
height: 80px;
line-height: 80px;
padding-left: 30px;
padding-right: 30px;
margin-left: 30px;
margin-right: 30px;
border-top-width: 1px;
border-bottom-width: 1px;
border-color: #999999;
font-size: 30px;
background-color: #ffffff;
}
.adbutton {
height: 100px;
width: 600px;
text-align: center;
margin-right: 60px;
margin-left: 60px;
margin-bottom: 50px;
font-size: 30px;
background-color: rgba(176, 14, 136, 0.6);
color: rgba(52, 92, 65, 0.945);
border-radius: 88;
opacity: 0.9;
progressbar-color: rgba(51, 10, 89, 0.931415926);
progressbar-text-color: #8b0000;
progressbar-background-color: hsl(001, 65%, 075%);
}
.btn {
height: 80px;
text-align: center;
border-radius: 5px;
margin-right: 60px;
margin-left: 60px;
margin-bottom: 50px;
color: #ffffff;
font-size: 30px;
background-color: #0faeff;
}
.item-container {
margin-top: 50px;
margin-right: 60px;
margin-left: 60px;
flex-direction: column;
align-items: center;
}
image {
width: 100%;
}
.ad-video {
object-fit: contain;
width: 100%;
height: 415px;
}
</style>
<script>
import ad from '@service.ad'
let nativeAd
export default {
componentName: 'ad',
provider: '',
data: {
native: {
adUnitId: 'testb65czjivt9',
isShow: 'false',
adData: {},
isShowImg: false,
isShowVideo: false,
isShowData: false,
isShowDesc: false,
errStr: '',
adImgSrc: '',
adImgSrc1: '',
adImgSrc2: '',
adVideoSrc: ''
}
},
hideAll() {
this.native.isShow = false
this.native.isShowImg = false
this.native.isShowVideo = false
this.native.isShowDesc = false
},
showNativeAd() {
nativeAd = ad.createNativeAd({ adUnitId: this.native.adUnitId })
nativeAd.onLoad((data) => {
console.info('ad data loaded: ' + JSON.stringify(data))
this.native.adData = data.adList[0]
if (this.native.adData) {
if (this.native.adData.imgUrlList) {
this.native.adImgSrc = this.native.adData.imgUrlList[0]
this.native.isShowImg = true
} else {
this.native.isShowImg = false
this.native.adImgSrc = ''
}
if (this.native.adData.desc) {
this.native.desc = this.native.adData.desc
this.native.isShowDesc = true
}
let showVideoFlag = false
if (this.native.adData.videoUrlList && this.native.adData.videoUrlList[0]) {
this.native.adVideoSrc = this.native.adData.videoUrlList[0]
showVideoFlag = true
} else {
this.native.isShowVideo = false
this.native.adVideoSrc = ''
}
if (this.native.isShowImg && showVideoFlag) {
setTimeout(() => {
this.native.isShowVideo = true
this.native.isShowImg = false
}, 1000)
}
}
this.native.isShow = true
this.native.errStr = ''
})
nativeAd.onError((e) => {
console.error('load ad error:' + JSON.stringify(e))
this.native.isShowImg = false
this.native.isShowVideo = false
})
nativeAd.load()
},
reportNativeClick() {
nativeAd.reportAdClick({
'adId': this.native.adData.adId
})
},
setProductIdValue: function (e) {
this.native.adUnitId = e.value
},
onAdButtonClick(event) {
console.error('result code is : ', event.resultCode)
nativeAd.reportAdClick({
'adId': this.native.adData.adId
})
}
}
</script>【问题分析】
可以看到adbutton的点击事件是onAdButtonClick控制的，在点击时进行了一个上报广告点击，看起来是没有任何问题的。实则是不对的因为该接口除了一个上报广告点击的功能外，还有一个额外的作用就是跳转到广告落地页，这个我们可以在原生广告使用时就可以看出来。
再看下adbutton的描述：
描述里是用来下载广告主app的，所以当在adbutton点击后调用reportadclick进行上报的时候看到的就是跳转落地页并下载了。
【解决方法】
去掉adbutton中的上报广告点击调用，此按钮是用来进行下载和打开广告主app的。
onAdButtonClick(event) {
console.error('result code is : ', event.resultCode)
}