Skip to content

用户行为收集.md

Latest commit

 

History

History
264 lines (222 loc) · 6.77 KB

用户行为收集.md

File metadata and controls

264 lines (222 loc) · 6.77 KB

用户行为收集

📖 概述

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)

  • 🎬 用户操作录制
  • 📹 错误现场回放
  • 💾 智能分段存储
  • 🔄 自动循环覆盖

📊 数据结构

通用字段

所有行为数据都包含以下基础字段：

interface CommonBehaviorData {
  type: 'behavior' // 数据类型
  subType: string // 具体行为子类型
  timestamp: number // 行为发生时间戳
}

各类行为的具体数据结构

PV 访问数据

interface PvInfoType {
  type: 'behavior'
  subType: 'pv'
  timestamp: number
  pageInfo: PageInformation // 页面详细信息
  originInfo: originInfoType // 来源信息
}

路由跳转数据

interface RouterChangeType {
  type: 'behavior'
  subType: 'routerChange'
  jumpType: string // 跳转方式
  pageUrl: string // 当前页面URL
  pageTime: number // 页面停留时间
  timestamp: number
}

点击行为数据

interface TargetInfoType {
  type: 'behavior'
  subType: 'click' // 或其他交互类型
  path: string // 元素CSS路径
  tagName: string // HTML标签名
  textContent: string // 元素文本内容
  pageUrl: string // 当前页面URL
  timestamp: number
}

自定义埋点数据

interface customAnalyticsData {
  type: 'behavior'
  subType: 'tracker'
  eventKey: string // 事件标识
  eventAction: string // 事件动作
  eventValue?: any // 事件值
  timestamp: number
}

🚀 快速开始

基础集成

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',
})

// 行为数据会自动收集和上报

自定义埋点

// 获取行为监控实例
const behavior = window.$SDK.Behaviour

// 发送自定义行为数据
behavior.customHandler({
  eventKey: 'button_click',
  eventAction: 'click',
  eventValue: {
    button_name: '购买按钮',
    page: '/product/123',
    price: 99.99
  }
})

获取行为轨迹

// 获取用户行为面包屑（最近25条行为记录）
const breadcrumbs = window.$SDK.Behaviour.breadcrumbs.getAll()
console.log('用户行为轨迹:', breadcrumbs)

📈 行为分析应用

1. 用户路径分析

结合 PV 和路由跳转数据，分析用户在网站中的访问路径：

// 分析用户访问漏斗
const userJourney = breadcrumbs.filter(item =>
  item.subType === 'pv' || item.subType === 'routerChange'
)

2. 交互热力图

基于点击行为数据生成页面热力图：

// 统计页面点击分布
const clickData = breadcrumbs.filter(item =>
  item.subType === 'click'
).map(item => ({
  selector: item.path,
  count: 1,
  text: item.textContent
}))

3. 错误现场还原

结合屏幕录制和行为轨迹，还原错误发生前的用户操作：

// 获取错误发生前的录屏数据
const recordData = getRecordScreenData()
const errorContext = {
  userActions: breadcrumbs.slice(-10), // 最近10个操作
  screenRecord: recordData // 录屏数据
}

🔧 高级配置

行为记录数量限制

// 默认保存最近25条行为记录
const behavior = new Behavior()
console.log('最大记录数:', behavior.maxBehaviorRecords) // 25

点击事件类型配置

// 当前只监控click事件，可扩展支持其他事件
const clickEvents = ['click'] // 可扩展为 ['click', 'dblclick', 'contextmenu']

屏幕录制配置

// 录制配置
const recordConfig = {
  scopeScreenTime: 3000, // 每段录制时长：3秒
  screenCnt: 3, // 保留录制段数：3段
  recordCanvas: true // 录制Canvas内容
}

📊 数据上报策略

行为类型 上报方式 存储位置 用途
PV访问 立即上报 不存储到breadcrumbs 实时流量统计
路由跳转 不上报 存储到breadcrumbs 用户路径分析
点击行为 立即上报 同时存储到breadcrumbs 交互分析+行为轨迹
自定义埋点 立即上报 不存储到breadcrumbs 业务指标统计
屏幕录制 按需获取 内存循环存储 错误现场还原

🛠️ 最佳实践

1. 合理使用自定义埋点

// ✅ 好的做法：语义化的事件命名
behavior.customHandler({
  eventKey: 'product_purchase_success',
  eventAction: 'click',
  eventValue: {
    product_id: 'P001',
    amount: 99.99,
    payment_method: 'alipay'
  }
})

// ❌ 避免：过于频繁或无意义的埋点

2. 性能优化建议

// ✅ 批量上报减少网络请求
const monitor = new EzMonitor({
  batchSize: 10, // 批量上报数量
  isAjax: true, // 使用Ajax上报
})

3. 隐私保护

// ✅ 过滤敏感信息
const monitor = new EzMonitor({
  reportBefore: (data) => {
    // 过滤敏感的用户输入内容
    if (data.textContent && data.textContent.includes('password')) {
      data.textContent = '[filtered]'
    }
    return data
  }
})

📚 相关文档

通过收集这些用户行为数据，开发者可以全面了解用户如何与网站交互，从而做出数据驱动的产品优化决策！ 🎯