Analytics活跃页面URL分组修改：自定义实时仪表盘合并页面用户计数

嘿，这个需求很常见，我来给你两种最实用的解决思路，你可以根据自己的仪表盘实现方式来选：

一、前端处理（如果表格是前端渲染） #

假设你拿到的原始实时数据是类似这样的用户页面数组：

const originalData = [
  { page: '/checkout/xxxxx1', userId: 'user1' },
  { page: '/checkout/xxxxx2', userId: 'user2' },
  { page: '/home', userId: 'user3' }
];

我们需要先把所有/checkout/xxxxxx格式的路径统一转换成/checkout，再按这个基础路径分组统计用户数。用JavaScript的reduce就能轻松实现：

// 写个小函数提取基础路径
function getBasePath(page) {
  // 匹配/checkout开头的路径，返回统一的/checkout
  if (page.startsWith('/checkout/')) {
    return '/checkout';
  }
  // 如果以后还有其他需要合并的路径，直接在这里加判断就行
  return page;
}

// 分组统计用户数
const aggregatedData = Object.values(
  originalData.reduce((acc, item) => {
    const basePath = getBasePath(item.page);
    // 初始化分组项
    if (!acc[basePath]) {
      acc[basePath] = { page: basePath, userCount: 0 };
    }
    acc[basePath].userCount += 1;
    return acc;
  }, {})
);

处理完之后，aggregatedData就变成了符合你需求的结构：

[
  { page: '/checkout', userCount: 2 },
  { page: '/home', userCount: 1 }
]

直接把这个处理后的数据渲染到你的表格里就ok了。

二、后端聚合（如果数据来自数据库查询） #

如果你的实时数据是从数据库拉取的，那直接在SQL查询阶段完成分组统计会更高效，避免前端处理大量数据。

假设你的表是user_page，包含user_id（用户ID）和page_url（页面路径）字段，还有标记用户是否正在浏览的is_active字段：

MySQL示例： #

SELECT 
  CASE 
    WHEN page_url LIKE '/checkout/%' THEN '/checkout'
    ELSE page_url 
  END AS page,
  COUNT(DISTINCT user_id) AS user_count
FROM user_page
WHERE is_active = 1 -- 过滤出当前正在浏览的用户
GROUP BY 
  CASE 
    WHEN page_url LIKE '/checkout/%' THEN '/checkout'
    ELSE page_url 
  END;

PostgreSQL示例： #

SELECT 
  CASE 
    WHEN page_url ~ '^/checkout/' THEN '/checkout'
    ELSE page_url 
  END AS page,
  COUNT(DISTINCT user_id) AS user_count
FROM user_page
WHERE is_active = TRUE
GROUP BY 
  CASE 
    WHEN page_url ~ '^/checkout/' THEN '/checkout'
    ELSE page_url 
  END;

查询出来的结果直接就是合并后的页面和对应的用户数，前端直接渲染就行。

小提示 #

如果以后有其他类似需要合并的页面（比如/product/xxxxxx要合并成/product），只需要扩展getBasePath函数或者SQL里的CASE条件就可以啦。

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