用户行为收集
📖 概述
EzMonitor SDK 提供完整的用户行为收集能力，通过监控用户在页面中的各种交互行为，帮助开发者分析用户的行为模式、偏好和需求，从而优化网站或应用的设计和功能，提高用户体验和业务指标。当页面发生错误时，我们也可以根据这些行为数据来还原错误现场。
🎯 监控的行为类型
EzMonitor SDK 自动收集以下几类用户行为：
1. PV (Page View) - 页面访问行为
- 📄 页面访问量统计
- 🔗 用户来源追踪
- 📱 设备和浏览器信息
- ⏰ 访问时间记录
详细文档：PV监控详解
2. 页面跳转行为 (Router Change)
- 🔄 SPA 路由跳转监控
- ⏱️ 页面停留时长统计
- 📍 跳转路径记录
- 🎯 跳转方式识别（pushState/replaceState/hash）
3. 点击行为 (Click Behavior)
- 🖱️ 鼠标点击事件
- 🎯 点击元素信息（标签名、内容、路径）
- 📍 点击位置记录
- 🔥 热力图数据生成
4. 自定义埋点行为 (Custom Tracker)
- 📊 业务自定义事件
- 🎨 灵活的数据格式
- ⚡ 立即上报机制
- 📈 关键指标追踪
5. 屏幕录制 (Screen Recording)
- 🎬 用户操作录制
- 📹 错误现场回放
- 💾 智能分段存储
- 🔄 自动循环覆盖
📊 数据结构
通用字段
所有行为数据都包含以下基础字段：
typescript
interface CommonBehaviorData {
type: 'behavior'; // 数据类型
subType: string; // 具体行为子类型
timestamp: number; // 行为发生时间戳
}各类行为的具体数据结构
PV 访问数据
typescript
interface PvInfoType {
type: 'behavior';
subType: 'pv';
timestamp: number;
pageInfo: PageInformation; // 页面详细信息
originInfo: originInfoType; // 来源信息
}路由跳转数据
typescript
interface RouterChangeType {
type: 'behavior';
subType: 'routerChange';
jumpType: string; // 跳转方式
pageUrl: string; // 当前页面URL
pageTime: number; // 页面停留时间
timestamp: number;
}点击行为数据
typescript
interface TargetInfoType {
type: 'behavior';
subType: 'click'; // 或其他交互类型
path: string; // 元素CSS路径
tagName: string; // HTML标签名
textContent: string; // 元素文本内容
pageUrl: string; // 当前页面URL
timestamp: number;
}自定义埋点数据
typescript
interface customAnalyticsData {
type: 'behavior';
subType: 'tracker';
eventKey: string; // 事件标识
eventAction: string; // 事件动作
eventValue?: any; // 事件值
timestamp: number;
}🚀 快速开始
基础集成
typescript
import EzMonitor from '@EzStars/EzMonitor';
// SDK 初始化后，所有行为监控自动启动
const monitor = new EzMonitor({
url: 'https://your-api.com/monitor',
projectName: 'your-project',
appId: 'your-app-id',
userId: 'user-123',
});
// 行为数据会自动收集和上报自定义埋点
typescript
// 获取行为监控实例
const behavior = window.$SDK.Behaviour;
// 发送自定义行为数据
behavior.customHandler({
eventKey: 'button_click',
eventAction: 'click',
eventValue: {
button_name: '购买按钮',
page: '/product/123',
price: 99.99
}
});获取行为轨迹
typescript
// 获取用户行为面包屑（最近25条行为记录）
const breadcrumbs = window.$SDK.Behaviour.breadcrumbs.getAll();
console.log('用户行为轨迹:', breadcrumbs);📈 行为分析应用
1. 用户路径分析
结合 PV 和路由跳转数据，分析用户在网站中的访问路径：
javascript
// 分析用户访问漏斗
const userJourney = breadcrumbs.filter(item =>
item.subType === 'pv' || item.subType === 'routerChange'
);2. 交互热力图
基于点击行为数据生成页面热力图：
javascript
// 统计页面点击分布
const clickData = breadcrumbs.filter(item =>
item.subType === 'click'
).map(item => ({
selector: item.path,
count: 1,
text: item.textContent
}));3. 错误现场还原
结合屏幕录制和行为轨迹，还原错误发生前的用户操作：
javascript
// 获取错误发生前的录屏数据
const recordData = getRecordScreenData();
const errorContext = {
userActions: breadcrumbs.slice(-10), // 最近10个操作
screenRecord: recordData // 录屏数据
};🔧 高级配置
行为记录数量限制
typescript
// 默认保存最近25条行为记录
const behavior = new Behavior();
console.log('最大记录数:', behavior.maxBehaviorRecords); // 25点击事件类型配置
typescript
// 当前只监控click事件，可扩展支持其他事件
const clickEvents = ['click']; // 可扩展为 ['click', 'dblclick', 'contextmenu']屏幕录制配置
typescript
// 录制配置
const recordConfig = {
scopeScreenTime: 3000, // 每段录制时长：3秒
screenCnt: 3, // 保留录制段数：3段
recordCanvas: true // 录制Canvas内容
};📊 数据上报策略
| 行为类型 | 上报方式 | 存储位置 | 用途 |
|---|---|---|---|
| PV访问 | 立即上报 | 不存储到breadcrumbs | 实时流量统计 |
| 路由跳转 | 不上报 | 存储到breadcrumbs | 用户路径分析 |
| 点击行为 | 立即上报 | 同时存储到breadcrumbs | 交互分析+行为轨迹 |
| 自定义埋点 | 立即上报 | 不存储到breadcrumbs | 业务指标统计 |
| 屏幕录制 | 按需获取 | 内存循环存储 | 错误现场还原 |
🛠️ 最佳实践
1. 合理使用自定义埋点
typescript
// ✅ 好的做法：语义化的事件命名
behavior.customHandler({
eventKey: 'product_purchase_success',
eventAction: 'click',
eventValue: {
product_id: 'P001',
amount: 99.99,
payment_method: 'alipay'
}
});
// ❌ 避免：过于频繁或无意义的埋点2. 性能优化建议
typescript
// ✅ 批量上报减少网络请求
const monitor = new EzMonitor({
batchSize: 10, // 批量上报数量
isAjax: true, // 使用Ajax上报
});3. 隐私保护
typescript
// ✅ 过滤敏感信息
const monitor = new EzMonitor({
reportBefore: (data) => {
// 过滤敏感的用户输入内容
if (data.textContent && data.textContent.includes('password')) {
data.textContent = '[filtered]';
}
return data;
}
});📚 相关文档
通过收集这些用户行为数据，开发者可以全面了解用户如何与网站交互，从而做出数据驱动的产品优化决策！ 🎯