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


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操作userdata
Apr 27 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
ES6之Proxy的get方法详解
Oct 11 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 获取全局变量的代码
2011/04/21 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
prototype Element学习笔记(篇二)
2008/10/26 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
详解python中的线程
2018/02/10 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
python实现画循环圆
2019/11/23 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
Shell脚本如何向终端输出信息
2014/04/25 面试题
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
三字经教学反思
2014/04/26 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
MySQL连接控制插件介绍
2021/09/25 MySQL
vue elementUI批量上传文件
2022/04/26 Vue.js