埋点

所谓“埋点”，是数据采集领域（尤其是用户行为数据采集领域）的术语，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程

埋点的技术实质，是先监听软件应用运行过程中的事件，当需要关注的事件发生时进行判断和捕获，然后获取必要的上下文信息，最后将信息整理后发送至服务器端。所监听的事件，通常由操作系统、浏览器、APP框架等平台提供，也可以在基础事件之上进行触发条件的自定义（如点击某一个特定按钮）。一般情况下，埋点可以通过监测分析工具提供的SDK来进行编程实现。
埋点的业务意义显而易见，即帮助定义和获取分析人员真正需要的业务数据及其附带信息。在不同场景下，业务人员关注的信息和角度可能不同。典型的应用场景有面向数字营销领域的分析，以及面向产品运营领域的分析。前者注重来源渠道和广告效果，后者更在意产品本身流程和体验的优化。两者各有侧重，也可以有一些交叉。所以，对于不同的项目和分析目的，应当设计不同的埋点方案。

近年来，埋点的方法论上也出现了一些业界新趋势，主要分为一下三种：

• 代码埋点 在需要埋点的节点直接调用接口上传数据，代表方友盟。
• 可视化埋点 通过可视化工具配置采集节点，在前端自动解析配置并上报埋点数据，代表方案是已经开源的Mixpanel。
• 无埋点 并不是没有埋点，而是在前端采集所有数据并上报，然后在后端通过计算过滤出有用的数据，代表是国内的GrowingIO。

三种埋点的对比：

Mixpanel主要流程如下：

1. 设置要埋点的网址->生成token
2. 在宿主页面插入代码
3. 在mixpanel页面点击进入宿主页面(下面这种方式在单页面应用中可能存在问题)
   a：在宿主URL添加上一段查询hash代码
   b：获取hash代码解析出state并保存到sessionStorage
   c：删除宿主URL后的hash代码
   d：初始化
   e：判断是否是在编辑状态下

下面是实现的简单流程图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

start=>start: 加载JS
cond=>condition: 判断sessionStorage是否存在指定key
estep1=>operation: 加载editor.js
estep2=>operation: 显示添加埋点的导航栏
estep3=>operation: 点击添加按钮开始埋点
estep4=>operation: 点击要埋点的元素
estep5=>operation: 弹出配置对话框进行配置
estep6=>operation: 点击保存配置完毕
estep7=>operation: 点击退出按钮退出编辑
nstep1=>operation: 从服务器获取埋点数据
nstep2=>operation: 在页面找到对应的元素并绑定事件
start->cond
cond(yes)->estep1->estep2->estep3->estep4->estep5->estep6->estep7->estep3
cond(no)->nstep1->nstep2

参考文档：
诸葛IO的JS可视化埋点-使用指南
诸葛IO的JS全埋点接入文档
诸葛IO文档