【解决方案】数据埋点的一点思路与vue的SPA单页面实践
一、前言
数据埋点是监控用户在应用中的表现行为,对于TO C的产品迭代来说越来越重要。
数据埋点是产品需求分析的来源,检验功能是否达到预期。前端是更贴近用户,我来说说数据埋点在系统开发中的方案。
二、数据埋点方案分析
不同的产品对于数据的关注的角度不同,根据需求来采集和设计不同的方案。比如信息流的产品抖音,关注用户的停留时间更高。比如商品类的注重的是“复购率”,统计新老用户。
数据埋点统计通常分为:
(1)页面访问量统计
(2)功能点击量统计
我们今天只讨论页面访问量统计,在开发系统中自己定义页面访问量相关数据的统计。
通常我们接入的是第三方的服务,比如百度统计,就有相关页面访问统计,以及用户的画像等等。但是作为开发人员来说,如果在自己做的系统中,按照自己的需求定制化数据埋点是不是很cool。
1、页面访问量相关统计
页面访问量通常分为:PV和UV。
(1)PV:页面访问人次。
(2)UV:页面访问人数。
页面访问量,并非仅仅是内容吸引力决定的,影响因素有:入口,页面位置,到主页面深度等等。入口主要是UI视觉相关人员设计。入口位置可以通过数据分析后进行调整,到主页面深度可以分析用户的访问路径进行调整。
采集页面加载 from、to 以获知用户访问路径:
分析可以知道用户普遍访问深度,每一层和每一个页面的流失率可以很直观看出来,从而调整核心页面入口源和深度。
还有一些特殊情况出现:比如PV稳定的页面访问量突然暴跌,可能是加载失败或者报错。
三、数据埋点方案实际操作
接下来我通过自己的系统接入数据埋点:https://chat.chengxinsong.cn
技术架构:vue+vuex+koa2+mysql+websocketIO+redis等。
1、方案一:全局定义Router.beforeEach方法
在main.js中全局定义
/*全局PV统计*/
router.beforeEach((to, from, next) => {
let flag = localStorage.getItem("HappyChatUserInfo") !== null ? true: false;
let data = {
type: 'visit',
user_id: flag ? JSON.parse(localStorage.getItem("HappyChatUserInfo")).user_id: '获取不到userId',
time: (new Date()).getTime(),
params: {
from: {
name: from.name || '',
path: from.path || '',
query: from.query || ''
},
to: {
name: to.name || '',
path: to.path || '',
query: to.query || ''
}
}
}
App.methods.logEvent(data);
next()
})
停留时间可以通过from和to页面的时间(跳转页time - 当前页time)。关闭应用的时候如何统计?可以考虑window.onunload方法
window.onunload = function unloadPage() {
let data = {
type: 'close',
user_id: localStorage.getItem("HappyChatUserInfo") !== null ? JSON.parse(localStorage.getItem("HappyChatUserInfo")).user_id: '获取不到userId',
time: (new Date()).getTime(),
params: {
from: {
name: '关闭前',
path: router.currentRoute.path || '',
query: router.currentRoute.params || ''
},
to: {
name: '关闭',
path: '',
query: ''
}
}
}
App.methods.logEvent(data);
}
这时候我们需要去定义接口传参,接口方法是logEvent。
我们自定义Vue插件App的method,用于埋点数据向服务器发送。
我们在App.vue中定义
具体方法
/* 数据埋点 */
logEvent(opts) {
let data = {
type: opts.type,
user_id: opts.user_id,
time: opts.time,
params: opts.params || {}
}
return Api.pvLog(data).then(res => {
console.log(res)
}).catch(function (error) {
console.log(error);
});
}
其中Api是axios的接口统一封装的方法。
数据到了后端怎么保存,保存哪些参数,根据需求来定义,比如常见的:客户端IP,数据类型type,用户id,访问时间,from中的页面名字name,路径path,查询茶树query等等。
后端接口的控制层。(接口需不需要验证,根据需求来设计。)
let pvLog = async (ctx, next) => {
const data = ctx.request.body;
let req = ctx.req;
let clientIP = req.headers['x-forwarded-for'] ||
req.connection.remoteAddress ||
req.socket.remoteAddress ||
req.connection.socket.remoteAddress;
userModel.logPV([clientIP, data.type, data.user_id, data.time,
data.params.from.name || '', data.params.from.path || '', JSON.stringify(data.params.from.query) || '',
data.params.to.name || '', data.params.to.path || '', JSON.stringify(data.params.to.query) || '']);
ctx.body = {
success: true
}
};
接下来就是数据入库操作,代码就不放了,源码地址:
1、后端代码:https://github.com/saucxs/happy-chat-node
2、前端代码:https://github.com/saucxs/happy-chat-web
欢迎fork和start。
2、方案二:全局注册混入beforeRouteEnter和beforeRouteLeave
虽然官方说,慎用全局混入对象。
放一下示例代码
import Vue from 'vue'
Vue.mixin({
beforeRouteEnter (to, from, next) {
next(vm => {
vm.$app.logEvent({
type: 'visit',
name: to.name,
time: new Date().valueOf(),
params: {
from: {
name: from.name,
path: from.path,
query: from.query
},
to: {
name: to.name,
path: to.path,
query: to.query
}
}
})
})
},
beforeRouteLeave (to, from, next) {
this.$app.logEvent({
type: 'visit',
name: to.name,
time: new Date().valueOf(),
params: {
from: {
name: from.name,
path: from.path,
query: from.query
},
to: {
name: to.name,
path: to.path,
query: to.query
}
}
})
next()
}
})
我们需要考虑是否在应用关闭的时候触发beforeRouteLeave方法?
还有两个问题:
(1)每一个页面都有钩子函数beforeRouteEnter,beforeRouteLeave方法,如何进行合并。
(2)有时候涉及到子路由问题,子路由的页面会调用2次beforeRouteEnter和beforeRouteLeave方法,PV会翻倍。
所以觉得方案二仅供参考,慎用。
其中,this.$app.logEvent(vm.$app.logEvent)等同于方案一的App.logEvent。
四、全局PV统计方案总结
根据实际需求和评估使用不同的方案:
(1)SPA应用,单入口,在入口文件全局定义Router.beforeEach就可以,就是方案1。
(2)MPA应用,多入口,可以封装公用的逻辑,免去重复构造entry成本。
(3)SPA+MPA混合应用:采用MPA方案就行。
(4)SSR应用:追求SEO采用服务端渲染(SSR),采用不同的模板渲染页面,直接统计调用模板的次数就可以知道PV相关数据。
至于 UV,统计 PV 时采集 userId 去重即可。若应用无用户管理体系,采集 IP、deviceId 也可粗略得知 UV(不精准)。
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/791.html)
- 记录一次nginx故障:recv() failed (104: Connection reset by peer) while reading response header from upstream,
- 微信小程序初体验,入门练手项目--通讯录,部署上线(二)
- 微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器(一)
- thinkjs性能优化之nginx配置
- 开学AI登场!南京高校用人脸识别查考勤管理学生,还敢逃课、玩手机?姚AI变脸热到爆!开源换脸工具FakeSwap今登GitHub排行榜第二位,ICLR飞升,IJCAI降级:清华的新版AI顶会评级引发学术圈热议,意外!已获6700万美元投资的自动驾驶LiDAR创业公司关门了
标签云
图文推荐
“深度学习”这十年:52篇大神级论文再现AI荣与光,12岁上大学、31岁成最年轻IEEE Fellow,前百度总裁张亚勤加盟清华,全球女性福音!DeepHealth深度学习模型检测乳腺癌完胜5名放射科医师,读博无门,就业碰壁,孤独当了7个月“民科”后,我的论文中了顶会Spotlight
saucxs 2020-01-03 10:04:09
1200 万部手机、500 亿实时位置数据,上帝视角还原特朗普全天行踪,自动驾驶玩漂移 斯坦福最新研究:《头文字D》无人车版来了,印度裔又要统领美国科学界?特朗普提名他领导美国国家科学基金会,GitHub排名第一!免费最强“抢票神器”在手,程序员抢票再不用跪求加速包
saucxs 2019-12-25 10:08:05
蝉联AI专业全球冠军!清华力压CMU再夺CSRankings高校AI排行王座,波士顿动力CEO:不排斥军方订单,就想你粗暴地对待机器狗,亚马逊Alexa突然发疯,读着论文教主人自杀:你活着地球人口会过剩,图神经网络的ImageNet?斯坦福大学等开源百万量级OGB基准测试数据集
saucxs 2019-12-24 09:57:45
2020 AAAI Fellow名单出炉!深度学习先驱Bengio和LeCun双双入选,李世石最后一战不敌AI“韩豆”!唯一战胜过AlphaGo的男人正式退役,GAN和PS合体会怎样?东京大学图像增强新研究:无需配对图像,增强效果还可解释,2019年最受关注的100项研究,AI“复活”蒙娜丽莎排第一
saucxs 2019-12-23 09:58:10
这家AI公司用面具破解中国人脸识别系统!微信、支付宝、火车站无一幸免,OpenAI公开Dota 2论文:胜率99.4%,「手术」工具连续迁移训练,9岁神童大学毕业前突然退学,转赴美国攻读电气工程博士,Reddit热议:15岁高中生用神经网络建立生命进化“新宇宙”
saucxs 2019-12-17 09:45:30
- 东方财富
- saucxs博客园
- weekly周报
- loveBook
- 前端博客
- 技术交流学习社区
- saucxs
- segmentfault
- saucxs的博客
- haorooms
- luckyscript
- 东方财富期货
- 峰云就她了
- binlive
- songEagle
- 且听风吟
- (TX)Heying Ye
- CG Online Judge
- Chris's Blog
- vueRouter
- 龙恩0707
- 鑫空间,鑫生活
- 木易杨
- MDN-js
- Cherry's Blog
- InterviewMap
- 安安哥的小戏台
- xiaojun1994-cat
- JavaScript-Garden
- junruchen-daily
- 秋天爱美丽
- web-summary-daily
- w3cplus-tb
- 潜行者m
- 于江水
- KieSun-git
- cnodejs
- aerminBlog
- fex_bd
- gwuhaolin-git
- Deboy's Blog
- react-china
- react.docschina
- Vuejs社区
- vuejsDoc
- cdnSocketIo
- shuaihuaCC
- colorize
- stazhu
- 前端学习
- IBM Dev社区
- linux运维笔记
- webpackDoc
- sayskyGithub
- 前端里
- 996.ICU
- electronjs
- CS-Notes
- mqyqingfengBlog
- beego官方
- 编码规范
- 阮一峰个人网站
- sessionstack
- damonareGoUp
- 咀嚼之味
- fe-interview
- xd-tayde/blog
- css-tricks
- ghmagical个人中心
- markyunp6
- hellogithub
- 霜序廿
- rin部落
- 建站素材
- 前端资源网
- CSS开发手册
- web技术交流
- 程新松个人网站
- wangEditor
- 小松博客
- 交流学习社区