评论

微信小程序激励广告用户体验优化

分享个人的激励广告用户体验优化的一点经验。

小程序的激励视频广告,按照文档所提示的,在onLoad函数中进行初始化,可以发现打开这个页面有明显的延迟卡顿。

let videoAd = null;
let adFen = 0;
onLoad: function (options) {
    const that = this;
    if (wx.createRewardedVideoAd) {
      videoAd = wx.createRewardedVideoAd({
        adUnitId'广告位'
      })
      videoAd.onLoad(() => { })
      videoAd.onError((err) => {
        console.log('onError event emit', err)
      })
      videoAd.onClose((res) => {
        // 用户点击了【关闭广告】按钮
        if (res && res.isEnded) {
          // 正常播放结束,可以下发游戏奖励
          that.adFen = that.adFen + 10
          wx.setStorageSync('ad', that.adFen);
          wx.showToast({
            title: '获得奖励',
          })
        } else {
          // 播放中途退出,不下发游戏奖励
        }
      })
    }
  },


可以将广告初始化工作放到onLoad函数外,当播放广告时,判断有没有初始化,没有初始化的时候,先初始化。

// 初始化广告实例函数
  loadAd: function () {
    const that = this;
    if (wx.createRewardedVideoAd) {
      videoAd = wx.createRewardedVideoAd({
        adUnitId'广告位'
      })
      videoAd.onLoad(() => { })
      videoAd.onError((err) => {
        console.log('onError event emit', err)
      })
      videoAd.onClose((res) => {
        // 用户点击了【关闭广告】按钮
        if (res && res.isEnded) {
          // 正常播放结束,可以下发游戏奖励
          that.adFen = that.adFen + 10
          wx.setStorageSync('ad', that.adFen);
          wx.showToast({
            title: '获得奖励',
          })
        } else {
          // 播放中途退出,不下发游戏奖励
        }
      })
    }
  },


这样调整之后,虽然进入页面流畅了,但是播放广告时明显的看到广告拉取有一段空白时间,用户体验很差,我通过在这段时间内显示加载动画来解决。在处理加载动画的时候,发现加载动画一直在显示,设置的隐藏动画函数并没有生效,原因是我采用了广告案例中的广告拉取失败重试,没有在重试的函数中调用隐藏动画函数。具体看代码:

  // 播放广告函数
  showAd: function () {
    wx.showLoading({
      title: '广告加载中',
    });
    const that = this;
    if (videoAd) {
 
    } else {
      that.loadAd();
    }

    if (videoAd) {
      videoAd.show().then(() => {
        // 关键点1:广告显示后,退出加载动画
        wx.hideLoading();
      }).catch(() => {
        // 失败重试
        videoAd.load()
          .then(() => videoAd.show().then(() => {
          // 关键点2:广告显示后,退出加载动画
            wx.hideLoading();
          }))
          .catch(err => {
            console.log('激励视频 广告显示失败')
          })
      })
    } else {
      wx.hideLoading();
      wx.showToast({
        title: '请稍后再试',
      })
      return
    }
  },

可以打开下面的小程序进行体验!

最后一次编辑于  2023-02-01  
点赞 0
收藏
评论
登录 后发表内容