Vue单页面中进行业务数据的上报
为什么要在标题里加上一个业务数据的上报呢,因为在咱们前端项目中,可上报的数据维度太多,比如还有性能数据、页面错误数据、console捕获等。这里我们只讲解业务数据的埋点。
业务数据的上报主要分为:
- 各个路由的PV上报;
- 用户的点击行为上报;
- 用户操作结果(分享是否成功)的数据上报等;
通用和必须上报的数据,均在上报的代码中进行固定,比如设备信息、用户信息、cookie等都需要上报的数据,在上报前处理完成,需要异步获取且数据固定的,做好存储,防止每次都要重新获取;其他额外的数据,通过对外暴露的send
方法进行传递。
比如获取信息这块,客户端给到的jsapi,有可能只能异步调用,那么我们就可以这么处理:
function getAppInfo() {
let appInfo = {};
return ()=> {
if (appInfo.deviceId) {
return Promise.resolve(appInfo);
} else {
return new Promise((resolve, reject) => {
ABB.getAppInfo(info => {
if (info.deviceId) {
appInfo = info;
resolve(appInfo);
} else {
reject(new Error('get AppInfo error'));
}
})
})
}
}
}
const AppInfo = getAppInfo();
console.log( AppInfo() );
1. 各个路由的PV上报
各个路由的PV上报可以通过vue router的afterEach来实现,每次路由刷新时,afterEach方法都会执行,那么我们在这里进行PV的上报:
// 每个hash路由的PV上报
router.afterEach((to)=>{
// to为当前已打开的页面,to.name为在router/index.ts中设定的name
dataBoss.sendPV(to.name);
})
2. 用户点击行为的上报
用户点击行为的上报,之前是在每个点击的业务代码最后,进行一次点击上报。不过这样一个不好的地方是,必须为每个需要上报的点击元素添加一段业务代码,同时,如果多个点击行为共享某个业务片段时,需要进行点击区分:
methods: {
myClick(value, prarams, act) {
// ... 业务逻辑的处理
// 数据的上报
wzp.send({
act: act,
pageSource: 'MainPage'
})
}
}
现在,我们利用Vue中的自定义指令来实现点击行为的上报,上报的处理与业务代码进行分割:
// 自定义指令的官方文档: https://cn.vuejs.org/v2/guide/custom-directive.html
// 自定义boss指令
// bind: 只对该元素绑定一次
// el: 触发时的DOM元素
// binding.value: 传入的值
// 使用 v-boss="{page: 'MainPage', sop: 'donate'}"
Vue.directive('boss', {
//
bind: function (el: HTMLElement, binding: any) {
el.addEventListener('click', ()=>{
// 绑定click事件,触发后进行数据上报
Vue.prototype.$dataBoss.send(binding.value)
})
}
})
自定义v-boss指令后,我们就可以在元素上使用这个指令后:
<!-- 为用户头像添加点击数据上报 -->
<div class="avatar" v-boss="{pageName: 'MainPage', sop: 'sop_own_click'}" @click="linkTo">
<img :src="user.avatar" :alt="user.nickname">
</div>
3. 用户操作结果的数据上报
这里的数据上报是用户点击行为之后的结果上报,比如用户点击了分享按钮,那么最终他是真的分享成功了,还是中途又取消了。这种数据的上报,可以分析出用户从意图操作到最终实现的一个流失情况。
操作结果的数据上报,依赖于客户端或者接口给反馈的结果,这就需要在业务代码中实现了,定义一个全局变量$dataBoss
,通过这个来上报数据:
比如分享是否成功的监控:
// 发起分享
handleShare() {
share.show();
share.on('shareResult', res => {
this.$dataBoss.send({
sop: 'share_success'
});
})
}
根据接口中的数据进行上报:
handleUser() {
jsonp(url).then(result => {
this.$dataBoss.send({
kv: {
money: 20
}
});
})
}
总结
前端数据上报的维度很多,都是为了方便我们更加的了解用户、了解产品,方便以后的功能迭代。
本文地址: https://www.xiabingbao.com/post/vue/vue-boss-up.html
最新文章
- UEditor编辑器的使用
- 组合suan
- 2016.8.16 JQuery学习记录
- Asp.net DropDownList 自定义样式(想怎么改就怎么改!)
- GPS模块启动模式说明
- WPF之UseLayoutRounding和SnapsToDevicePixels
- diameter - degree problem
- java开发webservice的几种方式
- MD5和SHA512Managed ——哈希算法
- Directx11学习笔记【十二】 画一个旋转的彩色立方体
- MQTT——编写连接报文
- drool-6.5的自学demo
- call(),apply()方法解析(一)
- Java z 404
- P2157 [SDOI2009]学校食堂
- 软件项目管理:什么是baseline
- English trip V1 - 20.Look at me 看着我 Teacher:Solo Key: 声调(英语默认就声调[rising]和降调[falling]两种)
- java 图片的自定义大小
- PAT 1041 考试座位号(15)(代码)
- android下载 sdk 的两个代理 ,解决下载sdk慢的问题
热门文章
- Does Daemon Thread Exit with Main Thread?
- Python:6种标准数据类型
- Java读取CSV和XML文件方法
- debian flam3 源码
- yield的表达式形式的应用(待补充)
- XVII Open Cup named after E.V. Pankratiev Grand Prix of Moscow Workshops, Sunday, April 23, 2017 Problem K. Piecemaking
- Spark --【宽依赖和窄依赖】
- c++之旅:函数模板
- mysql外键约束无法删除数据的情况解决办法
- iOS 动态调用方法