首先，本人水平有限，也是第一次接触埋点统计用户行为（额，也许我这个不叫埋点）。
下文只是我自己在实践中的一些想法和记录,还请大家指导。
1.项目背景
项目是一个聚合类的webapp，基于vue开发提供电影，商城，资讯等服务。
部署在定制的硬件盒子上，用户在一定区域内连上盒子wifi即可享受服务。
2.要采集哪些信息？
根据项目，我把采集的信息分为以下5类：
用户基础信息，电影访问信息，商品访问信息，资讯访问信息，其他
后期是想做成可视化平台的，主要想实现：
1.某一时间段内新用户变化
2.用户设备基础信息
3.某一时间段内某一电影的点击数量，总观看时常
4.某一时间段内某一商品点击数量，总浏览时长
2.1用户设备信息，主要包括以下字段
{
browse_type: xxxx, //分类id
screen_resolution: xxxx, //屏幕分辨率
system: xxxx //操作系统类型
mobile_phone_brand: xxx //手机品牌
mobile_model: xxxx //手机型号
browser: xxx //浏览器名称
browse_point: xxxx //web指纹
...
}
这些信息在用户接入后像后台发送一次
其中，操作系统，手机品牌，手机型号，浏览器名称等都是通过User-Agent获取的
对User-Agent的解析还是有些复杂的，在对比了几个开源的解析项目后，我选择了
在上面的字段中还有一个web指纹字段，一开始我想要一个确定用户唯一性的字段
但是由于我们项目的特殊性，除了商城下单需要注册，其他资源只要接入wifi就可以访问，无需注册
最后我选择了web指纹这一技术 （暂时替代，这技术好像有坑）
获取web指纹后存储在cookie中，之后每次上传数据都带上该字段
web指纹的一个实现（网上抄的）
export default function createFingerprint (domain) { // 生成浏览器指纹
var fingerprint
function bin2hex (s) {
let i, l, n
let o = ''
s += ''
for (i = 0, l = s.length; i < l; i++) {
n = s.charCodeAt(i)
.toString(16)
o += n.length < 2 ? '0' + n : n
}
return o
}
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
let txt = domain || window.location.host
ctx.textBaseline = 'top'
ctx.font = "14px 'Arial'"
ctx.textBaseline = 'tencent'
ctx.fillStyle = '#f60'
ctx.fillRect(125, 1, 62, 20)
ctx.fillStyle = '#069'
ctx.fillText(txt, 2, 15)
ctx.fillStyle = 'rgba(102, 204, 0, 0.7)'
ctx.fillText(txt, 4, 17)
let b64 = canvas.toDataURL().replace('data:image/png;base64,', '')
let bin = atob(b64)
let crc = bin2hex(bin.slice(-16, -12))
fingerprint = crc
Cookie.set('webPoint', fingerprint)
return fingerprint
}
2.2电影访问信息，主要包括以下字段
观看的电影id，在某一电影页面停留时间，进入退出页面时间
{
browse_type: xx, //分类id
movie_id: xxx, //电影id
browse_time: xx, //浏览时间
start_time: xx, //进入页面时间
end_time: xxx, //离开页面时间
browse_point: xxx //web指纹
}
这些信息的获取我通过vue的路由钩子实现
每次跳转时候有from和to对象，里面包含着路由信息，可以取到id
浏览时间我通过两次的router.beforeEach生成的时间戳相减获得
流程大致是这样的：
1.用户从电影列表页跳到电影id为1的观看页面开始看电影，跳转前获得时间戳t1和跳转电影的id
2.看了一会电影后用户跳转到其他页面跳转前获得时间戳t2
3.t2-t1就相当于用户在电影id为1的观看页面停留的时间（可大致等效为该电影观看时长）
代码实现：
//时间戳队列，每次只有两个
var time = []
router.beforeEach((to, from, next) => {
let startTime = new Date().getTime()
if (time.length < 2) {
// 模拟队列，保证队列中每次只有两个元素
time.push(startTime)
}
if (time.length === 2) {
//某一页面停留时间
let browse_time = time[1] - time[0]
//相同的字段
let baseRes = {
browse_time: browse_time,
start_time: time[0],
end_time: time[1],
browse_point: Cookie.get('webPoint')
}
//如果当前页面是电影播放页
if (from.name === 'videoPlay') {
//电影页面采集信息自有逻辑处理，发送请求
} else if(){
//商品页面采集信息自有逻辑处理，发送请求
} else {
// 其他不重要的页面就传一个url了
}
//模拟队列，保证时间队列中每次只有两个
time.shift()
}
next()
})
3.思考
以上就是我实现的简单的关于用户信息的收集，个人感觉还是很不完善
其实在动手自己实现前也查了不少关于前端埋点的解决方案，主要是：代码埋点，可视化埋点，全埋点
然而大多数文章只提了概念很少有详细例子，我也感觉无从下手
关于埋点这块还请大家多多指教，关于我自己的项目中实现的数据上报也希望大家多多吐槽
一只小菜鸟，今天开始写文章，排版不好大家多多见谅 (●′ω`●)
