第 3 卷

第 3 / 13 卷日期：2026-01-02

35break;

36case 'layout-shift':

37	//计算CLS（需过滤主动布局偏移，如用户触发的操作）
38	if (!entry.hadRecentInput) {
39	metrics.cls += entry.value;
40	}
41	break;
42	}
43	}

44 45// 上报性能指标

46reportPerformanceToServer(metrics);

47});

48 49// 监听对应的性能条目类型

50observer.observe({ entryTypes: ['paint', 'largest-contentful-paint', 'layoutshift'] });

51 52return metrics;

53}

四、用户行为数据的捕获与分析（优化用户体验）

用户行为数据是指用户在页面上的所有操作轨迹（如点击、输入、页面跳转等），通过捕获和分析这些数据，可精准定位用户体验痛点，优化产品交互。

1. 用户行为数据的捕获方式

（1）手动埋点（精准可控，适用于核心功能）

在用户关键操作的代码处手动添加上报逻辑，捕获指定行为数据。

Code block

1// 示例1：按钮点击埋点

2	const submitBtn = document.getElementById('submit-btn');
3	submitBtn.addEventListener('click', function() {
4	//捕获点击行为数据
5	const behaviorData = {
6	behaviorType: 'click',//行为类型（click/input/change等）
7	targetId: this.id,//目标元素ID

14 15// 上报行为数据

16reportBehaviorToServer(behaviorData);

17 18// 原有业务逻辑

19submitForm();

20});

22	//示例2：页面跳转埋点（记录页面停留时间）
23	let pageEnterTime = Date.now();
24	//页面卸载前上报
25	window.addEventListener('beforeunload', function() {
26	const stayTime = Date.now() - pageEnterTime;//页面停留时间（毫秒）
27	const behaviorData = {
28	behaviorType: 'pageStay',
29	pageUrl: window.location.href,
30	stayTime: stayTime,
31	userId: 'xxx123',
32	timestamp: Date.now()
33	};
34	reportBehaviorToServer(behaviorData);
35	});

（2）自动埋点（高效覆盖，减少开发成本）

无需手动添加代码，通过事件委托、DOM 监听等方式自动捕获所有用户行为，分为两种：

• 无埋点（全埋点）：捕获页面上所有用户交互行为（点击、输入、滚动等），后续通过后台配置筛

选需要分析的数据，优点是覆盖全面，缺点是数据量大，对服务器压力较大。

实现思路：通过 document.addEventListener 监听全局点击/输入事件，自动提取目标元素信息和行为数据。

Code block

1// 自动捕获全局点击行为

2	document.addEventListener('click', function(event) {
3	const target = event.target;
4	//过滤不需要监控的元素（如空白区域）
5	if (!target \|\| target.tagName === 'HTML' \|\| target.tagName === 'BODY') {
6	return;
7	}

13targetId: target.id, 14pageUrl: window.location.href,

15userId: 'xxx123', 16timestamp: Date.now()

17};

19	//上报（可做节流处理，避免高频点击重复上报）
20	reportBehaviorToServer(behaviorData);
21	});

• 可视化埋点：通过后台可视化界面配置需要监控的元素和行为，前端根据配置自动捕获对应数据，

兼顾精准性和高效性（无需修改代码，只需配置），常见于第三方监控工具（如百度统计、友盟统计）。

（3）第三方工具/统计平台

无需手动开发捕获逻辑，直接集成成熟工具：

• 百度统计、友盟 U-Web、CNZZ：国内常用的网站统计工具，支持页面访问量、用户行为、转化漏

斗等分析。

Google Analytics（GA4）：国际常用的用户行为分析工具，功能强大。
前文提到的 Sentry、ARMS 等，也支持用户行为关联（如错误发生前的用户操作轨迹）。

2. 用户行为数据的分析维度（优化用户体验）

捕获数据后，需通过以下维度分析，提炼可落地的优化方案：

页面访问维度

◦ 分析：页面访问量（PV/UV）、页面停留时间、跳失率（用户进入页面后未进行任何操作直接离

开的比例）。

◦ 优化方向：跳失率高的页面，可能存在加载缓慢、内容不符合预期、交互不友好等问题，需针

对性优化（如优化页面加载速度、调整页面布局）；停留时间过短的核心页面，需优化内容呈现方式。

交互行为维度

◦ 分析：核心按钮点击率（如“提交”“购买”按钮）、用户操作路径（用户从进入页面到完成

目标的轨迹）、异常操作（如重复点击、输入后快速清空）。

◦ 优化方向：点击率低的核心按钮，可能存在样式不醒目、位置不合理、功能不可用等问题；用

全站分卷索引 · 13 卷