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中设定的namedataBoss.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
转载于:https://www.cnblogs.com/xumengxuan/p/10682338.html
Vue单页面中进行业务数据的上报相关推荐
- 怎样在vue单页面中引入其他组件
场景 在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现 首先在components下新建组件Today_recommend.vue组件 <templat ...
- vue单页面跳页没有数据了_详解刷新页面vuex数据不消失和不跳转页面的解决
先说点什么 vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储sessionStorage的方法!!! 进入正题 刷新 刷新相当与 ...
- php vue seo,处理 Vue 单页面 SEO 的另一种思路
(设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.Rea ...
- vue index.html 缓存,解决vue单页面 回退页面 keeplive 缓存问题
场景:项目中遇到 vue 点击回退 从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1 ...
- seo需要处理页面html,详解处理Vue单页面应用SEO的另一种思路
(设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.Rea ...
- html加上百度统计,vue单页面应用加入百度统计
版权声明:本文为CSDN博主「钟文辉」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/qq_39753974/ ...
- Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办???(比如登陆页面)
<div class="all" v-if="$route.path!=='/login'" > Vue 单页面应用 把公共组件放在 app.v ...
- vue单页面背景颜色修改
最近在做项目中,使用vue开发移动端项目,遇到一个小问题,路由跳转同时修改当前页面的背景色. 下面简单说一下vue单页面应用,由于vue的单页面应用导致我们的项目只有一个index.html文件,然而 ...
- 模糊搜索——Vue单页面-Element UI
模糊搜索--Vue单页面-Element UI <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
最新文章
- [考试]20151013搜索
- C语言核心技术——函数
- W10关闭不必要的服务
- python语法基础知识案例_Python 语法速览与实战清单
- node.js ajax success,前端如何通过ajax和node.js交互?
- 编程实现 带符号加法溢出判断
- 2020中关村论坛百度平行论坛:探索中国AI开源与产业智能化模式
- 势头强劲的 Python PK 强大的 C++,究竟谁更胜一筹?
- hdfs中8031是什么端口号_删了HDFS又能怎样?记一次删库不跑路事件
- python 浮点数精确运算解决方案
- 松下服务器显示18号报警,松下伺服故障报警代码分析及处理
- c语言输入星期的首字母,关于简单C语言的练习输入一个正整数表示一个星期中的某一天,若此数字在[1,7]内,则输出对应英文星期名,否则表示输入我做...
- 基于opencv-python的车道线检测(高级)
- 大数据常用同步工具(DataX/Sqoop/Nifi/Canal等)
- 如何在 Facebook 上实现高效社交营销
- STM32F103C8T6移植uCOS基于HAL库
- 网络游戏网络封包破解
- 越狱Season 1-Episode 20: Tonight
- Lesson 55 The Sawyer family
- SimSiam:Exploring Simple Siamese Representation Learning