企业官网建设流程全解析

• 文档
• 教程
• Vibe Coding
• 示例工程

上线不是结束，而是理解的开始。数据告诉你"发生了什么"，用户反馈告诉你"为什么发生"。本文面向已经完成部署的 Vibe Coding 开发者，系统讲解如何通过自托管的 Umami 建立网站统计体系：从部署接入、核心指标解读，到"主要指标 vs 虚荣指标"的判别方法、自定义事件追踪，以及隐私合规与 GDPR 适配，帮助你从"不知道有没有人用"升级为"每周看数据做决策"。

为什么需要网站统计：从猜测到决策

在没有数据之前，你对用户的了解全靠猜测。你觉得首页设计得不错，但不知道用户是不是真的在首页停留了；你觉得某个功能很有用，但不知道有没有人真的在用它。网站统计回答的是产品运营最基本的问题：

这些数据不是用来"炫耀"的（"我的网站今天有 1000 PV！"），而是用来做决策的。比如：

• 如果 80% 的用户用手机访问，但你的移动端体验很差——你知道该优先优化什么了；
• 如果某个页面的跳出率特别高——说明用户来了就走，页面内容可能没有满足他们的期望；
• 如果大部分流量来自社交分享而不是搜索引擎——说明 SEO 还需要时间，但 OG 配置确实有效。

没有数据，你只能靠猜；有了数据，你能做出有依据的决策。这正是 Vibe Coding 项目从"能用"走向"被理解"的关键一步。

为什么选 Umami：自托管统计工具的价值

市面上的网站统计工具很多，最知名的是 Google Analytics（GA）。但对个人开发者来说，Umami 是更好的选择：

Umami 的哲学是"够用就好"。它不会告诉你用户的年龄、性别、兴趣爱好（GA 可以），但它会告诉你最重要的东西：有多少人来了、从哪来的、看了什么、用什么设备。对于个人项目和小型产品，这些信息已经足够指导你的决策了。

而且，因为 Umami 不使用 Cookie，你不需要在网站上放那个烦人的"本站使用 Cookie，请同意"弹窗。这对用户体验是一个实实在在的加分。

快速上手：部署、登录与接入追踪代码

通过 1Panel 应用商店部署

本教程的第十四章已经介绍了通过 1Panel 应用商店安装 Umami 的完整流程，如果你还没装，可以参考 14.5 实用应用 按步骤安装。在 1Panel 应用商店搜索「Umami」即可一键安装，安装表单里需要填写名称、版本、端口（默认 3000）、数据库服务（下拉选择已安装的 PostgreSQL 或 MySQL 实例）、数据库名、用户和密码，保存后 Umami 就跑起来了。

首次登录与改密码

Umami 的默认登录信息是：

• 用户名：admin
• 密码：umami

登录后第一件事：改密码。这个默认密码全世界都知道，不改的话等于把你的统计面板公开了。

添加网站并集成追踪代码

登录后，在 Settings → Websites 中点击 "Add website"，填入你的网站名称和域名。保存后，Umami 会生成一段追踪代码：

