用户会话追踪

欢迎回到第 10 章的学习。在上一节，我们学习了 Core Web Vitals 监控。现在我们要学习用户会话追踪，这是追踪用户行为的重要方式。

本节将学习：Session ID 生成、用户标识、会话属性、以及跨页面追踪。

Session ID 生成

Session ID 生成的作用是什么？ 为每个用户会话分配唯一标识，追踪用户在应用中的完整行为路径。

如何生成 Session ID？ 可以使用 UUID 或时间戳+随机数组合，确保唯一性。

Session ID 生成策略：

第一种：UUID。 使用

crypto.randomUUID()

第二种：时间戳+随机数。 使用当前时间戳和随机数组合，简单有效。

第三种：会话存储。 将 Session ID 存储在 localStorage 或 sessionStorage 中，跨页面保持。

会话生命周期： 会话开始（用户访问页面）→ 会话活跃（用户交互）→ 会话结束（用户离开或超时）。

Session ID 生成代码：

文件路径：

src/utils/session.js

const SESSION_KEY = 'shoehub_session_id';

export function getOrCreateSessionId() {
  let sessionId = localStorage.getItem(SESSION_KEY);
  
  if (!sessionId) {
    sessionId = crypto.randomUUID();
    localStorage.setItem(SESSION_KEY, sessionId);
  }
  
  return sessionId;
}

export function getSessionAttributes() {
  return {
    'session.id': getOrCreateSessionId(),
    'session.start_time': Date.now(),
    'user.agent': navigator.userAgent,
    'device.type': /Mobile|Android|iPhone/i.test(navigator.userAgent) ? 'mobile' : 'desktop',
  };
}

用户标识

用户标识的作用是什么？ 识别用户身份，关联用户行为数据，提供个性化体验。

用户标识包括哪些呢？

第一个：匿名用户ID。 未登录用户的临时标识。

第二个：登录用户ID。 已登录用户的唯一标识。

第三个：设备ID。 设备的唯一标识。

第四个：浏览器指纹。 浏览器特征组合。

如何获取用户标识？ 从登录状态获取用户ID，从设备信息获取设备ID，从浏览器API获取指纹信息。

用户标识代码：

export function getUserAttributes() {
  const userId = getUserId(); // Retrieved from login status
  const deviceId = getDeviceId(); // Get information from the device
  
  return {
    'user.id': userId || 'anonymous',
    'user.is_authenticated': !!userId,
    'device.id': deviceId,
    'device.type': getDeviceType(),
  };
}

会话属性

会话属性的作用是什么？ 记录会话的元数据，包括访问来源、设备类型、浏览器信息等。

会话属性包括哪些呢？

第一个：访问来源。 用户从哪里访问（直接访问、搜索引擎、社交媒体等）。

第二个：设备类型。 设备类型（桌面、移动、平板）。

第三个：浏览器信息。 浏览器类型、版本、操作系统。

第四个：地理位置。 用户的地理位置（如果可用）。

会话属性代码：

export function getSessionAttributes() {
  return {
    'session.id': getOrCreateSessionId(),
    'session.referrer': document.referrer || 'direct',
    'session.utm_source': getUrlParameter('utm_source'),
    'session.utm_campaign': getUrlParameter('utm_campaign'),
    'device.type': getDeviceType(),
    'browser.name': getBrowserName(),
    'browser.version': getBrowserVersion(),
    'os.name': getOSName(),
  };
}

跨页面追踪

跨页面追踪的作用是什么？ 在单页应用中，追踪用户在不同页面间的行为，构建完整的用户行为路径。

如何实现跨页面追踪？ 将 Session ID 存储在 localStorage 中，在所有页面间共享，确保会话一致性。

跨页面追踪包括哪些呢？

第一个：页面访问。 记录用户访问的每个页面。

第二个：页面停留时间。 记录用户在每个页面的停留时间。

第三个：导航路径。 记录用户的导航路径。

第四个：退出点。 记录用户退出应用的位置。

跨页面追踪代码：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { trace } from '@opentelemetry/api';
import { getOrCreateSessionId, getSessionAttributes } from './utils/session';

function SessionTracker() {
  const location = useLocation();
  const tracer = trace.getTracer('session-tracker');
  
  useEffect(() => {
    const sessionId = getOrCreateSessionId();
    const sessionAttributes = getSessionAttributes();
    
    const span = tracer.startSpan('page.view', {
      attributes: {
        ...sessionAttributes,
        'page.path': location.pathname,
        'page.timestamp': Date.now(),
      },
    });
    
    span.end();
  }, [location, tracer]);
  
  return null;
}

本节小结

在本节中，我们学习了用户会话追踪：

第一个是 Session ID 生成。 为每个用户会话分配唯一标识，追踪用户在应用中的完整行为路径。

第二个是用户标识。 识别用户身份，关联用户行为数据，提供个性化体验。

第三个是会话属性。 记录会话的元数据，包括访问来源、设备类型、浏览器信息等。

第四个是跨页面追踪。 在单页应用中，追踪用户在不同页面间的行为，构建完整的用户行为路径。

用户会话追踪流程： 生成 Session ID → 识别用户 → 记录会话属性 → 追踪页面访问 → 跨页面关联 → 在 Grafana 中分析。

这就是用户会话追踪。通过用户会话追踪，我们可以深入了解用户行为和体验。

在下一节，我们将学习 React Router 集成。学习如何集成 React Router 追踪。