Analytics / Ops

Featured

Vercel Projects Analytics Board

团队项目分析总览与 allprojects 交叉校验

Updated 2026-03-15

把 Vercel team 里的项目、Web Analytics、Speed Insights 与 allprojects 映射关系收敛成一张治理看板,帮助快速发现覆盖缺口、指标漂移与配置异常。

Web DashboardStatic DemoWebStatic HTML
VercelAnalyticsBoardOps

Outcome

结果与影响

  • 把跨项目治理从多页面跳转收敛成单页视图,能先看总量再钻异常项目。
  • allprojects 与 Vercel 的映射缺口可在同一表格里定位并跟进。

Decision

关键决策与取舍

  • 采用 “Collect → Cross-check → Filter → Act” 的四段式结构,把排查动作映射到界面筛选。
  • 将抓取层、汇总层、展示层解耦,支持重复运行与快照归档。

Evidence

可验证证据

  • 可公开体验的静态 board snapshot:/projects/vercelboard/live.html。
  • 页面包含 KPI、Cross-check 表格、drift/web/speed 过滤器等可验证模块。

Flow

关键路径(从打开到完成一次任务)

Collect → Cross-check → Filter → Act

Vercel Projects Analytics Board flowCollectCross-checkFilterAct

Product shape

这次交付的真实形态

  • Format:Web Dashboard
  • Status:Static Demo
  • Platforms:Web · Static HTML
  • 体验重点: 本地产品形态、权限边界、入口设计与截图证据。

Screenshots

UI snapshots

用截图快速理解页面结构、视觉层级与交互状态。

Vercel Projects Analytics Board screenshot — Cover
Cover

Case Study

先看结果、决策与证据

先看结果、关键决策与证据,再回看过程与实现。

Outcome

结果与影响

  • 把跨项目治理从多页面跳转收敛成单页视图,能先看总量再钻异常项目。
  • allprojects 与 Vercel 的映射缺口可在同一表格里定位并跟进。

Decision

关键决策与取舍

  • 采用 “Collect → Cross-check → Filter → Act” 的四段式结构,把排查动作映射到界面筛选。
  • 将抓取层、汇总层、展示层解耦,支持重复运行与快照归档。

Evidence

可验证证据

  • 可公开体验的静态 board snapshot:/projects/vercelboard/live.html。
  • 页面包含 KPI、Cross-check 表格、drift/web/speed 过滤器等可验证模块。

Role

承担角色

  • Owner / Product Engineer:定义治理问题,设计数据结构,落地抓取 + 汇总 + 看板展示。

Problem

核心问题

  • 项目规模上来后,Analytics / Speed / 域名映射状态分散在多个控制面,排查成本高且容易漏项。

Constraints

约束条件

  • 控制面数据有敏感信息,公开版必须脱敏。
  • 看板要支持快速筛查,而不是做成复杂后台。

Background

为什么做

项目数量一多,问题不再是“有没有 Analytics”,而是“哪些项目开了、哪些没数据、哪些线上域名和 Vercel 状态已经漂移”。这个看板把这些分散状态合到一个视图里。

Scenario

应用场景

  • 检查 team 里哪些项目启用了 Web Analytics / Speed Insights。
  • 把 allprojects 里的公开项目与 Vercel 控制面做映射,发现遗漏或漂移。
  • 在做站点治理时,快速筛出“只开了站但没开数据”或“项目已存在但未纳入总入口”的案例。

Delivery

实现了什么

  • 项目级 KPI:总项目数、Analytics 开启数、可用数据项目数、Speed 覆盖数。
  • Allprojects Cross-Check 表格:把公开 URL、Vercel 项目、Web / Speed / Drift 放进一张表。
  • 搜索与过滤:快速定位 drift、web off、未映射项目。

Design

设计要点

  • 先看总量,再看异常:KPI 在上,问题项目在下,减少来回跳转。
  • 把“治理动作”做进界面:过滤条件直接对应排查路径。
  • 保持编辑部式版面,而不是做成传统管理后台,让信息密度高但不压迫。

Tech

技术实现

  • 基于 Playwright 抓取 Vercel 控制面数据,并导出结构化汇总文件。
  • 静态 HTML 渲染层负责把指标、项目映射与异常状态组装成公开看板。
  • 输入与展示解耦:原始抓取、汇总 JSON、最终 HTML 各自独立,便于重复生成。

Access

当前展示方式

  • 官网里展示的是一个可打开的静态 board snapshot,用于解释产品形态与信息架构。
  • 需要登录或包含敏感控制面数据的部分仍保留在本地流程里,不直接公开。

Try it

看完介绍,继续探索

当前先以产品页、截图和关键流程说明为主。先看截图,再读边界与交付方式,会比强行找线上入口更准确。

Vercel Projects Analytics Board preview

Access

当前可查看的入口与材料

当前没有公开网页入口,因此这里优先展示产品说明、真实截图和使用语境。后续如果有独立域名或下载入口,会继续补上。

  • Format:Web Dashboard
  • Status:Static Demo
  • Platforms:Web · Static HTML

Related work

继续看相关项目

这里保留与当前项目更接近的入口,方便继续横向浏览。