SEO 分享与数据统计
14.7 Umami统计部署
Tip
你需要知道有多少人访问了你的网站。以前大家默认用Google Analytics (GA)。但 GA 越来越庞大，且因为滥用 Cookie 被很多浏览器（和用户）屏蔽。
1. 为什么要学这个?
你想看今天的 UV (访客数)。 打开 GA4，加载了 10 秒钟。 面对复杂的报表（生命周期、漏斗、归因），你只想知道“哪怕有一个人看吗”。 此外，欧洲用户访问你的网站，必须要弹一个巨大的“同意 Cookie”弹窗，用户体验极差。
2. 核心概念：Privacy-focused Analytics
Umami / Plausible 是新一代统计工具的代表。
- 无 Cookie: 不在用户浏览器存 Cookie，不需要 GDPR 弹窗。
- 自托管: 数据在你自己的数据库里，不交给 Google。
- 轻量: 脚本只有 2KB (GA 是 45KB)。
3. 解决方案 (HOW)
3.1 一键部署 (Vercel + Supabase)
这也是 Umami 官方推荐的方式。
- Fork Umami 的 GitHub 仓库。
- 在 Vercel 部署。
- 在 Supabase 创建一个 Postgres 数据库。
- 在 Vercel 设置环境变量
DATABASE_URL。
3.2 前端接入
在 Umami 后台获取 Website ID。在 Next.js 的 layout.tsx 中引入脚本：
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html>
<head>
<Script
src="https://my-umami.vercel.app/script.js"
data-website-id="你的ID"
strategy="afterInteractive"
/>
</head>
<body>{children}</body>
</html>
)
}
3.3 数据流向对比图
graph TD
subgraph Traditional [Google Analytics]
UserA["用户"] -->|"Cookie + IP"| Google["Google 服务器"]
Google --"卖广告"--> Ad["广告商"]
Google --"复杂报表"--> Dev["开发者"]
end
subgraph Vibe [Umami]
UserB["用户"] -->|"匿名指纹"| MyServer["你的 VPS/Vercel"]
MyServer --"简单数据"--> DB["你的数据库"]
DB --"清爽报表"--> Dev2["开发者"]
end
style Vibe fill:#c8e6c9,stroke:#2e7d32
style Traditional fill:#ef9a9a,stroke:#c62828
4. 避坑指南
| ❌ 不要这样做 | ✅ 应该这样做 | 为什么 |
|---|---|---|
| 共享实例 | 自托管 | 数据是核心资产。不要把统计数据放在不认识的人搭建的 Umami 免费实例上，万一他跑路了呢？ |
| stats.umami.is | 自定义域名 | 很多去广告插件会拦截 umami.is。如果你绑定自己的域名 stats.mysite.com，被拦截概率会小很多。 |
| 统计开发环境 | 忽略本地 IP | 在 Umami 后台设置“忽略 IP”或域名白名单。否则你在开发调试时的几千次刷新，会把数据弄得很脏。 |
5. 真实案例
Story
2022年，奥地利的判决
2022年，奥地利数据保护局裁定：使用 Google Analytics 违反 GDPR。 因为 GA 会把欧洲用户的 IP 传回美国服务器。 这在欧洲掀起了“去 Google 化”的浪潮。很多出海企业连夜把 GA 换成了 Umami/Plausible。
Vibe 心法：数据主权（Data Sovereignty）是隐私时代的核心资产。GA 虽然强大但臃肿且受限，自托管的 Umami 能在不侵犯用户隐私的前提下提供精准的业务洞察。轻量化脚本带来的加载提升，本身就是最好的用户体验。
6. 本章小结
- Cookie-less：是未来的趋势。
- Umami：是个人开发者的最佳统计伴侣。
- Insight：你需要的是洞察，而不是海量的数据垃圾。