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


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 相关文章推荐
js类 from qq
Nov 13 Javascript
走出JavaScript初学困境—js初学
Dec 29 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
jquery操作select大全
Apr 25 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 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
E路文章系统PHP
2006/12/11 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
python语言使用技巧分享
2016/05/31 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
中软Java笔试题
2012/11/11 面试题
如何判断计算机可能已经中马
2013/03/22 面试题
就业意向书
2014/07/29 职场文书
学校端午节活动总结
2015/02/11 职场文书
公司员工手册范本
2015/05/14 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
Python基础之条件语句详解
2021/06/16 Python
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis
python字符串的一些常见实用操作
2022/04/06 Python