1. 首先需要知道什么是埋点
所谓“埋点”，是数据采集领域（尤其是用户行为数据采集领域）的术语，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。比如用户某个icon点击次数、观看某个视频的时长等等。
埋点的技术实质，是先监听软件应用运行过程中的事件，当需要关注的事件发生时进行判断和捕获。
网站分析、用户行为分析、产品数据分析等领域，以帮助企业了解用户行为习惯、优化产品设计、改进用户体验，从而提升产品的用户满意度和市场竞争力
其实异常捕获也算是一种埋点.
所以对于前端来说, APP, 小程序, 网页可能都需要埋点. 如果你使用的是各种框架就又需要注意框架里应该怎么埋点
2. 最传统的方式, 也就是手动去埋.
进入页面, 你根据页面生命周期, 去算, 点击了哪些, 去布置事件, 也可以拿performance数据
存在对象里, 存在localstorage, indexdb里
然后在特定时间或者事件点, 上传服务器.
觉得太麻烦就用别的统计, 比如当年我用过的百度
引入即可获得页面上的活动.
3. 可视化埋点
传统手动埋点的问题在于麻烦, 就是沟通麻烦, 程序员你开发也麻烦. 所以有可视化埋点这个功能.
很美好, 就是产品用可视化的方式, 点击软件, 网页, 然后选择要怎么埋点. 然后就不需要程序员写代码了
好处, 灵活, 不用开发人员就可以搞.
坏处
- 大概率要接入第三方api, 可能收费
- 性能不明
- 特殊场景无法处理
- 兼容性不明
- 特殊平台可能不可用, 比如说你使用uniapp这种方案, 你怎么接入第三方埋点呢? 可能还是只能接入页面埋点, 关注一下整体性能, 但是无法实现可视化埋点.
最大的问题在于, 很多项目早期是不需要埋点的, 到达一定规模才开始做这件事, 这个时候代价就比较大了
如果只是简单的使用埋点功能, 我觉得ok. 省的开发了
大方向上主要是这两个分类, 无非就是自己开发或者引入另一套系统
4. 应该怎么埋点? 埋点的具体方案是什么?
前面是大方向, 那么当业务来了, 究竟需要怎么去埋点?
Vue埋点初探 | 前端埋点 | PV埋点| 交互埋点 - 掘金
在上面这篇文章中提出了几个方案
- 命令式埋点是用比较常见的方式，在用户产生行为的地方使用js方法进行数据上报，优点是埋点方式比较简单，缺点是与业务耦合度较高
- 声明式埋点是在具体DOM元素上进行数据绑定，只需组件开发人员在sdk上制定埋点方案，业务开发人员设置数据即可，优点是埋点代码与具体的交互和业务逻辑解耦
- 可视化埋点是通过可视化工具配置埋点，需要另外配套一个平台控制埋点的埋入，优点是自动生成埋点代码嵌入到页面中，减轻业务开发人员的埋点负担，目前做得好得例如Mixpanel
- 无埋点是前端自动采集全部事件，上报埋点数据，由后端来过滤和计算出有用的数据，优点是完全无需业务参与，完全与业务解耦，目前比较流行的例如GrowingIO
这个东西在词汇上很混乱
无埋点和可视化埋点有点冲突.
总之可以理解为他给出了4种方案
- 自己纯手写
- 自己写库(你叫sdk也可以), 然后初级程序员调用库埋点, 本质上和第一种没区别, 只是增加了分工
- 可视化配置埋点
- 全部收集
可视化埋点我刚才说了, 优缺点.
全部收集, 也就是用户所有动作都捕捉, 页面滑动, 滚动条滚动, 点击, 双击…….
这种收集简单粗暴, 但是数据可能没有针对性. 因为数据多, 压力可能稍微大一点.
05. 自己实现的具体方案
很多时候还是要自己写, 去买别人的.
这种情况下怎么快速的高效的埋点?
页面pv, 这个主要是受收集页面加载时间, 性能, 报错, 用户停留时间等等
这个就看框架生命周期了, 如果是原生的dom也有生命周期.
操作的记录
vue 用自定义指令解决问题
也就是所谓的声明式
react 我不是很了解. 但是高阶组件(也就是闭包) 我觉得可以解决.
ag 就完全不熟悉了.
剩下的”痛点” 就在于如果让产品快速自定义, 形成一个文档很麻烦. 这也就是为什么很多时候 可视化埋点方便的点.
基于vue directive实现声明式埋点方案 | 风痕 · 術&思
这篇文章的做法是, 写chrome插件, userscipt.
可以解决部分问题