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

最近微信小程序后台发送通知，小程序激励式视频广告组件日前已全量上线，也就是说大家可以在小程序中插入激励视频广告了，之前只允许小游戏可以使用 。

激励式视频广告

用户在小程序中主动触发激励式广告，并达成奖励下发标准（完整播放视频广告，并手动点击 “关闭广告” 按钮），将获得该小程序下发的奖励。广告触发场景与奖励内容均由流量主自定义。

新建广告位

首先进入小程序后台点击流量主，点击广告位管理，点击新建广告位，就可以新建所需要的广告了，目前有三种 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

最近收益截图

总结

以上所述是小编给大家介绍的微信小程序中插入激励视频广告并获取收益的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 微信小程序激励式视频广告组件使用详解

    微信小程序激励式视频广告组件使用详解

    微信小程序搜索:短视频去水印解析 目前微信小程序针对个人来说广告是最好的变现方式,广告主要分为: 1. Banner 2. 激励式视频 3. 插屏 Banner广告很简单,插入代码就可以显示 这里介绍下激励式视频广告实现(观看完整广告奖励积分): //视频广告 let videoAd = null; //视频广告拉取状态 let videoAdPushStatus = false; Page({ data: { //积分总数 creditsAmountSum: 100 }, onLoad(opt

  • 微信小程序入门之广告条实现方法示例

    微信小程序入门之广告条实现方法示例

    本文实例讲述了微信小程序入门之广告条实现方法.分享给大家供大家参考,具体如下: 在小程序页面,有时候需要弄一条广告条进去,作用可以用来提醒客户端,更加醒目,这种实现很容易,要用到组件swiper,navigator 先上效果图: wxml: <swiper class="swiper_container" autoplay="true" interval="2000" circular="true"> <bl

  • 微信小程序添加插屏广告并设置显示频率(一天一次)

    插屏广告 用户触发小程序中的特定场景时,插屏广告将自动向用户展现,用户可以随时关闭插屏广告.广告触发场景由流量主自定义,广告按曝光计费(CPM). 微信小程序今年新上线了插屏广告,设置和在代码库中接入都非常方便.详细可见微信小程序官方文档. 大体的流程就是在小程序后台新建广告位,获取到广告位的adUnitId并嵌入到源代码,因为插屏广告的单页面性,在页面的onload处添加即可. let interstitialAd = null; if (wx.createInterstitialAd) {

  • 微信小程序中限制激励式视频广告位显示次数的实现思路

    微信小程序自从支持激励式视频广告位以后,很多小程序为了变现都加入了此广告位,广告正常观看结束的次数越多就越赚钱,但是观看次数的比率过高也会面临封号的风险,那么如何才能规避这个风险呢? 实现思路:限制每个用户当天观看激励式视频广告位的次数,如果用户当天观看广告位超过了一定的次数就不再显示广告位,用户第二天打开小程序时清空第一天观看广告的次数,下面用实例代码来说明. 第一步:在小程序的 onLaunch 里获取本地存储的上一次观看激励视频广告保存的时间,并获取本地存储观看广告位的次数,如果上一次观看

  • 微信小程序进入广告实现代码实例

    微信小程序进入广告实现代码实例

    这篇文章主要介绍了微信小程序进入广告实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 <view class="container"> <image src="../../imgs/swiper1.jpg"></image> <text bindtap="cliadv">跳过广告 {{miao}}</text> &l

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

    最近微信小程序后台发送通知,小程序激励式视频广告组件日前已全量上线,也就是说大家可以在小程序中插入激励视频广告了,之前只允许小游戏可以使用 . 激励式视频广告 用户在小程序中主动触发激励式广告,并达成奖励下发标准(完整播放视频广告,并手动点击 "关闭广告" 按钮),将获得该小程序下发的奖励.广告触发场景与奖励内容均由流量主自定义. 新建广告位 首先进入小程序后台点击流量主,点击广告位管理,点击新建广告位,就可以新建所需要的广告了,目前有三种 banner,激励视频,插屏广告. 插入广告

  • 微信小程序中实现一对多发消息详解及实例代码

    微信小程序中实现一对多发消息详解及实例代码 微信小程序中各个界面之间的传值和通知比较蛋疼.所以模仿了iOS中的通知中心,在微信小程序中写了一套类似的通知中心. 通知中心可以做到:1对多发消息,传递object.使用十分简洁. 使用时,在需要接收消息的界面注册一个通知名.然后在需要发消息的界面post这个通知名就可以了.可以在多个界面注册同一个通知名.这样就可以1对多发消息. 使用方法: 1:在app.js中引用notification.js var notificationCenter = re

  • 微信小程序中限制激励式视频广告位显示次数(实现思路)

    微信小程序自从支持激励式视频广告位以后,很多小程序为了变现都加入了此广告位,广告正常观看结束的次数越多就越赚钱,但是观看次数的比率过高也会面临封号的风险,那么如何才能规避这个风险呢? 实现思路:限制每个用户当天观看激励式视频广告位的次数,如果用户当天观看广告位超过了一定的次数就不再显示广告位,用户第二天打开小程序时清空第一天观看广告的次数,下面用实例代码来说明. 第一步:在小程序的 onLaunch 里获取本地存储的上一次观看激励视频广告保存的时间,并获取本地存储观看广告位的次数,如果上一次观看

  • 微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案

    微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案

    效果图展示: 实现方法: 在video中添加一个cover-view,在cover-view写两个cover-image,一个用来存储封面图.一个用来存放播放按钮,同级写一个cover-view用来完成封面上的文字,设置绝对定位,水平垂直居中,在播放按钮上添加点击事件,点击之后隐藏cover-view,最后在监听视频结束事件,重新填充封面跟播放按钮就可以了. 代码: <video id="myVideo" src="{{videoSrc}}" enable-d

  • 微信小程序中使用Promise进行异步流程处理的实例详解

    微信小程序中使用Promise进行异步流程处理的实例详解 我们知道,JavaScript是单进程执行的,同步操作会对程序的执行进行阻塞处理.比如在浏览器页面程序中,如果一段同步的代码需要执行很长时间(比如一个很大的循环操作),则页面会产生卡死的现象. 所以,在JavaScript中,提供了一些异步特性,为程序提供了性能和体验上的益处,比如可以将代码放到setTimeout()中执行:或者在网页中,我们使用Ajax的方式向服务器端做异步数据请求.这些异步的代码不会阻塞当前的界面主进程,界面还是可以

  • 微信小程序中form 表单提交和取值实例详解

    微信小程序中form 表单提交和取值实例详解 我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="onUsernameInput" />,那么可以在 onUsernameInput 中直接使用 e.detail.value,即: onUsernameInput : function(e) { e.detail.value; } 但是,如果有多个输入控件,我们不可能为每个控件添加 bindinput.bindchange

  • 微信小程序判断页面是否从其他页面返回的实例代码

    微信小程序判断页面是否从其他页面返回,具体内容如下所示: 在 data 中自定义一个标记变量,在onLoad里 Page({ data: { isNewOpen: true, //判断当前页面是新打开还是从其他页面返回 list: [], page: 0 }, onLoad: function() { this.getList() }, getList () { // ... }, goDetail (e) { this.setData({ isNewOpen: false }) wx.navi

  • 微信小程序之批量上传并压缩图片的实例代码

    具体内容如下所示: 首先,要在.wxml文件里面创建一个canvas,作用是承载压缩的图片,以供上传的时候获取 这个canvas不能隐藏,否则没效果,可以将其移至屏幕外. <canvas canvas-id='attendCanvasId' class='myCanvas'></canvas> 然后呢,就是.js文件里面的方法了 // 点击加_压缩 takePhoto: function () { var that = this; let imgViewList = that.da

  • 在微信小程序中渲染HTML内容3种解决方案及分析与问题解决

    大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 在微信小程序中渲染HTML内容的3种解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「wxParse」的库.它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来. rich-text 后来,小程序增加了「rich-text」组件用于展示富文

随机推荐