React 埋点（案例分享）

前段时间在开发过程中有一个埋点需求，一开始还不知道什么是埋点，在一番了解过后有所见解，故在此分享！（本次分享主要以React项目为背景，事实上主要还是思想，基本没有使用过多的框架提供的API。）

首先来解释何为埋点：

• 埋点（Burying Point，BP）就是将用户在网站中的某些交互行为进行上报，从而收集对某些功能、页面的访问情况进行收集，进一步为产品优化、数据分析提供支持。
• 举个例子：项目中新上线了一个页面，该页面为用户提供了某些信息的展示，由于是新页面，我们想知道这个页面在一段时间内用户的访问量以及具体使用了哪些功能进行数据收集，以针对性的优化页面。此时就需要这个新页面以及某些交互功能进行埋点了。

埋点的流程实际上十分简单：用户交互行为-->携带数据发送请求

那么我们需要明确以下几点：

• 如何监听用户交互行为？
• 如何收集数据？
• 何种方式发送请求？

如何监听用户交互行为？

实际上很简单，埋点可以分为两类

1. 对某个功能的埋点
2. 一类是对页面访问的埋点，即PV（Page View）埋点

对某个功能的埋点

用户对想要使用某个功能，一定离不开触发某个事件。以onClick事件为例，我们可以在项目的入口处添加事件监听器来监听整个项目的onClick事件;

  useEffect(() => {
    //监听点击事件，触发埋点请求
    document.addEventListener('click', report);
    return () => {
      document.removeEventListener('click', report);
    };
  }, []);