Uni-app 小程序 App 的广告变现之路:激励视频广告
Intro
激励视频广告,是cpm收益最高的广告形式。
手机用户观看几十秒视频广告,在广告播放完毕后可获得应用开发商提供的奖励,而应用开发商则可以从广告平台获取不菲的广告收入。
与开屏、信息流等广告变现方式不同,激励视频收益高、但场景设计和编程工作量也较高。
激励视频广告的场景灵活多样:
- 游戏内看广告复活、看广告拿高级道具
- 合成类游戏,看广告获得道具,比如各种养龙、养凤凰、养牛、养蟹......
- 走路赚钱、看短视频赚钱、猜歌赚钱等应用也非常多
- 网赚应用中,做各种任务赚钱,或者想要接赚钱的任务,前提是观看激励视频
- 增值内容消费,比如小说、电影看一半,剩下的需要看广告后才能继续
- 区块链应用融合激励视频,比如看广告提高收益或提高挖矿成功率
激励视频还经常和邀请裂变结合在一起,应用开发者为用户设计邀请好友的奖励,让用户有动力邀请更多用户使用这个应用。
激励视频是造富神器。行业经常出现几个人的团队,月收入百万的奇迹。均是因为良好的设计了激励场景和裂变模型。
平台差异说明
APP | H5 | 微信小程序 | 支付宝小程序 | 字节跳动小程序 | QQ小程序 | 快应用 | 360 小程序 | 快手小程序 | 京东小程序 | 百度小程序 |
2.5.2+ 支持 | 不支持 | 3.4.8+ 支持 | 不支持 | 不支持 | 不支持 | 不支持 | 不支持 | 支持 | 不支持 | 不支持 |
语法
<ad-rewarded-video></ad-rewarded-video>
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
adpid | String|Number|Array | 广告位id,如果传入的是数组,会从索引0开始请求失败后继续下一个,适用于已配置底价的逻辑 | |
preload | Boolean | true | 页面就绪后加载广告数据 |
loadnext | Boolean | false | 自动加载下一条广告数据 |
url-callback | Object | 服务器回调透传数据 | |
v-slot:default="{loading, error}" | 作用域插槽可以获取组件内部广告加载状态和加载错误信息 | ||
@load | EventHandle | 加载事件 | |
@close | EventHandle | 关闭事件 | |
@error | EventHandle | 错误事件 |
方法说明
方法名 | 说明 |
---|---|
load | 加载广告数据 |
show | 显示广告 |
注意
load
和 show
不能同时调用,在 load
过程中调用 show
会被忽略,因为数据还没加载完毕,可以在@load
完成事件中调用 show
支持重复调用 show
,调用 show
时会判断是否加载过数据,如果没有会自动加载一次,如果组件正在预载数据,调用 show
也会被忽略
推荐直接使用组件的自动加载逻辑,完全不需要手动调用 load
和 show
示例
<template><view><ad-rewarded-video adpid="1507000689" :loadnext="true" v-slot:default="{loading, error}"><button :disabled="loading" :loading="loading">显示广告</button><view v-if="error">{{error}}</view></ad-rewarded-video></view>
</template>
完整示例
<template><view class="content"><ad-rewarded-video adpid="1507000689" :loadnext="true" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror"><button :disabled="loading" :loading="loading">显示广告</button><view v-if="error">{{error}}</view></ad-rewarded-video></view>
</template><script>
export default {data() {return {}},methods: {onadload(e) {console.log('广告数据加载成功');},onadclose(e) {const detail = e.detail// 用户点击了【关闭广告】按钮if (detail && detail.isEnded) {// 正常播放结束console.log("onadclose " + detail.isEnded);} else {// 播放中途退出console.log("onadclose " + detail.isEnded);}},onaderror(e) {// 广告加载失败console.log("onaderror: ", e.detail);}}
}
</script>
API调用示例
<template><view><ad-rewarded-video ref="adRewardedVideo" adpid="1507000689" :preload="false" :loadnext="false" :disabled="true"v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror"><view class="ad-error" v-if="error">{{error}}</view></ad-rewarded-video><button type="primary" :disabled="isLoading" :loading="isLoading" @click="showAd">显示广告</button></view>
</template><script>export default {data() {return {isLoading: false}},onReady() {this.isLoading = true;this.$refs.adRewardedVideo.load();},methods: {showAd() {if (this.isLoading) {return}this.$refs.adRewardedVideo.show();},onadload(e) {this.isLoading = false;console.log('广告数据加载成功');},onadclose(e) {const detail = e.detail// 用户点击了【关闭广告】按钮if (detail && detail.isEnded) {// 正常播放结束console.log("onClose " + detail.isEnded);} else {// 播放中途退出console.log("onClose " + detail.isEnded);}//this.isLoading = true;//this.$refs.adRewardedVideo.load();},onaderror(e) {// 广告加载失败console.log(e.detail);this.isLoading = false;}}}
</script><style>.ad-error {color: orangered;margin-top: 5px;}
</style>
瀑布流逻辑广告位
<template><view class="content"><ad-rewarded-video :adpid="adpids" :loadnext="true" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror"><button :disabled="loading" :loading="loading">显示广告</button><view v-if="error">{{error}}</view></ad-rewarded-video></view>
</template><script>
export default {data() {return {adpids: ["1507000611", "1507000611", "1507000611", "1507000611"]}},methods: {onadload(e) {console.log('广告数据加载成功');},onadclose(e) {const detail = e.detail// 用户点击了【关闭广告】按钮if (detail && detail.isEnded) {// 正常播放结束console.log("onadclose " + detail.isEnded);} else {// 播放中途退出console.log("onadclose " + detail.isEnded);}},onaderror(e) {// 广告加载失败console.log("onaderror: ", e.detail);}}
}
</script>
PS:3.5.1+ 增加了广告并行请求逻辑,优化分层逻辑,提升广告显示速度
获取广告商名称
语法
getProvider()
说明
值 | 描述 |
---|---|
csj | 穿山甲 |
gdt | 腾讯优量汇(前称广点通) |
ks | 快手 |
sigmob | Sigmob |
PS:返回值 为 string 类型
示例代码
<template><view class="content"><ad-rewarded-video ref="adRewardedVideo" adpid="1507000689" :loadnext="true" v-slot:default="{loading, error}" @load="onload"><button :disabled="loading" :loading="loading">显示广告</button><view v-if="error">{{error}}</view></ad-rewarded-video></view>
</template><script>
export default {data() {return {}},methods: {onload(e) {console.log('广告数据加载成功');let providerName = this.$refs.adRewardedVideo.getProvider();console.log('广告商名称::', providerName);}}
}
</script>
显示/隐藏
激励视频广告组件默认是隐藏的,在用户主动触发广告后进行显示。
只有在用户点击激励视频广告组件上的 关闭广告 按钮时,广告才会关闭。开发者不可控制激励视频广告组件的隐藏。
广告拉取成功与失败
loadnext=true
时激励视频广告组件是自动拉取广告并进行更新的。在组件创建后会拉取一次广告,用户点击 关闭广告 后会去拉取下一条广告。
如果拉取失败,通过 @error
注册的回调函数会执行,回调函数的参数是一个包含错误信息的对象。
拉取失败,重新拉取
如果组件的某次自动拉取失败,此时可以调用 load()
手动重新拉取广告。
监听用户关闭广告
只有在用户点击激励视频广告组件上的 关闭广告 按钮时,广告才会关闭。这个事件可以通过 @close
监听。
@close
的回调函数会传入一个参数 e.detail,e.detail.isEnded 描述广告被关闭时的状态。
属性 | 类型 | 说明 |
---|---|---|
detail: { isEnded } | boolean | 视频是否是在用户完整观看的情况下被关闭的,true 表示用户是在视频播放完以后关闭的视频,false 表示用户在视频播放过程中关闭了视频 |
开发者需要根据 isEnded 判断是否视频是否播放结束,如果成功播放完毕则应该向用户发放奖励。
<template><view class="content"><ad-rewarded-video adpid="1507000689" :loadnext="true" v-slot:default="{loading, error}" @close="onadclose"><button :disabled="loading" :loading="loading">显示广告</button><view v-if="error">{{error}}</view></ad-rewarded-video></view>
</template><script>
export default {methods: {onadclose(e) {const detail = e.detail// 用户点击了【关闭广告】按钮if (detail && detail.isEnded) {// 正常播放结束// 这里应该联网给予用户激励。且这段代码应该做安全保护,详见下文中的“安全注意”console.log("onadclose " + detail.isEnded);} else {// 播放中途退出console.log("onadclose " + detail.isEnded);}}}
}
</script>
服务器回调
App平台 3.1.15+ 支持穿山甲/优量汇/快手
激励视频广告可以支持广告服务器到业务服务器的回调,用于业务系统判断是否提供奖励给观看广告的用户。配置服务器回调后,当用户成功看完广告时,广告服务器会访问配置的云函数,通知用户完成观看激励视频。
相对来讲服务器回调将更加安全,可以依赖广告平台的反作弊机制来避免用户模拟观看广告完成的事件。
如何使用
- 申请激励视频广告位时开启服务器回调
- 创建激励视频广告时传入回调参数
urlCallback示例
<template><view class="content"><ad-rewarded-video adpid="1507000689" :url-callback="urlCallback" :loadnext="true" v-slot:default="{loading, error}"><button :disabled="loading" :loading="loading">显示广告</button><view v-if="error">{{error}}</view></ad-rewarded-video></view>
</template><script>
export default {data() {return {urlCallback: {userId: 'testuser',extra: 'testdata'}}},methods: {}
}
</script>
服务器回调说明
服务器回调基于 uniCloud,详细流程如下:
- 登陆 uniCloud web控制台,新建服务空间或选择已有服务空间,然后在HBuilderX中新建uni-app项目并关联服务空间,新建云函数上传,用于接收广告的回调
- 在 uniAd web控制台开通服务器回调并选择上一步新建的云函数
- 开通后将在选择的服务空间下自动部署一个加密云函数
uniAdCallback
uniAdCallback
接收广告商服务器回调验证签名并抹平穿山甲/优量汇/快手参数差异,然后以 callFunction 方式调用用户云函数- 用户在自己的云函数中处理业务
注意:
- 新建的云函数名称不能使用
uniAdCallback
- 服务器通信和前端事件是并行的,前端需要轮询向服务器请求并验证结果
- 不建议在
uniAD
web控制修改回调的服务空间和云函数名称,因为修改后生效需要一段时间
Q&A
Q: 回调为什么使用 uniCloud,而不是直接配置开发者的服务器 A:
- 由于多家广告商的回调和签名验证逻辑不同,开发者需要写很多逻辑,
uniCloud
中的云函数uniAdCallback
已抹平了差异,开发者按照统一的参数处理即可 - 开发者的服务器有可能响应慢或失去响应造成回调数据丢失, 使用
uniCloud
可以帮助开发者保存一份来自广告商服务器的回调数据到开发者的云数据中,以便开发者主动查询 uniCloud
可以承载大并发、防DDoS攻击,无需运营人员维护,如果选择了阿里云
且是免费的
用户的云函数返回数据约定
返回json数据,字段如下:
字段名称 | 说明 | 字段类型 | 备注 |
---|---|---|---|
isValid | 校验结果 | Blean | 判定结果,是否发放奖励 |
示例
exports.main = async (event, context) => {//event为客户端上传的参数console.log('event : ', event);return {"isValid": true}
};
用户云函数详细说明
如果业务使用了uniCloud,可以直接在云函数内部处理
也可以将结果发送给已有业务服务器
示例代码
'use strict';const crypto = require('crypto');const db = uniCloud.database();const DEFAUTL_TIMEOUT = 30000;
const DEFAUTL_RETRY_COUNT = 3;
const RETRY_TIMEOUT = 3000;const ProviderType = {CSJ: "csj",GDT: "gdt",KS: "ks"
};const collectionName = "opendb-uniad-callback-log";class DB {static save(data) {return new DB().add(data);}add(data) {const collection = db.collection(collectionName);const data2 = Object.assign(data, {ad_type: 0,create_date: new Date()})return collection.add(data2);}
}class UserServer {static send(url, data) {return new UserServer().sendHttpRequest(url, data);}async sendHttpRequest(url, data) {let needRetry = data.provider !== ProviderType.GDT;let retryCount = needRetry ? DEFAUTL_RETRY_COUNT : 1;let timeout = needRetry ? RETRY_TIMEOUT : DEFAUTL_TIMEOUT;let result = null;while (retryCount > 0) {console.log("sendHttpRequest::count::" + retryCount + "::", url, data);try {result = await uniCloud.httpclient.request(url, {data,dataType: 'json',contentType: 'json',timeout});if (result.data && result.data.isValid === true) {break;}} catch (e) {console.log(e);}retryCount--;}return result;}
}exports.main = async (event, context) => {//event为客户端上传的参数console.log('event : ', event);const {path,queryStringParameters} = event;const data = {adpid: event.adpid,platform: event.platform,provider: event.provider,trans_id: event.trans_id,sign: event.sign,user_id: event.user_id,extra: event.extra,}// 注意::必须验签请求来源const secret = "";// uniad 后台开通激励视频回调后生成的 Security keyconst trans_id = event.trans_id;const sign2 = crypto.createHash('sha256').update(`${secret}:${trans_id}`).digest('hex');if (event.sign !== sign2) {return null;}// 可选将回调记录保存到uniCloud,避免用户服务器没有响应时有日志可查,如果选择了保存记录需要做定时清理日志,避免日志过多影响性能// try {// await DB.save(data);// } catch (e) {// console.log(e);// }//const url = "https://"; // 用户业务服务器地址,为了避免请求被伪造,必须使用签名的方式请求//let reuslt = await UserServer.send(url, data);return reuslt
};
安全注意
由于激励视频对应着用户奖励,可能会遇到恶意刷激励奖励但实际上并不看广告的情况。此时广告平台不给结算,但开发者却可能把激励送出去。
为了提升安全性,建议所有使用激励视频的开发者都要做如下工作来加强保护:
- 前端代码加密。涉及激励相关的,在manifest中配置好要加密的代码文件,打包后会自动加密相应文件。详见
- apk加固。即便前端代码加密,原生层引擎的java代码仍然可能被反编译,需要对apk加固。市面上很多加固服务,比如360加固、爱加密加固均可以自行选择。
- 使用如下安全类API,防止客户端被篡改
- plus.navigator.getSignature 获取应用签名标识。结合在服务器端存放证书信息,可比对判断App的证书是否被重签 规范
- plus.navigator.isSimulator 判断App是否运行在模拟器环境 规范
- plus.navigator.isRoot 判断设备是否被root或越狱 规范
- plus.networkinfo.isSetProxy 判断设备的网络是否设置了代理 规范
- 避免使用短信验证码来识别身份,推荐使用可信度更高的 手机号一键登录 或 微信登录
- 必要时可使用生物认证(指纹和faceid)、活体检测的sdk
manifest 配置
注: Sigmob
属于小型广告联盟,收益偏低。如有条件,还需开通优量汇,快手等广告渠道以便提高收益。
Sigmob
暂不支持打包界面的勾选,如集成需进行如下的配置变动:
Sigmob
打包需要将HBuilderX
升级到3.2.0
以上版本。
打开 manifest.json
文件,点击 “源码视图”,uni-app
在 app-plus->distribute->sdkConfigs
下添加如下内容,5+ app
在 plus->distribute->plugins
下添加如下内容:
{"app-plus": {"distribute": {"sdkConfigs": {"ad" : {"sigmob" : {}}}}}
}
注意:如果已经存在ad节点,只需要在后面追加即可,如下
{"app-plus": {"distribute": {"sdkConfigs": {"ad" : {"gdt" : {},"csj" : {},"ks" : {},"ks-content" : {},"sigmob" : {}}}}}
}
注意事项
- iOS平台配置应用使用广告标识(IDFA)详见:https://ask.dcloud.net.cn/article/36107
- 测试期间请使用测试
adpid
,参考测试代码,如果无法显示换个时间再试 - 多次调用
RewardedVideoAd.onLoad()
、RewardedVideoAd.onError()
、RewardedVideoAd.onClose()
等方法监听广告事件会产生多次事件回调,建议在创建广告后监听一次即可。 - 为避免滥用广告资源,目前每个用户每天可观看激励式视频广告的次数有限,建议展示广告按钮前先判断广告是否拉取成功。
- App平台,建议每个广告商每个设备每天调用次数不超过
15
,中间要有间隔时间,否则可能触发系统的反作弊策略导致流量收益下降。
Uni-app 小程序 App 的广告变现之路:激励视频广告相关推荐
- Uni-app 小程序 APP 的广告变现之路:插屏广告
插屏广告 插屏广告组件是由客户端原生的图片.文本.视频控件组成的:一般来说,插屏广告可以实现比传统信息流广告和banner广告展现更大的广告尺寸,同样能够满足您对大量曝光和用户转化的需求. 平台差异说 ...
- uniapp 小程序 加载显示激励视频广告
uniapp激励广告文档:uni-app官网https://uniapp.dcloud.io/api/a-d/rewarded-video微信官网激励广告文档:激励视频广告 | 微信开放文档微信开发者 ...
- QQ小游戏 RewardedVideoAd 创建激励视频广告组件 API
RewardedVideoAd 创建激励视频广告组件 qq.createRewardedVideoAd(Object object) RewardedVideoAd qq.createRewarded ...
- uniapp使用uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能
uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能 官网提供的api进行的开发,自我感觉没啥问题,但是在不同的端上好像有的好使有的不好使,暂时不知道啥 ...
- 省钱兄同城跑腿小程序源码uniapp前端模版源码(小程序+APP+H5)
开源省钱兄同城跑腿源码,目前只开源用户端V2版本部分核心模块源码提供学习研究 使用uniapp技术,提供学习使用不可商业 适配支持公众号+APP+H5+小程序,使用Hbuilder导入即可运行 #功能 ...
- WANLSHOP 直播短视频种草多用户电商系统源码自营+多商户+多终端(H5+小程序+APP)
WANLSHOP高级版 可用于自营+外包项目(多主体). 可用于外包定制开发项目. 提供开源源码,私有化部署.一款基于 FastAdmin + Uni-APP 开发的 多终端(H5移动端.APP.微信 ...
- uniapp中的分享功能实现(APP,小程序,公众号)
uniapp中的分享功能实现(APP,小程序,公众号) 1.APP端的分享 app端的分享可以直接使用uniapp封装的方法uni.share,uni-app的App引擎已经封装了微信.QQ.微博的分 ...
- 省钱兄校园跑腿源码(公众号+APP+小程序+Android+IOS)校园跑腿社区跑腿同城跑腿任务兼职小程序uniapp前端模版
开源代码是用户端uniapp部分源码,使用hbuilder导入即可运行 只提供参考学习使用!已经获得软著!不可商业使用!感谢支持 h5体验地址 h5:https://paotui.xianmxkj.c ...
- 基于Uni-APP多端「h5+小程序+App」高仿抖音小视频|直播|聊天实例
uni-ttLive 基于uni-app+uView-ui跨端开发短视频+直播聊天实例. 全新研发的一款多端仿制抖音短视频+直播+聊天项目,基于uniApp+Vue.js+Vuex+Nvue+uVie ...
- 未明学院:有趣or有用,九款人工智能小程序/APP推荐给你
近日,一家印度初创企业被曝出用真人工程师冒充AI编程.所谓AI编写代码的背后,是印度工程师们的随时待命和疯狂coding. 不少网友吐槽:这果然是真人工·智能. 不得不承认,用人工冒充智能的新闻并不少 ...
最新文章
- python读取文件第n行-Python读取文件最后n行的方法
- 关于程序员的办公室哲学
- 世界上最大的搜索引擎公司 Google 宣布与 Elastic 达成战略合作协议
- 替换更改登陆页面logo与链接
- Java 线程之间通信
- json转换成dart类 JSON to Dart
- 干货分享:Neutron的PPT,帮助你理解Neutron的各种细节
- springboot中通过cors协议解决跨域问题
- HTML页面显示透视效果,《前端每日实战》第176号作品:用透视图表现 HTML、CSS 和 JS 的关系...
- Dynamic Wallpaper for Mac视频动态壁纸
- github入门教程最全中文版(官方)
- 笨方法学习python
- C#如何输入对号字符串
- Windows 11 v22000.318 11月更新版
- 简单的学生成绩管理系统
- html5圆圈闪烁,html5 css3圆形波浪百分比加载动画特效
- java 判断三角形计算面积
- 关于 z-Stack MT层的使用
- opengles的双PBO
- CentOS install PHP