Umami 一款简单的网站流量分析平台

作者：rockrabbit | | 阅读时间：4 分钟
工具 Umami

🥣 Umami （鲜味）

Umami 是一个简单、易于使用、自托管的网络分析解决方案。

目标是为你提供一个更友好、注重隐私的 Google Analytics 替代方案，以及一个免费、开源的付费解决方案替代方案。Umami 只收集你关心的指标，所有内容都放在一个页面上。你可以在此处查看现场演示。

推荐使用 Umami 的原因？

在国内有一款非常有名的网站流量分析平台：友盟（cnzz），为什么我不推荐使用它？因为友盟多次暴露出它会在免费使用它的网页中插入广告，导致我不再信任它。

Umami 是开源的自建平台、安全、稳定，小巧，使用 Umami 就可以避免友盟这种事件的发生。

它对于开发者来说是非常好搭建和使用的，因为它支持 docker。

官网：https://umami.is

Umami 支持多国语言，包括简体中文、繁体中文等等。

umami界面

✨ Umami 特点

  • 简洁的分析：Umami 仅衡量你关心的重要指标：网页浏览量、使用的设备以及访问者的来源。所有内容都显示在一个易于浏览的页面上。
  • 不限网站数量：Umami 能够一次安装就跟踪无限数量的网站。你甚至可以跟踪子域和单个 URL。
  • 绕过广告拦截器：Umami 由你在自己的域名下托管，因此你可以有效的避免与 Google Analytics 不同的广告拦截程序。
  • 体积小：跟踪脚本很小（只有 2KB），支持 IE 等传统浏览器。
  • 多账户：Umami 可以用来为朋友或客户托管数据。只需创建一个单独的帐户，他们就可以开始在自己的仪表板上跟踪自己的网站。
  • 数据公开：如果你想公开分享你的统计数据，Umami 可以为你唯一生成一个 URL。
  • 手机友好：Umami 界面针对移动设备进行了优化，因此你可以在任何地方查看你的统计数据。
  • 数据所有权：因为 Umami 是自托管的，所以你拥有所有数据。无需将数据交给第三方进行利用。
  • 以隐私为中心：Umami 不收集任何个人身份信息，并对收集的所有数据进行匿名。
  • 开源：Umami 是开源的，并根据 MIT 许可证获得许可。源代码可在 Github 上获得。

☘️ Umami 环境要求

  • 装有 Node.js 12 或更高版本
  • 数据库：Umami 支持 MySQL 和 Postgresql 数据库
  • MySQL 数据库最低要求 5.7

🖥 在 windows 安装

如果你需要在 windows 安装 mysql 的教程请访问：传送门

#1 获取源代码并安装软件包

1
2
3

git clone https://github.com/mikecao/umami.git
cd umami
yarn install

#2 配置 Umami

使用以下内容创建文件 .env ，是不包含括号的哦 🖐️

1

DATABASE_URL=(connection url)

连接 URL 采用以下格式：

1
2
3

postgresql://username:mypassword@localhost:5432/mydb

mysql://username:mypassword@localhost:3306/mydb

#3 构建应用程序

1

yarn build

#4 创建数据库表

1

yarn update-db

这会创建一个初始账户：admin 和密码：umami

#5 启动应用程序

1

yarn start

默认情况下，启动完成后你可以直接访问 http://localhost:3000 ，你想改变运行端口你可以修改 package.json 文件，如下：

umami修改启动端口

在 start-next 键内容后面添加 -p 2157 就可以把启动端口改为 2157。这其实是 next 的用法，其他用法请参考 next 手册：传送门

如果你想使用域名来访问 umami 服务，可以参考 nginx 的 proxy 功能：传送门

🐳 在 docker 安装

要构建 Umami 容器并启动 Postgres 数据库，请运行：

1

docker-compose up

或者，只提取支持 PostgreSQL 的 Umami Docker 映像：

1

docker pull ghcr.io/mikecao/umami:postgresql-latest

或者使用支持 MySQL 的映像：

1

docker pull ghcr.io/mikecao/umami:mysql-latest

📚 Umami 常见问题

1、Umami 是否符合 GDPR 标准？

是符合的，Umami 不会收集任何个人身份信息，并且会匿名化收集所有数据。用户无法识别，也永远不会跨网站跟踪。

2、我是否需要向用户显示 Cookie 通知？

不，Umami 在跟踪代码中不使用任何 Cookie。

