微信小程序中限制激励式视频广告位显示次数(实现思路)


Posted in Javascript onDecember 06, 2019

微信小程序自从支持激励式视频广告位以后,很多小程序为了变现都加入了此广告位,广告正常观看结束的次数越多就越赚钱,但是观看次数的比率过高也会面临封号的风险,那么如何才能规避这个风险呢?

实现思路:限制每个用户当天观看激励式视频广告位的次数,如果用户当天观看广告位超过了一定的次数就不再显示广告位,用户第二天打开小程序时清空第一天观看广告的次数,下面用实例代码来说明。

第一步:在小程序的 onLaunch 里获取本地存储的上一次观看激励视频广告保存的时间,并获取本地存储观看广告位的次数,如果上一次观看激励视频广告时间的晚上12点小于当前时间,则将观看广告位的次数清0;

onLaunch: function() {
 // 获取激励视频广告位加载的次数
 var count = wx.getStorageSync('showRewardedVideoAdCount');
 if (!count) {
 wx.setStorage({
 key: 'showRewardedVideoAdCount',
 data: 0,
 })
 };
 // 上次观看激励视频广告保存的时间
 var lastSaveTime = wx.getStorageSync('saveVideoAdCountTime');
 if (lastSaveTime) {
 // 计算最后一次保存时间晚上12点的时间戳
 var endTime = new Date(new Date(lastSaveTime).setHours(23, 59, 59, 999));
 // 当前时间戳
 var currentDate = new Date();
 var currentTime = currentDate.getTime();
 // 清空激励广告位观看次数
 if (currentTime > endTime) {
 wx.setStorage({
 key: 'showRewardedVideoAdCount',
 data: 0,
 })
 }
 } 
},

第二步:发起请求从服务端获取广告位ID以后生成广告位,这一步只做参考。

// 如果激励广告位视频存在
if (rewardedAdId) {
 that.setData({
 rewardedAdId: rewardedAdId
 }, function() {
 // 创建一个激励视频广告位,rewardedVideoAd为全局变量,与Page()同级.
 rewardedVideoAd = wx.createRewardedVideoAd({
 adUnitId: rewardedAdId
 });
 // 监听加载
 rewardedVideoAd.onLoad(() => {
 console.log('激励广告加载成功');
 });
 // 监听失败
 rewardedVideoAd.onError(err => {
 console.log('激励广告加载失败' + err);
 });
 })
}

注意:以上代码中广告位ID rewardedAdId 为发起请求获取,而rewardedVideoAd 为整个页面的全局全变,与Page()同级。

第三步:在用户触发广告位以后,获取用户当天已正常观看完毕广告位的次数A与限制广告位播放的最多次数B,如果A小于B则继续加载广告位,否则播放视频。在广告位正常播放完毕后,要更新本地存储的播放次数与观看时间。

// 点击播放
bindPlay: function() {
 var that = this;
 var count = wx.getStorageSync('showRewardedVideoAdCount');
 // 对应页面上的video标签
 var videoContext = wx.createVideoContext('myVideo');
 // 限制激励视频最大播放次数
 if (count < App.globalData.maxShowRewardedAdCount) {
 // 如果存在激励视频广告ID,并且当前页面已经播放过一次广告
 if (that.data.rewardedAdId && that.data.showRewardedAd == 1) {
 // 暂停视频
 videoContext.stop();
 // 加载广告位
 rewardedVideoAd.load().then(function() {
 rewardedVideoAd.show();
 }).catch(function(err) {
 console.log('激励广告位加载失败');
 });
 // 广告位关闭后
 rewardedVideoAd.onClose(function(res) {
 that.setData({
  showRewardedAd: 0
 });
 videoContext.play();
 // 保存累加的次数
 var newCount = parseInt(count) + 1;
 wx.setStorage({
  key: 'showRewardedVideoAdCount',
  data: newCount,
 });
 var time = new Date()
 time = time.getTime();
 // 更新保存的时间
 wx.setStorage({
  key: 'saveVideoAdCountTime',
  data: time
 });
 })
 } else {
 // 继续播放
 videoContext.play();
 }
 } else {
 // 继续播放
 videoContext.play();
 }
},

上面的代码中,我们对是否有广告位ID做了判断,如第6行中的 that.data.rewardedAdId ,如果没有广告位ID,则直接播放视频,另外,如果用户播放完一个视频以后可能还会在该页面的推荐中观看其它视频,而此时再次弹出广告位的体验可能会不太好,所以我又加了入了一个判断,如上面代码中第6行的 that.data.showRewardedAd,页面初始化时该值为1,当播放完一次后将其归0。

总结

以上所述是小编给大家介绍的微信小程序中限制激励式视频广告位显示次数的实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
xss文件页面内容读取(解决)
Nov 28 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 Javascript
vue中监听路由参数的变化及方法
Dec 06 #Javascript
详解ECMAScript2019/ES10新属性
Dec 06 #Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 #Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 #Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 #Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 #Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 #Javascript
You might like
搜索引擎技术核心揭密
2006/10/09 PHP
php 无限分类的树类代码
2009/12/03 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
javascript字符串拼接的效率问题
2010/12/25 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
基于Python实现文件大小输出
2016/01/11 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
python opencv进行图像拼接
2020/03/27 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
浅析python连接数据库的重要事项
2021/02/22 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
关于礼仪的演讲稿
2014/01/04 职场文书
优秀员工获奖感言
2014/03/01 职场文书
职业女性的职业规划
2014/03/04 职场文书
社区居务公开实施方案
2014/03/27 职场文书
自荐信格式范文
2015/03/04 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL