前端埋点
yuhuo2024-04-09开发知识
概述
埋点又称事件追踪（Event Tracking），用于采集页面的相关数据进行上报，以便后续统计查看。
相关的第三方产品：
埋点分类
PV 埋点
PV(page view) 是页面浏览量，UV(Unique visitor) 是用户访问量。PV 只要访问一次页面就算一次，UV 同一天内多次访问只算一次。
对于前端来说，只要每次进入页面上报一次 PV 就行，UV 则根据 PV 和用户 ID 进行计算。
上报信息参考：
// 根据 pathname 统计某个页面 PV
// 根据 pathname + suid 统计某个页面 UV
let data = {
project: "xx", // 项目名称
suid: suid, // 用户标志
// 访问信息
url: encodeURIComponent(location.href), // 页面链接
pathname: encodeURIComponent(location.pathname), // 页面路径
referrer: encodeURIComponent(document.referrer), // 来源
channel: query.channel || "", // 渠道
ts: Date.now(), // 时间
// 客户端信息
screen: window.screen.width + "x" + window.screen.height, // 屏幕尺寸
ua: navigator.userAgent, // 浏览器信息
};
行为埋点
统计用户的某些行为，比如页面停留时长、点击XX按钮、打开XX弹窗等，主要用于运营的效果反馈。
上报信息参考：
// 根据 actId 统计某个行为
let data = {
project: "qf-pc", // 项目名称
suid: suid, // 用户标志
pathname: location.pathname, // 页面路径
ts: Date.now(), // 时间
actId, // 行为编号
attach, // 附加说明
};
日志埋点
用于收集某些关键节点，易错节点，或异常情况的上下文信息，主要用于开发的异常排查。
如果单纯靠异常监控系统，只能收集到报错信息，没有相关的上下文信息（比如接口请求失败时，接口的请求参数和返回值）。
上报信息参考：
// 根据 logType 查询某个类型的日志
let data = {
project: "qf-pc", // 项目名称
logType, // 日志类型
content, // 日志内容
suid: suid, // 用户标志
url: location.href, // 页面链接
ts: Date.now(), // 时间
ua: navigator.userAgent, // 浏览器信息
};
上报方式
Ajax
可能会存在跨域问题。
Img
img 标签不存在跨域，兼容性好，并且不需要挂载到 DOM 上即可发起请求（其他的跨域标签如 script、link 还需要挂载）。
将上报信息作为 url 参数发起 get 请求，一般返回 1px 的 gif 图（只需要几十个字节）。
let data = {};
// 转url字符串
let params = "";
for (let key in data) {
params += "&" + key + "=" + data[key];
}
// 发送请求
let img = new Image();
img.src = "//yh.com:3000/stat/pv.gif?" + params.substring(1);
sendBeacon
sendBeacon 方法是一种更规范的上报方式，可能在某些旧版本浏览器不兼容。
Ajax 在页面卸载时异步上报，可能没上报完，页面就卸载了导致请求中断，因此 Ajax 处理这种情况时必须作为同步操作，以此来迫使浏览器延迟卸载文档。
sendBeacon 方法不受同域限制，而且是异步的，作为浏览器的任务，与页面脱离关联，因此可以保证会把数据发出去，不影响页面卸载。
let data = {};
navigator.sendBeacon("//yh.com:3000/stat/log", JSON.stringify(data));