如何基于URL中的id参数过滤单页应用的实时活跃用户？

DevOps 小满

2026-5-22

嘿，这个需求我之前帮不少SPA开发者处理过，分两种核心场景给你拆解实现方案，不管你用第三方分析工具还是自定义统计脚本都能搞定：

方案一：用第三方分析工具（以GA4为例）

大部分主流分析工具都支持自定义维度/参数，用来过滤细分用户群体，以GA4为例：

步骤1：创建自定义用户属性
先登录GA4后台，在「管理」-「自定义定义」里新建一个用户属性，命名比如user_group_id，描述填“URL中的人群标识符id”。

步骤2：在SPA中传递id参数
因为是单页应用，路由切换不会刷新页面，所以要在初始化和每次路由变化时，从URL提取id并传给GA4：

// 封装提取id并设置属性的函数
function setGroupIdToGA() {
  const urlParams = new URLSearchParams(window.location.search);
  const groupId = urlParams.get('id');
  if (groupId) {
    // 把id设置为用户属性，持久化到整个会话
    gtag('set', 'user_properties', {
      user_group_id: groupId
    });
    // 同时触发页面浏览事件时带上参数（可选，用于实时事件过滤）
    gtag('event', 'page_view', {
      group_id: groupId
    });
  }
}

// 页面加载时调用
window.addEventListener('load', setGroupIdToGA);
// 如果用React/Vue等框架，在路由守卫/路由变化钩子中调用
// 比如React Router的useEffect监听location变化

步骤3：在实时报告中过滤
打开GA4的「实时」报告，点击顶部的「添加过滤器」，选择你刚创建的user_group_id，输入要筛选的id值，就能看到该人群的实时活跃用户了。

方案二：自定义分析脚本（自己开发统计系统）

如果是你自己写的分析脚本，灵活性更高：

步骤1：上报时携带id参数
在每次用户访问（包括路由切换）时，提取URL中的id，和其他活跃用户数据一起上报到你的后端：

function reportActiveUser() {
  const groupId = new URLSearchParams(window.location.search).get('id');
  // 假设你的后端上报接口是 /api/report-active
  fetch('/api/report-active', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      sessionId: localStorage.getItem('session_id') || generateSessionId(), // 生成唯一会话ID
      groupId: groupId || 'unknown',
      timestamp: Date.now()
    })
  });
}

// 生成唯一会话ID的辅助函数
function generateSessionId() {
  const id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  localStorage.setItem('session_id', id);
  return id;
}

// 初始化和路由变化时调用
window.addEventListener('load', reportActiveUser);
// 框架路由变化时触发，比如Vue的router.afterEach，React的useEffect监听location

步骤2：后端统计与前端展示
后端接收上报数据后，按groupId分组，统计最近N分钟（比如5分钟）内的唯一会话数，就是该人群的实时活跃用户数。然后你可以写个前端接口，让后台面板能查询指定id的实时活跃数据。

关键注意点

路由变化必须重新触发：SPA的路由切换不会刷新页面，一定要在每次路由更新时重新提取id并上报/设置，不然会一直用初始页面的id值。
参数合法性校验：提取id后最好做简单校验（比如是否符合预期的格式、长度），避免上报无效数据。
隐私合规：如果id涉及用户敏感信息，要确保符合隐私法规，比如匿名化处理或获得用户授权。

内容的提问来源于stack exchange，提问作者Abhimanyu Kaushal