如何实现微信小程序激励广告每天只展示一次

还记得是好几年前做过一个爆笑图片的小程序,后来因为各种原因没有坚持住,荒废了好几年,这期间微信推出了流量主,开发者可以在小程序中插入各类广告,但看了一下门槛需要累计1000个独立UV,想想还是比较难的,所以一直也没动手去弄。

前几天刚好在抖音上看到了在线制作奖状的直播,想着这可能是个突破门槛的机会,5月19日赶紧做小程序改名,写服务写代码,提审,紧赶慢赶总算在5月19日晚上线了第一版奖状生成小程序,上线后我在部分微信群和朋友圈分享了一下,截止到5月20日晚加上之前的用户顺利突破了1000门槛,我也在第一时间申请了流量主,但并没有着急接入小程序。

今天刚好趁着改版小程序的机会,准备在小程序中接入激励广告,但在接入之前要思考一下如何合理的接入,毕竟接入广告肯定会对用户使用有一定的负面影响,就我自己而言我也不喜欢我使用的小程序频繁的弹出广告,这样会很烦躁,那么该如何平衡呢?我选择在用户每天第一次生成图片的时候弹出广告,当天完整看过一次广告后,后续不会再弹出广告,如何实现广告每天只弹出一次呢?

我们在创建广告位后会得到广告插件的代码,大致如下:

// 在页面中定义激励视频广告
let videoAd = null

// 在页面onLoad回调事件中创建激励视频广告实例
if (wx.createRewardedVideoAd) {
  videoAd = wx.createRewardedVideoAd({
    adUnitId: 'adunit-xxxx'
  })
  videoAd.onLoad(() => {})
  videoAd.onError((err) => {})
  videoAd.onClose((res) => {})
}

// 用户触发广告后,显示激励视频广告
if (videoAd) {
  videoAd.show().catch(() => {
    // 失败重试
    videoAd.load()
      .then(() => videoAd.show())
      .catch(err => {
        console.log('激励视频 广告显示失败')
      })
  })
}

按照代码中的注释分享将得到的广告插件代码插入到对应的位置,整个广告接入就完成了,但是当用户触发广告后,每次都会展示广告,这对用户体验不利,而且上面提到了我们需要每天只展示一次广告,要实现这点其实我们只需要想办法记录最后一次读取广告的日期即可,这里选择使用localStorage来记录,我们定义以下工具方法:

const date = new Date();
const READ_KEY = 'LAST_AD_READ_DATE';
const dateStr = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;

export function setRead() {
  wx.setStorageSync(READ_KEY, dateStr);
}

export function checkIsRead() {
  return wx.getStorageSync(READ_KEY) === dateStr;
}

将上面的代码保存为ad.js,在展示广告前,先调用checkIsRead检查当天是否播放过广告,如果未播放则播放广告,并在广告广告完整播放完毕后调用setRead设置状态; 如果当前播放过,则直接执行后续的操作,主体代码如下:

import { setRead, checkIsRead } from './utils/ad';

let videoAd = null;

Page({
  ...,

  onLoad() {
    // isShowAd的值可以通过接口获取 即接口也可控制是否展示广告
    if (isShowAd && wx.createRewardedVideoAd) {
      videoAd = wx.createRewardedVideoAd({
        adUnitId: 'adunit-xxxx'
      });
      videoAd.onLoad(() => {});
      videoAd.onError((err) => {});
      videoAd.onClose((res) => {});
    }
  }

  generateImage() {
    ...
  },

  btnClick() {
    const isRead = checkIsRead();
    if (!isRead && videoAd) {
      videoAd.offClose();
      videoAd.onClose(res => {
        if (res && res.isEnded) {
          setRead();
          this.generateImage();
        } else {
          wx.showToast({
            title: '请完整观看广告',
            icon: 'error',
          });
        }
      });
      videoAd.show().catch(() => {
        videoAd.load()
          .then(() => videoAd.show())
          .catch(err => {
            this.generateImage();
          });
      });
    } else {
      this.generateImage();
    }
  }

  ...,
});

generateImage是我们生成图片的函数,btnClick是生成按钮的回调函数,我们首先检查当天广告的播放情况确定是否要展示广告或者直接生成图片,我们通过调用offClose方法处理videoAd.onClose可能出现重复监听的问题。

最后附上奖状生成小程序,相比第一版目前支持了宝贝/老公/老婆奖状生成,同时支持更多区域内容的自定义,并支持多套模板,微信扫一扫下面的小程序码即可体验哦。

  • 支付宝二维码 支付宝
  • 微信二维码 微信

本文地址: /wx-miniprogram-advertise.html

版权声明: 本文为原创文章,版权归 逐梦个人博客 所有,欢迎分享本文,转载请保留出处!

相关文章