《看完就懂系列》谈谈数据埋点的原理与实现

写在前面

之前公司接了个做广告的业务，甲方财大气粗，沟通也特别顺利。刚开始的时候，大家都摩拳擦掌兴致满满，觉得这个项目奖金一定会翻一番。于是第一版赶得很急，上线之后，点击率与转化率却一直不温不火。眼瞅着到嘴的项目奖金要飞走，leader说如果运维的小伙伴能根据具体原因快速定位，还怕点击率和转化率不“噌噌噌”的上涨吗？所以第二版先做个数据埋点吧~

那么什么是数据埋点呢？数据的原理是什么？数据埋点又该如何实现呢？

什么是数据埋点

数据埋点针对客户端或者网页应用，对其中某些或全部流程记录用户操作的日志信息，用来分析当前应用的使用情况，建立用户画像等。根据用户的日志信息，对产品提供优化 支持，对运营提供数据支持，对开发提供快速debug的支持。 比如访问数（Visits），访客数（Visitor），用户停留时长（Time On Site），页面浏览数（Page Views）和跳出率（Bounce Rate）都可以通过数据埋点来获取。

什么？上面的说明太正式？还是看不明白？那么以大冰块开的商场为例来通俗的讲一下：

大冰块有一座自己的商场（目前还在梦里），商场入驻了100家品牌商户，商场中安装了300个摄像头，招聘了100名安保监视人员，他们统计每天各个时间段的人流量以及消费金额，哪个商户人最多，哪个商户人流量最少，甚至门口的摄像头还会监视顾客从哪来的，出了商场又去了哪个商场，统计完了都会拿小本本记下来。

有一天大冰块来逛商场，首先商场大门摄像头记录了大冰块进入的信息，是车库上来的还是地铁口进来的。然后大冰块乘坐手扶电梯到了2楼。电梯记录了大冰块乘坐电梯的时间，以及大冰块的体重。大冰块到了二楼的服饰店，买了一件99的卫衣。商场店铺记录了大冰块的支付方式，支付方记录了大冰块的经济状况。

大冰块走的时候，商场就把大冰块的这些信息存了起来，至此大冰块的用户画像已经建立起来了。

怎么听起来和监视差不多？没错，就是和监视差不多，毕竟大数据下没有隐私~ 不然怎么杀熟/割韭菜 为我们提供更好的服务？不过技术无罪，有罪的只会是使用者。啊跑题了，我们只谈技术~

数据埋点的方式

数据埋点的三个级别：

这么说吧，初级的数据埋点相当于一个点，点与点之间可能毫无关系，每个埋点都对应一个独立的功能点。而中级的数据埋点相当于把点连成了线，每一部分埋点对应一个独立的流程。高级的数据埋点相当于一个面，能够涵盖多个流程，正是多个流程才组成了一个整体的业务功能。

数据埋点的方式：

操作信息收集可以大致分为两种：页面访问统计和统计操作行为，而现在埋点的主流有两种方式：

如果是产品早期，通常会使用第二种方式来采集数据，方便快捷，也不用担心维护问题。常见的统计平台如百度，阿里云，神策等，这些第三方还提供分析工具进行基本的分析。

而对于那些对数据安全比较重视，业务又相对复杂的公司则通常是使用第一种方式采集数据，并搭建相应的数据产品实现其数据应用或是分析的诉求。

代码埋点的优缺点

优点

缺点

数据埋点的注意事项

数据埋点的意义

数据埋点可以根据用户在应用上的一系列操作线索，提炼有用的信息，进行数据分析。重点不在于埋点的作用，其实在于获取埋点数据后的二次加工，如何分析输出业务分析结论。

1. 分析运营机制的合理性

2. 分析产品功能的合理性

3. 分析用户消费行为，挖掘流失点

4. 监控产品的流畅性

5. 分析不同渠道的用户行为差异

前端实现的流程逻辑

前端的实现主要就是根据浏览器的API进行检测用户的操作，然后获取操作信息记录在sessionstorage，当用户关闭当前页面时将日志信息发送给后台，或者定时发送给后台。举个简单的例子吧~

以监听页面停留时长及事件点击操作为例：

逻辑图：

部分代码实现

监听多页面用户停留时长

let stopTime
window.onpageshow = ()=>{
  stopTime = new Date().getTime()
}
window.onpagehide = ()=>{
  stopTime = new Date().getTime() - stopTime
  localStorage.setItem(window.location.href+'stopTime', stopTime)
}

监听单页面用户停留时长

// 也可放在路由拦截中做
let stopTime
window.addEventListener('onload',(e)=>{
  stopTime = new Date().getTime()
})
window.addEventListener('popstate',()=>{
  let t = new Date().getTime() - stopTime
  stopTime = new Date().getTime()
  localStorage.setItem(window.location.href+'stopTime', stopTime)
})

监听用户点击事件

const myBtn = document.getElementById("myBtn")
myBtn.addEventListener("click", ()=>{
    localStorage.setItem('click', JSON.stringify({"myBtnclick":myBtn,"time":new Date().getTime()}))
})

监听请求响应时长

// 这部分代码应该在全局封装的Ajax中做，或者在前端框架里的http请求与相应拦截中做

let requestTime
// 请求拦截
myAjax.request.use(config => {
   ...
   requestTime = new Date().getTime()
   localStorage.setItem(res.url, JSON.stringify([{"startTime":requestTime,"endTime":0}]))
   ...
}, error => {
   ...
   return Promise.reject(error)
})

// 响应拦截
myAjax.response.use(res => {
   ...
   let data = JSON.parse(localStorage.getItem(res.url))
   let obj = data.requestTime.find(e=>e.startTime === requestTime)
   obj.endTime = new Date().getTime()
   localStorage.setItem(res.url+requestRandom, JSON.stringify(data))
   ...
}, error => {
   ...
   return Promise.reject(error)
})

以上的代码只是提供一个思路，具体的埋点还需要具体的分析与技术应用。不过只要掌握了整体的思路方法，代码实现起来就没什么难度了。

写在后面

这是大冰块《看完就懂系列》的第6篇文章，《看完就懂系列》旨在把一些常见的概念或方法以通俗易懂的方式呈现出来。欢迎大家点击其他文章一起讨论学习：

• 《看完就懂系列》Ajax是不是凭一己之力造就了整个前端的生态圈？
• 《看完就懂系列》项目中的权限管理复杂吗？
• 《看完就懂系列》天哪！搞懂节流与防抖竟简单如斯~
• 《看完就懂系列》15个方法教你玩转字符串
• 《看完就懂系列》字符串截取方法substr() 、 slice() 和 substring()之间的区别和用法