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


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 相关文章推荐
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
基于JavaScript获取url参数2种方法
Apr 17 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支持页面回退的两种方法
2008/01/10 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
jquery处理json对象
2014/11/03 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
python中关于日期时间处理的问答集锦
2013/03/08 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
艺术爱好者的自我评价分享
2013/10/08 职场文书
导游实习生自荐书
2014/01/28 职场文书
元旦联欢会感言
2014/03/04 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
幼儿园见习总结
2015/06/23 职场文书
2019年教师入党申请书
2019/06/27 职场文书
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