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


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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
jquery队列函数用法实例
Dec 16 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 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提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
python创建和使用字典实例详解
2013/11/01 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
Python打印不合法的文件名
2020/07/31 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
如何启动时不需输入用户名与密码
2014/05/09 面试题
师范大学毕业自我鉴定
2013/11/21 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
四风之害观后感
2015/06/09 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
Java的Object类的九种方法
2022/04/13 Java/Android
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android