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


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 相关文章推荐
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
js查找节点的方法小结
Jan 13 Javascript
Json解析的方法小结
Jun 22 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 Javascript
vue实现抽屉弹窗效果
Nov 15 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 XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
Javascript 赋值机制详解
2014/11/23 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python之eval()函数危险性浅析
2014/07/03 Python
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
Python3使用requests发闪存的方法
2016/05/11 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
python中count函数简单用法
2020/01/05 Python
jupyter notebook 多行输出实例
2020/04/09 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
python opencv肤色检测的实现示例
2020/12/21 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
十佳大学生事迹材料
2014/01/29 职场文书
留学生求职信
2014/06/03 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
小学少先队活动总结
2015/05/08 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
MySQL大小写敏感的注意事项
2021/05/24 MySQL
python操作xlsx格式文件并读取
2021/06/02 Python
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技