【快应用】adbutton如何直接下载广告而不跳落地页再下载

这篇具有很好参考价值的文章主要介绍了【快应用】adbutton如何直接下载广告而不跳落地页再下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 【关键词】

原生广告、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的。文章来源地址https://www.toymoban.com/news/detail-627486.html

    onAdButtonClick(event) {

      console.error('result code is : ', event.resultCode)

    }

到了这里,关于【快应用】adbutton如何直接下载广告而不跳落地页再下载的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包