梗概
前端埋点是一种在客户端进行数据采集的方法，用于收集前端数据，例如用户行为、界面变化等。
使用范围
其目的包括数据监控（如统计页面浏览量、用户停留时间、访问入口、用户在页面中的触发行为等）、性能监控（如不同用户和设备下的首屏加载时间、白屏时间、请求响应时间、资源下载时间、页面渲染时间、页面交互动画完成时间等）以及异常监控（如Javascript异常、样式丢失异常等）。
步骤
前端埋点的步骤通常包括埋点阶段、数据收集阶段和后端处理阶段：
- 埋点阶段：在页面的下端插入一小段 JavaScript 代码，用于收集该页面中需要被回传的用户行为数据。例如，通过全局数组收集域名、IP、URL、搜索内容、常按的按钮名称等信息，然后创建
<script>元素并设置异步执行，将其src属性指定为一个单独的 JavaScript 文件，以请求并执行该文件。 - 数据收集阶段：在引入的 JavaScript 文件（如 ma.js）中，解析、获取用户的各种信息，如通过 DOM 树获取 URL、域名、上一跳路径等，通过
window对象获取显示屏信息，通过navigator对象获取所用语言种类，以及获取埋点阶段传递过来的用户行为数据；将获取到的用户信息按特定格式拼接装到参数中；最后伪装成图片，请求后端控制器，并将参数作为 HTTP 请求参数传入，以实现跨域请求，因为 Ajax 不能跨域请求，而图片的src属性指向后端脚本并携带参数可以轻松实现跨域。 - 后端处理阶段：后端通过解析 HTTP 请求中的参数，获取前端传来的用户信息，可进行日志收集等操作。
前端埋点的方法主要有以下几种：
- 代码埋点（手动埋点）：以嵌入代码的形式手动进行埋点。包括命令式埋点，即在事件操作的回调函数中进行埋点，埋点数据和方法多样；声明式埋点，即将埋点信息封装在自定义属性中，通过 SDK 识别自定义属性获取埋点数据。这种方式可以方便地设置自定义属性和事件，适用于需要深入下钻和精细化自定义分析的场景，但项目工程量大，需要埋点的位置多，且易出现手动差错，重新埋点成本高。
- 可视化埋点：通过可视化交互的手段，将业务代码和埋点代码分离。提供可视化交互页面，在业务代码中自定义增加埋点事件等。其优点是无需编写代码，但可埋点的控件有限，不能手动定制。
- 无埋点（全埋点）：前端自动采集全部事件并上报埋点数据，由后端来过滤和计算有用数据。优点是前端只需一次加载埋点脚本，缺点是流量和采集的数据过于庞大，会给服务器性能带来较大压力。
埋点规范
在进行前端埋点时，需要遵循一定的规范，例如命名规范、流程规范和内容规范等。同时要明确记录点位信息（每个业务事件下的具体参数信息，包含公共参数、业务参数）和点位映射（每个埋点对应的业务含义）。埋点上报的数据通常包含 appid、userAgent、timestamp（上报的时间戳）、currentUrl（用户当前的 url）、fromUrl（前一个页面的 url）、type（上报事件的类型）、element（触发上报事件的元素）、data（自定义数据）等。
另外，埋点统计数据包括用户访问统计（如 PV、UV、VV、IP 等）和用户行为分析（如页面点击量、用户点击流、用户访问路径、用户点击热力图、用户转化率、导流转化率、用户访问时长分析和用户访问内容分析等）。