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


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代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 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正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
2015/11/09 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
详解React 元素渲染
2020/07/07 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python中的rfind()方法使用详解
2015/05/19 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
肯尼迪就职演说稿
2013/12/31 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
文员岗位职责范本
2014/03/08 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
创卫工作总结2015
2015/04/22 职场文书
高中军训感想
2015/08/07 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
Spring中的@Transactional的工作原理
2022/06/05 Java/Android
Java Redisson多策略注解限流
2022/09/23 Java/Android