微信小程序中插入激励视频广告并获取收益(实例代码)


Posted in Javascript onDecember 06, 2019

最近微信小程序后台发送通知,小程序激励式视频广告组件日前已全量上线,也就是说大家可以在小程序中插入激励视频广告了,之前只允许小游戏可以使用 。

微信小程序中插入激励视频广告并获取收益(实例代码)

激励式视频广告

用户在小程序中主动触发激励式广告,并达成奖励下发标准(完整播放视频广告,并手动点击 “关闭广告” 按钮),将获得该小程序下发的奖励。广告触发场景与奖励内容均由流量主自定义。

微信小程序中插入激励视频广告并获取收益(实例代码)

新建广告位

首先进入小程序后台点击流量主,点击广告位管理,点击新建广告位,就可以新建所需要的广告了,目前有三种 banner,激励视频,插屏广告。

微信小程序中插入激励视频广告并获取收益(实例代码)

插入广告代码

视频激励广告代码插入略微复杂,不像 banner 广告,直接获取广告组件代码插入即可显示。视频激励广告代码调用是 wx.createRewardedVideoAd 接口。接口返回一个单例对象,该对象仅对单个页面有效。

下面直接来看看是如何插入的:

首先在 js 文件中定义一个全局作用域的视频广告对象

// 在页面中定义激励视频广告对象

var videoAd = null;
Page({
 ...
})

由于广告对象是单例,且对单个页面有效,因此官方建议在页面加载后(onLoad 事件)中创建广告对象,并在该页面的生命周期内重复调用该广告对象。

具体实现代码

因此在 onLoad 函数中调用广告接口,并监听广告关闭。

onLoad() {
 if (wx.createRewardedVideoAd) {
 // 加载激励视频广告
 videoAd = wx.createRewardedVideoAd({
  adUnitId: '你的 adUnitId'
 })
 //捕捉错误
 videoAd.onError(err => {
 // 进行适当的提示
 })
 // 监听关闭
 videoAd.onClose((status) => {
  if (status && status.isEnded || status === undefined) {
  // 正常播放结束,下发奖励
  // continue you code
  } else {
  // 播放中途退出,进行提示
  }
 })
 }
}

注意这里需要对错误进行捕捉,否则会报下面的错误。

微信小程序中插入激励视频广告并获取收益(实例代码)

然后,在合适的位置展示广告,例如我这在一个 button 的 tap 事件进行广告显示。

// button 点击事件
openVideoAd() {
 console.log('打开激励视频');
 // 在合适的位置打开广告
 if (videoAd) {
 videoAd.show().catch(err => {
  // 失败重试
  videoAd.load()
  .then(() => videoAd.show())
 })
 }
}

这样就大工告成 了,运行小程序测试即可 。

如果视频显示异常可直接进入官方文档根据错误码查找对应问题 。

官方文章地址: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/ad/rewarded-video-ad.html

最近收益截图

微信小程序中插入激励视频广告并获取收益(实例代码)

总结

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

Javascript 相关文章推荐
一个js封装的不错的选项卡效果代码
Feb 15 Javascript
js中判断控件是否存在
Aug 25 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
微信小程序实现滚动加载更多的代码
Dec 06 #Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 #Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 #Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 #Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 #Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 #Javascript
vue中监听路由参数的变化及方法
Dec 06 #Javascript
You might like
php根据年月获取季度的方法
2014/03/31 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
python获取目录下所有文件的方法
2015/06/01 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
谈谈Python中的while循环语句
2019/03/10 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
台湾生鲜宅配:大口市集
2017/10/14 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
母亲七十大寿答谢词
2014/01/18 职场文书
上课说话检讨书大全
2014/01/22 职场文书
入党个人总结范文
2015/03/02 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书