3 种埋点方案

1. 代码埋点
2. 可视化埋点
3. 无痕埋点

代码埋点

在应用代码中手动插入特定代码来收集数据，通常在点击和展现回调中上报

• 优点：灵活、准确
• 缺点：维护负担；需要介入代码
• 适用场景：大多数场景
• 注意事项：
  • 代码解耦
  • 参数校验

解耦问题

状态、hook、UI 组件需要相互解耦：

1. 涉及埋点的状态，尽量抽离至外部。共同配合。数据抽到外层，埋点调用包装 hook，UI 组件仅传入必要参数给 hook

// 两种上报方式
const Item = function() {
  const handleClick = useReportClick((report) => {
    report({a: 1})
  }, [])
  return <button onClick={handleClick}></button>
} 

const Item2 = function(){
  const report = useReport()
  const handleClick = () => {
    report({a: 1})
  }

  return <button onClick={handleClick}></button>
} 

// hooks
const useReportClick = (handler, deps) => {
  const user = useAtom(userAtom)
  const report = (props) => {
    realReport({...props, uid: user.id})
  }
  return useCallback(() => {
    handler(report)
  }, deps)
}

const useReport = () => {
  const user = useAtom(userAtom)
  return (props) => {
    realReport({...props, uid: user.id})
  }
}

可能还有更好的抽象模式，后续可以参考 Lyra 的埋点模型设计。

参数校验

如何在开发阶段进行埋点校验，埋点防劣化

1. 埋点平台定义各埋点的参数格式
2. 开发环境拉取埋点的类型定义
3. 静态检测：埋点代码编写时进行类型检测
4. 运行时检测：线上运行埋点校验（统计不符预期的埋点情况）

WIP：后续有空再梳理具体实现方案

可视化埋点

利用可视化工具配置需要收集的事件、属性和数据，然后将工具生成的代码嵌入应用中。

• 优点：技术门槛低；无代码维护问题
• 缺点：灵活性受可视化工具限制；难以定制
• 适用场景：运营类页面

无痕埋点

自动捕获和上报，无代码介入

• 优点：无技术门槛和任何开发成本
• 缺点：无法完全捕获；可能会引起
• 适用场景：技术指标，...