Fork me on GitHub

可视化埋点

埋点

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

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

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

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

三种埋点的对比:

埋点方式 优点 缺点
代码埋点 技术实现难度低,数据实时性好 开发效率低,难于维护,数据准确性依赖于埋点的正确性,APP端依赖于发版,不具备热更新能力;web端热更新能力差。
可视化埋点 开发效率高,易于维护 技术实现较为复杂,目前好的可视化埋点产品都是收费的
无埋点 易于维护,数据全面 牺牲部分实时性,技术实现较为复杂

Mixpanel主要流程如下:

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

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

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

[4]: https://docs.zhugeio.com/quickstart/

我知道是不会有人点的,但万一有人想不开呢?