说说前端那些事——数据埋点

前言：如果技术不是为了解决问题，那将毫无意义

技术背景

大数据时代，数据领跑时代，所有公司都开始收集能收集的数据。基于这种情况，公司需求，对页面进行数据埋点，针对用户进行用户行为统计。

埋点解析

1. 什么是埋点？
   可以理解为‘埋点’类似于‘埋雷’，埋点不同于埋雷的是，埋雷面对的是敌人，埋点面对的是用户。敌人踩上雷就爆炸，埋点踩上只会发送信息给后端

2. 怎么埋点？
   根据‘埋雷’的做法，对某一个地方（标签）埋下一颗地雷‘标记’，最好的埋雷是不让敌人发现，不知不觉的触发。埋点一样，不过前端在某个标签做个标记不让用户看见很简单，我们更需要追求最好的不影响代码逻辑。

需求分析

根据前端也是半个产品的理念来说，我们应该明白我们可能需要收集什么信息，运营，产品，数据分析需要什么数据来对用户进行分析。作为半个产品，我就只能分析出以下三点：
1. 用户怎么找到该产品的
一是方便统计什么推广有效，什么推广打水漂，以此决定是否继续某些推广，撤销某些推广
二也是方便统计产品入口有多少，产品用户聚集的地方在哪
2. 用户感兴趣的是什么
知道用户感兴趣的是什么，就知道该怎么去更好的更新产品，取消或改进不感兴趣的产品。
3. 用户有什么特征
分析用户特征，寻找产品用户群体，针对群体进行改进更新，以及对其他群体进行吸引等等

埋点信息

1. 由需求分析我们就知道我们可能需要什么信息了，一是需要知道打开该页面的前一个页面是什么就能获取其用户入口页面是什么，该信息可以由以下方法获取信息document.referrer

2. 我们还需要知道用户感兴趣的是什么，从代码来说，凡是用户点击过的按钮都是用户所感兴趣的，所有我们需要统计用户点击了什么按钮，该信息可以由点击事件来获取

3. 我们也需要知道用户特征，其特征主要体现在客户端信息，比如用户所用浏览器信息，比如用户所用设备信息，该信息可以由navigator.userAgent以及获取设备宽高等信息获取，我们甚至可以获取用户访问的时间是什么以统计用户喜欢在什么时段访问，以后活动也可以主要放在某些时段。

发送信息

当我们收集了这些信息该如何发送？所想方案有几种
1. ajax发送
2. jsonp发送
3. img发送
第一种发送方案好理解，不过第一种方案发送如果涉及到跨域就需要采用cors跨域策略，同样ajax也要受低版本ie的限制做兼容，cors跨域也要受低版本跨域限制。

第二种发送方案也好理解，传统jsonp发送，能跨域，能兼容低版本ie，需要后台配合。总体来说没问题

而我们所采用的方案是第三种方案，基于img标签的发送方法，原因有三：
其一，img发送其本质可以jsonp一样，src资源请求没有同源策略限制，能实现跨域请求，能兼容ie低版本
其二，我们所有的点位信息发送，不需要接受返回信息，无论成功与否不需要处理，即使需要处理也仅仅需要简单的是否成功状态，这样也不需要后台进行配合
其三，在javascript中创建img标签之后，设置其src值就会直接请求数据，不需要将img标签append到页面，而script标签则不行

埋点思考

既然埋点，如何埋点？如何更快速的埋点？这里有三种埋点方案
1. 给每个需要埋的点手动加上onclick事件
2. 给每个需要埋的点自动加上onclick事件
3. 给body加上onclick事件，使用事件委托来做

百度统计的埋点采用的是第一种方案，手动加上onclick事件，点击调用函数发送信息。
基于第一种方案的修改，给每个需要埋点的标签加上某个属性，然后通过javascript选择所有含有该属性的标签进行事件绑定，将该私有属性的值作为信息传递
第三种则是考虑到如果埋点过多，对事件绑定则过多，可能影响的性能。所有在第二种方案的基础上进行改进，使用对body进行事件绑定，采用事件委托的方式。当用户点击时，获取其目标标签，然后进行递归查询父节点是否含有该私有属性，如果有则发送其属性值给后端，当然，为了性能考虑，所以递归结束条件除了body节点意外在额外加一个step条件，向上递归3-5层以内。

结合以上方案及思考

博主有个案例可供参考：https://github.com/StopllL/Dpoint

打点信息延伸

除了搜集产品所需信息之外，对于前端优化的信息，我们依然可以收集，比如页面响应时间。
同样，我们还可以收集更多的用户感兴趣信息，比如用户在页面某个大致位置的停留时间等等。