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


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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
jQuery中库的引用方法
Jan 06 jQuery
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
Vue3如何理解ref toRef和toRefs的区别
Feb 18 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
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
python梯度下降法的简单示例
2018/08/31 Python
python命令 -u参数用法解析
2019/10/24 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
猫咪家具:CatsPlay
2018/11/03 全球购物
餐饮业员工工作决心书
2014/03/11 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
商务英语求职信范文
2015/03/19 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
2016年教师节慰问信
2015/12/01 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server