从零搭建网页点击率监控系统：5步实现低门槛零成本落地

前期准备：只需2个免费账号

你不需要购买服务器和域名，全程使用免费服务即可完成，直接注册以下服务，Vercel支持GitHub一键登录，无需额外注册：

• GitHub账号：https://github.com/，已有账号可直接跳过
• Vercel账号：https://vercel.com/，点击登录选择Continue with GitHub即可完成注册

第一步：Fork官方项目到你的账号

打开Umami开源监控项目地址：https://github.com/umami-software/umami，登录GitHub后，点击页面右上角的Fork按钮，等待10秒即可把完整项目复制到你的个人GitHub账号下，不需要修改任何默认代码。

第二步：一键部署到Vercel

1. 新建Vercel项目

登录你的Vercel后台，点击页面左上角的Add New → Project，在新页面的Import Git Repository板块，找到你刚才Fork的umami项目，点击Import进入配置页。

2. 配置免费数据库

进入配置页后，Vercel会自动识别Umami的依赖，弹出添加存储的提示，你直接选择Postgres，点击Create按钮，Vercel会自动创建免费的Postgres数据库，并且自动把所有需要的环境变量注入到项目中，不需要你手动填写任何配置。

3. 点击部署完成

配置页直接点击底部的Deploy按钮，等待3-5分钟即可完成部署，部署完成后点击Visit按钮即可打开你的监控后台。

第三步：初始化后台，添加目标网站

打开监控后台后，使用默认账号密码登录：

• 用户名：admin
• 密码：umami

登录后第一时间进入Profile → Change password修改默认密码，避免后台被非法访问。

接下来添加你要监控点击率的网站，按步骤操作：

1. 点击左侧菜单Settings → Add website
2. 填写你的网站名称、网站完整域名（例如https://www.yourblog.com），不需要修改其他默认配置
3. 点击保存，即可获取一段可直接复制的监控代码，格式如下： ``` ```

把这段代码复制，粘贴到你网站模板的标签之前即可：如果是WordPress站点，可安装免费插件「Insert Headers and Footers」，粘贴到头部代码框即可；如果是静态博客（Hexo/VitePress等），直接修改主题的默认模板文件即可。

第四步：配置自定义元素点击率监控

完成基础配置后，你已经可以统计网站访问量，接下来我们配置指定元素的点击率监控，这是整个需求的核心，操作非常简单，只需要给需要监控的元素加一个属性即可。

单个元素监控配置

如果你要统计某个按钮、链接的点击率，只需要给对应的HTML标签添加属性data-umami-event="你的事件名称"即可，示例如下： ``` 立即购买 关于我们 ```

自动监控所有外链点击

如果你需要统计网站所有外链的点击率，不需要逐个添加属性，只需要把下面这段代码复制，放在你之前添加的Umami监控代码之后即可： ``` ``` 这段代码会自动识别页面所有出站链接，点击后自动上报给Umami，不需要额外修改任何内容。

第五步：查看点击率数据

登录你的Umami后台，打开对应网站的统计页面，点击左侧菜单栏的Events，即可看到所有你配置的自定义事件的点击次数。

点击率计算方式为：指定元素点击率 = 元素点击次数 ÷ 当前页面访问次数，页面访问次数可以直接在Umami后台的主页找到，直接计算即可得到你需要的点击率数据。如果需要留存历史数据，每天打开后台截图即可，所有数据默认存在你Vercel的免费数据库中，不会丢失。

常见问题排查

• 部署失败怎么办？ 一般是Fork项目时出错，删除你GitHub账号下的umami项目，重新Fork一次即可；Vercel默认选择美国节点，不需要手动修改节点。
• 不统计数据怎么办？ 首先检查本地广告拦截插件，部分拦截插件会拦截Umami，你可以打开无痕模式测试；如果仍有问题，可在Vercel项目设置中绑定你自己的域名，即可解决拦截问题。
• 免费额度够用吗？ Vercel免费版每月提供100GB流量，Postgres免费版提供10GB存储，日访问量1万以下的网站完全够用，不需要支付任何费用。

整个流程全程不超过15分钟，所有数据完全自主可控，不需要依赖第三方服务的数据共享，零成本就能落地可用的点击率监控系统，所有步骤都可以直接照着操作，没有额外的学习成本。