使用 Umami 统计个人网站访问数据
没有人喜欢自己的隐私数据被收集、被利用，也没有人喜欢自己被跨网站、跨设备的跟踪浏览行为、制作用户画像、精准投递广告。作为一个非商用的小站，是时候向诸如谷歌统计、百度统计、51La 等说再见了，只关注关键的几个数据，全程匿名化处理，隐私至上。
关于 Umami
Umami 是一个开源的、以隐私为中心的 Google Analytics 替代方案。Umami 提供强大的网络分析解决方案，不会侵犯用户隐私。此外，当自行托管 Umami 时，可以完全控制自己的数据。
Umami 基于 Node.js 开发，支持 Mysql 和 Postgresql 数据库，除服务器外，它甚至可以部署在 Serverless 中。自部署的好处在于某些商业服务滥用用户数据，当数据保存在自己手中时可以确保不会分享给第三方（如果你查阅 Umami 的数据库，你甚至可以发现它连用户 IP 都没有收集）。
此外由于现有的商用统计分析系统过于臭名昭著，绝大部分隐私拦截插件（如隐私獾）都对其脚本进行了过滤，在保护了访客隐私的同时却导致了统计数据不精准，而 Umami 可以重写脚本名称及绑定用户自己的域名，最大程度上避免被误拦截（因为本身不收集隐私、理直气壮）。
查看 Umami 功能示例：🔗Live Demo 。
如何搭建
注：本文使用的 Umami 版本为 v1
本文使用 Serverless 平台来搭建 Umami，应用部署在 Vercel，数据库使用 PlanetScale，其他平台参见 官网文档
数据库部分
PlanetScale 是一个兼容 MySQL 的无服务器数据库平台。 PlanetScale 平台不支持外键，因此需要修改 schema.mysql.sql 。
其他数据库参见官网文档 Hosting Managed databases 部分。
- 使用魔法登录 PlanetScale 并创建一个数据库，名字假如为 umami-db ，获取连接字符串，
连接方式要选择Prisma，字符串形如：mysql://username:password@host/umami-db?sslaccept=strict，然后初始密码看不到，要自己新建一个数据库密码
- 打开 schema.mysql.sql ，删除所有以外键 (
-- AddForeignKey) 开头的行，并确保逗号准确。 - 初始化数据库
-
打开 PlanetScale Web 控制台，从
Branches>main>Console进入，复制schema.mysql.sql中语句，每次运行一条语句
-
另外也可以使用 PlanetScale CLI 来初始化
- 使用
pscale auth login登录 - 在项目根目录运行
pscale shell umami-db main < sql/schema.mysql.sql
- 使用
- 查看表是否已经建好，或者去
Schema页面查看
Vercel 部分
此时数据库已经初始化完毕，接下来将应用部署在 Vercel 上。
-
手动部署
-
Fork Umami 的仓库: https://github.com/umami-software/umami 到自己的 GitHub
-
注册一个 Vercel 帐户并登录（已有跳过）。
-
访问 https://vercel.com/new 页面，从 GitHub 上导入项目。
-
添加所需的环境变量 DATABASE_URL 和 HASH_SALT（随机字符串）。
-
点击部署按钮，然后可以访问
<deploy-id>.vercel.app查看效果。 -
后续可以在
Settings>Environment Variables编辑环境变量，需要重新部署服务生效
如何使用
接入网站
配置完成网站后打开，使用初始用户名密码登录 admin:umami。登录完成后可在右上角个人资料，更新密码处修改默认信息。接着个人资料，网站，添加网址处接入待统计的网站，如果勾选了启用共享链接，代表可以将该网站的统计数据分享给他人查看。
添加网站后，在网站列表的获取跟踪代码按钮处点击，复制具体内容到标签中，注：如果开启了自定义脚本名称，此处的链接文件需要手动替换。
跟踪事件
Umami 的自定义跟踪事件有些鸡肋，只能做到统计数量。支持两类：一是 CSS 类，也就是
umami--<event>--<event-name>打标方式；另一种是在加载完成 Umami 文件后，提供了 umami 对象，可以调用一些方法，两种方式其实都挺勉强。
使用 CSS 类名
<button id="signup-button" class="button umami--click--signup-button">Sign up</button>
格式：umami--<event>--<event-name>，<event> 取值见 https://developer.mozilla.org/en-US/docs/Web/Events
注意不要使用一些频繁触发的事件，如 scroll 或 drag
使用 JavaScript
在 umami 加载完成后：
const button = document.getElementById('signup-button');
button.onclick = () => umami('Signup button click');
详情见官网文档：https://umami.is/docs/track-events
在 hexo 中使用
如果主题没有适配 umami 的话，可以使用 hexo injector 直接注入，hexo 版本需要大于 5
// <博客项目根目录>/scripts/injector.js
hexo.extend.injector.register('head_end', '<script async defer data-website-id="<your-website-id>" src="<your-umami-url>"></script>');
Reference
Also posted at https://www.nanoka.top/posts/9393cc03.html
fin.
