前端性能优化 - 埋点 - 《前端手册》

介绍
- 概念：
- 用途：
埋点方案
质量保障
SDK
常见数据埋点
埋点治理
老牌参考
埋点系统
- 参考：

介绍

概念：

构建一个数据平台，大体上包括数据采集、数据上报、数据存储、数据计算以及数据可视化展示等几个重要的环节。其中，数据采集与上报是整个流程中重要的一环，只有确保前端数据生产的全面、准确、及时，最终产生的数据结果才是可靠的、有价值的。

用途：

数据监控，分析用户行为
- PV
- 漏斗
- 行为路径
性能监控，提升用户体验
- 首屏时间
- 。。。
异常监控，避免故障

埋点方案

三种埋点方案：

代码埋点（浸入式埋点）
- 前端埋点
  - 客户端
  - 内嵌h5
  - 站外h5
- 后端埋点
无痕埋点（可视化埋点）
全埋点（无埋点）

前端埋点和后端埋点，哪个更科学？

	代码埋点（前端）	代码埋点（后端）	无痕埋点	全埋点
概念	需要埋点的节点调用接口直接上传埋点数据	-	通过可视化工具配置采集节点，在前端自动解析配置并上报埋点数据	并不是真正的不需要埋点，而是前端自动采集全部事件并上报埋点数据，在后端数据计算时过滤出有用数据
优势	事件标识明确业务参数丰富事件的触发方式可自定义分析方便、精准	数据更准确无需随前端发版	前端接入成本低，非开发人员可操作用户动作收集完整，不会漏失	零埋点成本抓取用户行为全量数据，任何操作行为都会被上传
劣势	开发成本较高依赖前端发版（严重问题只能采取热修复解决）有一定的数据丢失	开发成本较高前端属性获取需要接口开发	有用、没用的数据都会收集无法采集到特殊的行为动作、业务参数采集到的信息需要进行二次标注，才可以被用户识别当按钮的位置不固定、名称存在重复或页面重构时，无法做到准确的标识	噪点多
适用场景	用户分析	关键行为	粗粒度的快速业务探索	无需埋点进行传参页面的url、APP的包名等点击元素的xpath路径、title或约定的dom元素
案例	加入购物车	购买成功、注册成功	新功能快速上线迭代效果评估	运行活动页

埋点事件

曝光
点击事件
页面停留 Tp = leaveTime - enterTime

声明式 & 命令式

//自动发送埋点方式，举例：
<button data-utm-click="${did}" data-utm-data="${业务数据}">
//手动发送埋点方式，举例：
const utmCnt = g_UTM.batchSend('触发类型（click/browse）等',[{
    utmCD:['区块信息','位置信息'],
    bdata:{key:'其他业务数据'}
  },{
    utmCD:['001','008'],
    bdata:{key:'value'}
  }
]);

埋点上传

实时上报
离线上传

质量保障

安全性：

https
数据加密： md5、sha112

规范

命名规范
建立指标字典
流程约束

参考-有赞《埋点质量保证》
可能出现的问题：

平常数据稳定，突然过高
事件重复&丢失
事件参数错误
前端常见错误
事件断流

保障机制：

准确登记（定义上报要素）
实时校验
完备性/扩展性
1. 分析校验规则，抽象语义
2. 开关、配置化
可解释/可分析
定时监控（如事件断流、异常波动）
专项优化
评估模型
质量中心

SDK

美团点评前端无痕埋点实践

常见数据埋点

常见数据埋点内容包括：访问量、停留时长、曝光量、点击量、跳出率等

点击埋点

曝光埋点

停留时长

埋点治理

老牌参考

百度方案：请求一个静态资源的方式向后端请求

https://map.baidu.com/mobile/img/t.gif
newmap: 1
module: place
action: clarify
page: clarify
third_party: 
wise_net: 0
is_landing: false
c: 1
resid: 31
da_ver: 2.1.0
t: 1589634432707
da_src: clarifypg.default.bottombannerandroid
da_act: click

埋点系统

参考：

云音乐大前端|前端组件化埋点的实践
 字节跳动大规模埋点数据治理最佳实践