3、Umami 是否适用于单页应用程序 （SPA）？

是可以的，Umami 可以在 SPA 和普通网站之间无缝工作。

4、Umami 可以记录按钮点击等事件吗？

是的，请参阅 “入门” 下的 track-events。

5、如果我遇到问题或想要请求功能，可以去哪里寻求帮助？

对于一般讨论和故障排除，你可以使用 Github 上的讨论。

有关错误报告和功能请求，请在 GitHub 上提交问题。

为了获得最大的乐趣，请在Discord上加入 Umami 社区！

🧩 Umami 的技术栈

  • React - UI 框架
  • Next.js - React 框架
  • Prisma.io - 现代数据库访问工具包
  • Chart.js - 为设计师和开发人员提供简单而灵活的 JavaScript 图表
  • Redux - 用于 JS 应用程序的可预测状态容器
  • Formik -React 表单管理
  • react-spring - React 动画库

💫 Umami 的更新

为了获取最新的更新，请首先从 git 存储库中提取更改：

1

git pull

然后安装任何新的或更新的依赖项：

1

npm install

重新生成项目：

1

npm run build

最后，启动应用程序：

1

npm run start

👏 跟踪事件

除了页面浏览量，Umami 还可以跟踪网站上发生的事件。在 Umami 中记录事件有两种方法，使用 CSS 类或使用 Javascript。

#1 使用 CSS 类

要启用事件，只需向要跟踪的元素添加一个特殊的 CSS 类。

假如你的代码中有如下按钮，需要添加跟踪事件：

1

<button id="signup-button" class="button">Sign up</button>

添加以下格式的 class：

1

umami--<event>--<event-name>

添加 class 后你的按钮就变成了下面这样：

1

<button id="signup-button" class="button umami--click--signup-button">Sign up</button>

当用户单击此按钮时，Umami 将记录一个名为 signup-button 的事件，事件类型为 click。

事件可以是任何可以应用于元素的 Javascript 事件。

注意不要附加到任何连续触发的事件，如 scroll 和 drag。

#2 使用 Javascript

你还可以使用 window.umami 对象手动记录事件。要完成与上述 CSS 方法相同的任务，你可以执行以下操作：

1
2
3

const button = document.getElementById('signup-button');

button.onclick = () => umami('Signup button click');

在这种情况下，Umami 将记录名为 Signup button click 的事件，事件类型为 custom。

如果要使用自己的事件类型而不是 custom，请参阅 Tracker 函数。

#3 查看事件

一旦你的活动被记录下来，它们将出现在你的网站详细信息页面上。

umami事件

🕶 跟踪器配置

Umami 跟踪器提供了几个属性，允许你配置其行为。

#1 data-host-url

默认情况下，Umami 会将数据发送到脚本所在的任何位置。你可以覆盖此选项以将数据发送到其他位置。

用法：

1
2
3
4
5

<script async defer
  src="http://mywebsite/umami.js"
  data-website-id="94db1cb1-74f4-4a40-ad6c-962362670409"
  data-host-url="http://stats.mywebsite.com"
></script>

#2 data-auto-track

默认情况下，Umami 会自动为你跟踪所有页面浏览和事件。你可以禁用此行为，并使用跟踪器功能自己跟踪事件。

用法：

1
2
3
4
5

<script async defer
  src="http://mywebsite/umami.js"
  data-website-id="94db1cb1-74f4-4a40-ad6c-962362670409"
  data-auto-track="false"
></script>

#3 data-do-not-track

你可以配置 Umami 以尊重访客的 “不跟踪” 设置。

用法：

1
2
3
4
5

<script async defer
  src="http://mywebsite/umami.js"
  data-website-id="94db1cb1-74f4-4a40-ad6c-962362670409"
  data-do-not-track="true"
></script>

#4 data-cache

如果你从同一个用户那里获得了很多页面浏览量，例如在论坛网站上，你可以缓存一些数据来提高跟踪脚本的性能。

注意：这将使用会话存储，因此你可能需要通知用户。

用法：

1
2
3
4
5

<script async defer
  src="http://mywebsite/umami.js"
  data-website-id="94db1cb1-74f4-4a40-ad6c-962362670409"
  data-cache="true"
></script>

#5 data-domains

如果希望跟踪器仅在特定域上运行，可以将其添加到跟踪器脚本中。这是一个逗号分隔的域名列表。如果你在临时/开发环境中工作，则会有所帮助。

1
2
3
4
5

