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


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 相关文章推荐
javascript下string.format函数补充
Aug 24 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
Mar 31 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
angular select 默认值设置方法
Jun 23 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
php绘制一条直线的方法
2015/01/24 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
PHP实现递归的三种方法
2020/07/04 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
详解JS面向对象编程
2016/01/24 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
如何在Django配置文件里配置session链接
2019/08/06 Python
django框架两个使用模板实例
2019/12/11 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
北承题目(C++)
2012/05/16 面试题
综合素质的自我鉴定
2013/10/07 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
团日活动总结报告
2014/06/25 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
先进党员事迹材料
2014/12/24 职场文书
2019个人工作总结
2019/06/21 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
js判断两个数组相等的5种方法
2022/05/06 Javascript