Skip to main content

All our posts

什么是埋点

Zhao chen

介绍#

概念：#

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

用途：#

  • 数据监控， 分析用户行为
    • 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. 事件重复&丢失
  3. 事件参数错误
  4. 前端常见错误
  5. 事件断流

保障机制：#

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

SDK#

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

常见数据埋点#

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

点击埋点#

曝光埋点#

停留时长#

参考：

云音乐大前端|前端组件化埋点的实践