什么是数据埋点？怎么实现数据埋点？

码龄2年

关注

原创 2024-09-12 09:42:57 1k 阅读 GEO检测

数据埋点进阶- 高级技巧、实战案例、安全隐私数据埋点是一门艺术,也是一门科学。它需要我们深入理解业务需求,精心设计技术方案,同时还要考虑用户体验和隐私保护。通过本文的深入探讨,我们看到了数据埋点的强大潜力 —— 它不仅能帮助我们了解用户行为,还能驱动产品的持续优化和创新。阅读详情

什么是数据埋点？

埋点是在软件或应用程序的关键位置（如用户操作、事件触发、页面访问等）插入代码，以收集用户行为和应用程序性能数据的技术手段。

我们先了解时间埋点，比如，用户观看一段视频时中途退出不看了，为了方便用户体验，下次打开这段视频时应该从上次观看的位置接着播放，要实现这个就需要用到时间埋点。怎么实现呢？用户在打开视频时开始记录时间，关闭视频时生成一个埋点数据。把记录的数据通过接口发给后台，后台会统计视频观看进度。

埋点工具

我们需要封装一个埋点工具（方便复用和修改），记录单条埋点数据，上报埋点数据数组。

步骤：1.参考接口定义上报数据类型。2.封装埋点工具。3.使用埋点工具，完成记录和上报。

上报数据类型（根据后端接口写）比如：

export interface TimeItem {
  Id: string
  startTime: number
  endTime: number
}

封装工具函数

import { TimeItem } from '../../models'
import { http } from './Http'
import { logger } from './Logger'

class Tracking {
  list: TimeItem[] = []

  record(startTime: number, endTime: number, Id: string) {
    this.list.push({
      startTime,
      endTime,
      Id
    })

  }
//推送埋点数据给后台（不同网络请求方法不同，根据封装的http发送请求）
  async report() {
    await http.request<null>({ url: 'time/tracking', method: 'post', data: { timeList: this.list } })
    this.list = []
  }
}

export const tracking = new Tracking()

视频页调用埋点工具

  startTime: number = Date.now()

  onPageShow(): void {
    this.startTime = Date.now()
  }

  onPageHide(): void {
    tracking.record(this.startTime, Date.now(), this.item.id)
    tracking.report()
  }