马总曾经说过现在是DT时代（大数据的时代）。
数据已经成为一家公司最宝贵的财富，越来越多的互联网公司开始重视数据的应用。数据应用的过程是：数据收集 -> 数据整理（数据同步）-> 数据分析 -> 数据可视化。
前端埋点是用户行为数据采集领域非常重要的手段，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。
当然前端埋点上报也不仅仅有用户行为数据的采集，还有一个很重要的领域——前端健康度分析。包括采集页面加载性能，js报错收集，接口出错上报，自定义测速等等。
埋点可以帮助分析人员获取真正需要的业务数据及其附带信息，对产品发展、业务决策和指导运营有非常重要的作用。
在不同场景下，业务人员关注的信息和角度可能不同。典型的应用场景如淘宝活动运营，以及PD和UED。前者注重来源渠道和广告效果，而后两者更在意产品本身流程和体验的优化。这就需要通过埋点采集到对应的数据，以数据为依据来做决策和判断。
打个比方，城市要提高一个路口的通过率，那必须要重新调整交通信号灯的逻辑。光看是不行的，我们需要同时拿到路口各个时间段和各个方向的车辆流动量，这就需要在相应的节点上安装摄像头和交通流量计数器。埋点同理。
DataWorks是阿里集团内最大最优秀的一站式大数据平台，整合了大数据设计和开发、运维监控、数据集成、数据管理，数据安全，数据质量等产品，并打通算法平台pai，形成了完整的大数据闭环。
目前整个DataWorks所有前端产品缺少一个统一化的埋点方案，导致产品和UED无法准确地拿到用户数据来辅助决策。
鉴于此背景，我们在为DataWorks做埋点和数据上报的时候，遇到了不小的挑战。
接口报错信息，包含errorCode，requestId等
集团内比较成熟的两个方案：
针对DataWorks的数据上报需求，我们决定使用retcode进行主要的数据上报，aplus也会默认接入（阿里的Nginx会默认在页面中插入aplus的js）。
但在埋点需求中有一项aplus和retcode都无法实现，就是“所有按钮链接的点击事件”。这个需求就需要使用到“无痕埋点”（在“无痕埋点”的场景下，数据监测工具一般倾向于在监测时捕获和发送尽可能多的事件和信息，而在数据处理后端进行触发条件匹配和统计计算等工作，以较好地支持关注点变更和历史数据回溯。）。
但因为DataWorks的产品技术栈不统一，尤其当下业界在react和angular框架的无痕埋点方向上基本属于空白状态。所以我设计了一套埋点机制，来实现不同前端框架的下的无痕埋点，并将采集到的事件和数据通过retcode进行数据上报。
从结构上划分，分为底座和插件两大块。
从功能上划分，底座总共分为三层，既数据采集层、数据处理层及数据传输层。
上面讲到底座分为三层：
这样设计的好处是底座不负责采集，采集的工作由插件实现。而插件机制又保证了整个埋点机制的拓展性，甚至未来其他的开发者也可以基于这套底座和规范，去开发各种前端框架的埋点上报。
我们目前开发了jQuery、react及fetch的埋点采集插件。它们前端事件和请求数据的采集方案，主要是通过Hack通用的前端框架，在事件处理函数上做文章。具体Hack的方式下面会描述。
注： 这里selector需要注意区分，因为有可能是通过parent或者find找到的，我们需要根据selector以及prevObject来精确查找具体的元素。
通过改写React.createElement，其中可以拿到组件传递的Property，通过Property可以进行判断，如果含有onClick事件的话，则在此事件中进行数据的上报操作。整个过程中可以上报Component名称以及Component的父子关系。
目前对于jQuery的Ajax。主要做法是修改ajax的beforeSend函数和complete函数，来对ajax进行统一的处理及上报。
如果是fetch，则hack浏览器原生的fetch方法，来对请求进行包装，上报请求信息。
如果想使用我们的这套埋点机制，任何前端框架只需要遵循传输的数据格式，然后实现各自的点击事件采集即可。
优化：
解决掉的问题：
本期主要目标在于产出数据，即实现对买点数据的采集、上报、汇总工作。后续工作可以从前端及后端数据处理两个方向进行发展。
前端方向:
后端数据处理方向：
即形成了 数据收集 -> 数据整理（数据同步）-> 数据分析 -> 数据可视化的闭环。
