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

​【关键词】

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

 

【问题背景】

快应用接入原生广告后，通过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()

 

    },

截图：

​​

​