<script async defer
  src="http://mywebsite/umami.js"
  data-website-id="94db1cb1-74f4-4a40-ad6c-962362670409"
  data-domains="mywebsite.com,mywebsite2.com"
></script>

⛳ 跟踪器功能

Umami 跟踪器公开了一些功能，如果你想更好地控制跟踪，可以在网站上调用这些功能。

#1 umami(event_value)

发送事件类型为 custom 的事件。

用法：

1

umami('Signup button click');

#2 umami.trackEvent(event_value, event_type, [url], [website_id])

跟踪具有自定义的事件类型的事件。

用法：

1

umami.trackEvent('Signup button click', 'signup', '/home', '94db1cb1-74f4-4a40-ad6c-962362670409');

url 和 website_id 值是可选的，默认为脚本定义的页面 url 和 data-website-id。

#3 umami.trackView(url, [referrer], [website_id])

跟踪页面视图。

用法：

1

umami.trackView('/home', 'https://www.google.com', '94db1cb1-74f4-4a40-ad6c-962362670409');

referer 和 website_id 值是可选的，默认为脚本定义的 referer 和 website_id。

🦠 环境变量

.env 文件除了数据库中所需的 DATABASE_URL 和 HASH_SALT 变量之外，你可以使用一些附加变量来配置 Umami。

#1 IGNORE_IP = <ip addresses>

你可以提供一个以逗号分隔的 IP 地址列表，以从数据收集中排除。

#2 FORCE_SSL = 1

这将把所有请求从 http 重定向到 Umami 应用程序中的 https。注意，这不适用于跟踪脚本。

#3 LOG_QUERY = 1

如果你在开发模式下运行，这将把数据库查询记录到控制台进行调试。

#4 HOSTNAME = <hostname>

#5 PORT = <port number>

如果你在需要绑定到特定主机名或端口（如 Heroku）的环境中运行，你可以添加这些变量，并使用 npm run start-env 而不是 npm start 启动应用程序。

#6 CLIENT_IP_HEADER = <header name>

用于检查客户端 IP 地址的 HTTP 标头。当你在使用非标准头的代理之后时，这很有用。

#7 DISABLE_LOGIN = 1

禁用应用程序的登录页面。

#8 REMOVE_TRAILING_SLASH = 1

从所有传入 URL 中删除尾部斜杠。

#9 TRACKER_SCRIPT_NAME = <script name>

允许你为跟踪器脚本指定自定义名称，默认值为 umami。如果你更新了此项，请确保将网站上的跟踪代码更新为新名称。

#10 DISABLE_TELEMETRY = 1

在安装过程中禁用完全匿名遥测数据的收集。

以下是构建自定义 image

必需的 docker 生成参数

#1 BASE_PATH = <path>

（可选）如果要在子目录下托管 Umami。仅用于在前端为 URL 添加前缀。可能需要使用反向代理删除 BASE_PATH 前缀，并将修改后的 URL 传递给 umami。

#2 DATABASE_TYPE = postgresql | mysql

（必需）要使用的 DB 类型。

🔗 应用程序接口

Umami 可以使用 API 接口来操作和读取数据，接口的路径为：http://<your-umami>/api 。

你可以通过 Umami 管理面板执行的任何操作都可以在 API 中使用，但可能没有在此记录。

#1 认证

POST /api/auth/login

首先，你需要获取 token 才能发出 API 请求。你需要使用以下数据向 /api/auth/login 接口发出POST请求：

1
2
3
4

{
  "username": "your-username",
  "password": "your-password"
}

如果成功，你应该得到如下响应：

1
2
3

{
  "token": "eyTMjU2IiwiY...4Q0JDLUhWxnIjoiUE_A"
}

保存 token 值，并使用值 Bearer <token> 发送包含所有数据请求的 Authorization 标头。你的请求头应该如下所示：

1

Authorization: Bearer eyTMjU2IiwiY...4Q0JDLUhWxnIjoiUE_A

例如，使用 curl 时，它将如下所示：

1
2
3

curl https://yoursever/api/websites
   -H "Accept: application/json"
   -H "Authorization: Bearer <token>"

在 v1.26.0 之前，Umami 使用的是 cookies。如果使用旧版本，你的请求头应该是这样的：

1

Cookie: umami.auth=eyTMjU2IiwiY...4Q0JDLUhWxnIjoiUE_A

认证后的其他接口使用请参考 Umami 官方：https://umami.is/docs/api