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


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的with语句使用方法
Sep 21 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 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原理的opcodes(操作码)
2010/10/26 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
如何在一个页面显示多个百度地图
2013/04/07 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
解决React Native端口号修改的方法
2017/07/28 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
node 版本切换的实现
2020/02/02 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
Python基于twisted实现简单的web服务器
2014/09/29 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Django 多环境配置详解
2019/05/14 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python sqlite的Row对象操作示例
2019/09/11 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
2014年银行员工年终自我评价
2014/09/19 职场文书
总结会主持词
2015/07/02 职场文书
小学班主任教育随笔
2015/08/15 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
python实现简单的聊天小程序
2021/07/07 Python