【快应用】nativeAd.onStatusChanged和nativeAd.onDownloadProgress接口正确监听广告下载进度与状态

最新推荐文章于 2024-08-14 02:16:19 发布

Mayism123

最新推荐文章于 2024-08-14 02:16:19 发布

阅读量177

点赞数

文章标签：华为

本文链接：https://blog.csdn.net/Mayism123/article/details/131302629

版权

文章讨论了在快应用中遇到的原生广告下载监听和状态返回无回调的问题。问题出在广告加载后未正确设置监听。解决方案是在广告加载成功回调onLoad中初始化下载监听和状态改变监听，确保在广告数据可用时开始监听。

摘要由CSDN通过智能技术生成

【关键词】

原生广告、下载监听、状态返回

【问题背景】

快应用接入原生广告后，通过nativeAd.onStatusChanged和nativeAd.onDownloadProgress接口来监听广告下载状态和进度，但是在广告触发下载后，没有回调返回。该如何解决?

代码：

    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()

      nativeAd.onDownloadProgress((data) => {

        console.log('onDownloadProgress data = ', data)

      })

      nativeAd.onStatusChanged((data) => {

        console.log('onStatusChanged data = ', data)

      })

    },

截图：

【问题分析】

通过上图可以看出ad-button组件有成功展示进度条状态，然而在日志里却没有输出，说明接口是没有成功监听下载进度条和状态的。

我们在调用onDownloadProgress的上下文加上日志看下日志执行顺序。

      console.log("onDownloadProgress start");

      nativeAd.onDownloadProgress((data) => {

        console.log('onDownloadProgress data = ', data)

      })

      nativeAd.onStatusChanged((data) => {

        console.log('onStatusChanged data = ', data)

      })

      console.log("onDownloadProgress end");

可以明显看出，监听方法在广告出来前就触发了，之后广告数据才加载出来，此使再去点击下载必然是监听不到的。我们需要在广告加载出来后再去触发监听，这样才能成功的。

【解决方法】

为了更好的监听，我们可以onload中去调用onDownloadProgress和onStatusChanged，因为onload是广告加载成功回调，就是只有广告加载成功后才能触发。

代码如下：

 showNativeAd() {

      nativeAd = ad.createNativeAd({ adUnitId: this.native.adUnitId })

      nativeAd.onLoad((data) => {

        console.info('ad data loaded: ' + JSON.stringify(data))

        nativeAd.onDownloadProgress((data) => {

          console.log('onDownloadProgress data = ', data)

        })

        nativeAd.onStatusChanged((data) => {

          console.log('onStatusChanged data = ', 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()

 

    },

截图：