<script defer src="https://你的umami地址/script.js" />
访问指标：最基础的四个数字
指标
说明
Pageviews（浏览量）
所有页面被浏览的总次数。一个用户看了 3 个页面，就是 3 次 PV
Unique Visitors（访客）
有多少不同的人访问了你的网站。同一个人刷新 10 次还是算 1 个 UV
Visits（访问次数）
会话数。一个用户上午来一次、下午来一次，算 2 次 Visit
Bounce Rate（跳出率）
只看了一个页面就离开的访客比例
这四个数字组合起来能告诉你很多事情。比如：
PV 高但 UV 低：说明少数用户在反复访问，你有一批忠实用户；
UV 高但 PV/UV 比低：说明很多人来了只看一个页面就走了，内容可能没有吸引力；
跳出率高：不一定是坏事——如果你的网站是单页应用或者博客，用户看完一篇文章就走是正常的。但如果是电商网站，高跳出率就需要关注了。
流量来源：用户从哪来
来源
说明
Search
通过搜索引擎来的——这是 SEO 优化的成果
Social
通过社交媒体来的——这是 OG 分享的成果
Direct
直接访问——用户手动输入 URL 或从收藏夹点击
Referral
从其他网站的链接点过来的
流量来源的分布能帮你判断哪个渠道最有效。大部分流量来自 Social（社交分享）时，说明 OG 卡片配置确实有效；Search 流量还少则很正常——SEO 需要几个月才能见效。如果你发现 Direct 流量占比很高，说明有一批用户已经记住了你的网站地址，这是好事；如果 Referral 流量突然增加，去看看是哪个网站链接了你。
设备信息：用户用什么访问
指标
说明
Browser
Chrome、Safari、Firefox……哪个浏览器最多
OS
Windows、macOS、iOS、Android……
Device
桌面、移动、平板
设备信息直接影响你的开发优先级。如果 70% 的用户用手机访问，你就应该优先优化移动端体验；如果大部分用户用 Chrome，你可以放心使用一些较新的 Web API。
主要指标 vs 虚荣指标：数字好看不等于有用
"我的网站这个月有 5000 PV 了！"——如果你看到数字时想的是这句话，那它很可能是个虚荣指标。判断标准很简单：看到一个数据后，你知道下一步该做什么吗？
主要指标（可行动）
虚荣指标（好看但没用）
留存率——用户会不会回来
总浏览量——大不代表好
转化率——用户会不会注册/购买
访客总数——来了不代表留下
活跃用户——真正在用的有多少
页面停留时长——可能只是忘了关标签页
对比一下两类数据的"可行动性"：
"总浏览量涨了 20%" → 所以呢？不知道该做什么。（虚荣指标）
"注册转化率从 5% 降到 2%" → 检查注册流程是不是出了问题，最近改了什么？（可行动指标）
"首页跳出率从 30% 升到 60%" → 首页内容可能需要调整，或者新来的流量质量不高。（可行动指标）
数据的价值不在于数字本身，而在于它能不能帮你做出更好的决策。
事件追踪：超越页面浏览
除了自动收集的页面浏览数据，Umami 还支持自定义事件追踪。比如你想知道有多少人点击了"注册"按钮、有多少人下载了你的 PDF、有多少人点击了分享按钮。实现方式有两种：
在 HTML 元素上加data-umami-event="事件名"属性——最简单，不需要写 JS；
用window.umami.track('事件名', { 属性: '值' })API——更灵活，可以附带额外信息。
需要追踪什么事件，直接告诉 Claude Code 即可。但不要追踪所有东西：只追踪那些能帮你做决策的事件——比如核心转化路径上的关键步骤。追踪太多反而会让你淹没在数据里，分不清主次。
数据驱动决策：看到数据后该做什么
收集数据只是第一步，更重要的是用数据来指导行动。积累了一个月的数据后，你可能会发现几个有意思的现象：
移动端用户占 65%，但你一直在桌面端开发和测试，移动端的一些交互体验其实不太好；
"关于"页面的跳出率高达 90%——用户看完就走了，没有继续浏览其他页面；
周三和周四的流量明显高于其他日子——可能和社交媒体发帖的时间有关。
这些发现可以直接转化成行动：
优先修复移动端的交互问题；
在"关于"页面底部加上其他页面的链接，引导用户继续浏览；
把社交媒体发帖时间调整到周三周四，效果最好的时候加大力度。
这就是数据驱动决策的意义：不是为了看数字，而是为了发现问题、验证假设、指导行动。
隐私保护：Umami 的核心优势与 GDPR 适配
在收集用户数据的同时，隐私保护是一个不能忽视的话题。Umami 的设计从一开始就把隐私放在核心位置：
不使用 Cookie——不需要那个烦人的 Cookie 同意弹窗；
不追踪个人用户身份——Umami 不知道"张三今天来了 3 次"，它只知道"今天有 X 个独立访客"；
不收集可识别的个人数据——不记录 IP 地址（或只记录哈希后的版本）、不记录用户代理的完整字符串；
数据完全存储在你自己的服务器上——不会发送到任何第三方。
这意味着 Umami 天然符合 GDPR（欧盟数据保护法）的大部分要求。你不需要在网站上放 Cookie 弹窗，不需要让用户"同意被追踪"，因为你根本没有在追踪个人用户。但这并不意味着你完全不需要关心隐私合规：如果你的网站还收集了其他用户数据——比如注册时的邮箱地址、用户提交的表单信息——你仍然需要一份隐私政策来说明这些数据的用途，这部分会在 15.4 法律合规章节中详细展开（可参考 15.4 法律合规）。
常见问题
Q1: Umami 和 Google Analytics 可以同时用吗？
技术上可以，但对个人项目没必要。Umami 已经覆盖了核心需求，多加一个统计脚本会增加页面加载负担（GA 的脚本有 ~45KB），还需要处理 Cookie 同意弹窗。除非你有特定的需求是 Umami 满足不了的（比如电商转化漏斗分析），否则 Umami 一个就够了。
Q2: 追踪代码放好了，但面板没有数据？
优先检查三点：追踪脚本的 URL 是否能从公网访问、data-website-id是否与"Add website"时生成的一致、部署后是否清除了浏览器或 CDN 缓存。Umami 面板右上角的"在线人数"可以在接入后几分钟内用于快速验证代码是否生效。
建立数据习惯：每周 10 分钟的产品体检
建议养成一个固定习惯：每周固定时间打开 Umami 面板，花 10 分钟看看上周的数据。不是为了看数字涨没涨，而是带着问题去看：
上周做的改动有没有影响用户行为？
有没有异常的数据波动？
流量来源的分布有没有变化？
数据不多，但每一条都在帮你理解自己的产品。做产品不只是写代码——理解用户、用数据验证假设，这些同样重要。当你开始用数据做决策，再回头看"上线即结束"的想法，就会发现：上线不是结束，而是理解的开始。
赞分享
文档
教程
Vibe Coding
示例工程
【免费下载链接】vibe-vibe
The First Systematic Vibe Coding Open-Source Tutorial | From Zero to Full-Stack, Empowering Everyone to Build Products with AI | Live at: www.vibevibe.cn ；首个系统化 Vibe Coding 开源教程 | 零基础到全栈实战，让人人都能用 AI 开发产品 | 在线地址：www.vibevibe.cn
项目地址：https://gitcode.com/datawhalechina/vibe-vibe
点击查看免费下载
相关推荐
从第一个 AI 网页开始：vibe-vibe 教程 Hello World 实战复盘与进阶路径
从第一个 AI 网页开始：vibe vibe 教程 Hello World 实战复盘与进阶路径 3 分钟、一句话、一个能打开的网页——这是《vibe vibe》
文档教程Vibe Coding示例工程
easy-vibe 数据分析方法论：从描述性统计到漏斗与留存，构建驱动决策的数据直觉
easy vibe 数据分析方法论：从描述性统计到漏斗与留存，构建驱动决策的数据直觉 导读 数据分析不是"看一眼报表"，而是一套从海量行为记录中提炼可指导业务的
教程文档
Easy-Vibe 项目导读：从 Vibe Coding 新手到 AI 产品工程师的三阶段实战路径
Easy Vibe 项目导读：从 Vibe Coding 新手到 AI 产品工程师的三阶段实战路径 导读 本文是 Easy Vibe 开源课程（法语版 docs
教程文档人工智能Vibe Coding
上一篇：Lap虚拟滚动实现解析：10万张照片库为何依然丝滑
下一篇：Ming-Image-0.1-Design vs FLUX.2 vs Ideogram 4.0：UI/UX设计开源AI模型终极选型清单