【关键词】

原生广告、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)

    }