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


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 相关文章推荐
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 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编程中字符串处理的5个技巧小结
2007/11/13 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
python cookielib 登录人人网的实现代码
2012/12/19 Python
Python程序设计入门(4)模块和包
2014/06/16 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
python中format()函数的简单使用教程
2018/03/14 Python
Selenium定位元素操作示例
2018/08/10 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
Django 反向生成url实例详解
2019/07/30 Python
wxpython布局的实现方法
2019/11/01 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
python如何处理程序无法打开
2020/06/16 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
法律专业应届生自荐信范文
2014/01/06 职场文书
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技
MySql数据库 查询时间序列间隔
2022/05/11 MySQL