什么是埋点+监控
埋点
- 埋点主要用于收集用户行为数据。在日常开发中，我们会通过在前端代码中插入代码获脚本的方式来实现埋点功能。
作用
- 埋点的主要作用就是：捕获特定用户行为（如点击、浏览、提交表单、页面跳转等）以及关键业务数据（如下单金额、商品类别等）
分类
- 在日常开发中，埋点的实现方案大致可以分为以下三大类：
- 手动埋点：在代码中手动加入记录代码来捕获特定事件。
- 自动埋点：利用DOM事件代码等技术来捕获页面上所有事件，从而减少手动配置。
- 可视化埋点：通过工具界面标记需要采集的元素和事件，可以不用手写代码。
监控
- 监控主要关注系统的性能和稳定性。在日常开发中，我们会通过采集页面加载时间、资源请求、错误日志等数据的方式来实现前端监控。
作用
- 监控的主要作用就是：及时发现并定位页面性能瓶颈或代码异常目的是为了保障系统不出bug
分类
- 性能监控：如：首屏加载时间、页面交互耗时、资源加载耗时等
- 错误监控：捕获JavaScript错误、网络请求失败、资源加载异常等
- 用户体验监控：收集白屏、卡顿等影响用户体验的问题
为什么需要埋点和监控
- 埋点与监控体系是数字化产品实现精细化运营与高质量交付的基础设施：通过实时采集页面访问（PV）及各类事件指标，构建覆盖性能、异常与业务的量化数据面，为产品决策（PD）提供可回溯、可验证的客观依据，并形成“洞察→决策→迭代→再验证”的闭环，降低因信息盲区导致的转化流失与故障扩大风险，持续驱动产品优化与价值增长。
案例
跟踪用户事件
- 首先我们需要先构造一个通用追踪函数来减少代码复用，这里我采用的是打印模拟，生产环境中一般需要传入真正的服务器接口，如下：
function trackEvent(eventType, detail) {console.log(`用户触发了${eventType}事件，`, detail);}
- 这里用来跟踪用户的点击事件和滚动页面事件
- 这里两种均属于自动埋点
效果演示
- 页面点击按钮后控制台打印”用户出发了点击事件以及时间戳“
- 滚动页面后控制台打印”用户出发了scroll事件“
完整代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style>body{height: 2000px;background-color: aquamarine;}</style><body><div id="events-container"><button id="click-btn">跟踪点击事件</button></div></body><script>document.getElementById("click-btn").addEventListener("click", () => {trackEvent("click", {buttonId: "click-btn",timestamp: new Date().toISOString(),});});window.addEventListener("scroll", () => {trackEvent("scroll", {scrollY: window.scrollY,timestamp: new Date().toISOString(),});});function trackEvent(eventType, detail) {console.log(`用户触发了${eventType}事件，`, detail);}</script>
</html>
完成性能监控指标
- 这里我们对页面加载时间以及模拟API调用耗时监控
- 首先还是先定义通用追踪函数 — 同上
- 利用
load事件以及performance.now()方法获得页面加载时间并进行上报
window.addEventListener("load", () => {const time = performance.now();trackEvent("load", {duration: time,});});
function callAPI() {const time = performance.now();setTimeout(() => {trackEvent("api-call", {duration: performance.now() - time,});}, 1300);}
效果演示
完整代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div><div>页面加载时间监控</div><div>API调用耗时监控</div><button id="api-btn">点击调用API</button></div></body><script>window.addEventListener("load", () => {const time = performance.now();trackEvent("load", {duration: time,});});function callAPI() {const time = performance.now();setTimeout(() => {trackEvent("api-call", {duration: performance.now() - time,});}, 1300);}document.getElementById("api-btn").addEventListener("click", () => {callAPI();});function trackEvent(eventType, detail) {console.log(`用户触发了${eventType}事件，`, detail);}</script>
</html>
