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


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控制上传文件的大小
Oct 26 Javascript
MooTools 1.2介绍
Sep 14 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
js实现前端分页页码管理
Jan 06 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
如何实现js拖拽效果及原理解析
May 08 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
微信小程序实现滚动加载更多的代码
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文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
php中socket通信机制实例详解
2015/01/03 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
python调用staf自动化框架的方法
2018/12/26 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
Python中print函数简单使用总结
2019/08/05 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
学生实习推荐信范文
2013/11/26 职场文书
中国入世承诺
2014/04/01 职场文书
银行转正自我鉴定
2014/09/29 职场文书