博主有两三个长期使用的自建站点，近日想加一个流量统计脚本，体验了几个云厂商的都不甚满意，偶然发现了Umami。

它是一个开源的网络分析工具，提供了关于网站流量、用户行为和性能的数据统计与可视化分析功能，并且拥有极简的UI风格。

试用了官方的Demo后，让博主甚是喜欢，便决定使用Docker部署Umami。

Umami部署

Umami官方提供了Docker镜像，但同时需要搭配数据库使用，这样一来，还是使用docker compose更方便一点，博主的docker-compose.yml如下。

更多环境变量配置可见官方文档：https://umami.is/docs/environment-variables

注意： 博主使用的是2.19版本，本文发布时，官方发布了最新的V3版本，且不再支持MySQL，大家下载镜像时记得区分，官方V3更新说明见Umami v3

services:
  umami:
    image: ghcr.io/umami-software/umami:postgresql-v2.19.0
    ports:
      - "9012:3000"
    environment:
      DATABASE_URL: postgresql://umami:umami@db:5432/umami
      DATABASE_TYPE: postgresql
      APP_SECRET: "string" # 自定义的密钥
      TRACKER_SCRIPT_NAME: my-analytics.js # 自定义脚本名称
    depends_on:
      db:
        condition: service_healthy
    restart: always

  db:
    image: postgres:15-alpine
    environment:
      POSTGRES_DB: umami
      POSTGRES_USER: umami
      POSTGRES_PASSWORD: umami
    volumes:
      - ./umami-db-data:/var/lib/postgresql/data
    restart: always
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}"]
      interval: 5s
      timeout: 5s
      retries: 5

容器运行成功之后，便可以登录了。
默认用户名：admin
密码：umami

站点统计添加、管理

登录之后，点击 设置-网站-添加网站填写站点名称与站点地址，便可以获得统计代码。
将代码放到需统计站点合适的页面位置，就可以做到流量统计啦。

反代配置

若部署后后发现不能获取IP省市信息，可以参考如下反代配置.

location ^~ / {
    proxy_pass http://127.0.0.1:9012; 
    proxy_set_header Host $host; 


    proxy_set_header REMOTE-HOST $remote_addr; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection $http_connection; 

    proxy_set_header X-Forwarded-Port $server_port; 
    proxy_http_version 1.1; 
    add_header X-Cache $upstream_cache_status; 
    add_header Cache-Control no-cache; 


    proxy_ssl_name $proxy_host; 
    add_header Strict-Transport-Security "max-age=31536000"; 

    proxy_buffering on;
    proxy_ssl_session_reuse off;
    proxy_ssl_server_name on;
    proxy_set_header X-Forwarded-Proto https;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host  $host;
}

深入配置：站点跟踪配置细节

除了基础的访问统计之外，Umami 还提供了一系列可用于精细化控制的跟踪配置项。通过这些配置，可以实现诸如忽略 URL 参数、避免因页面哈希变化导致的统计偏差、自定义事件标签（用于区分埋点来源）、以及在数据上报前执行自定义回调等能力。

上述功能配合，可以做简单的站点埋点统计，还是很不错的，后面或许我会写一篇Umami最佳实践~

更多配置，大家可以参考跟踪器配置 — Tracker configuration。

data-host-url

默认情况下，Umami 会将数据发送到脚本所在的地址。可以通过配置来覆盖这个行为，将数据发送到其他位置。

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

data-auto-track

默认情况下，Umami 会自动跟踪所有页面浏览和事件。可以禁用这种自动行为，并通过跟踪器函数手动进行事件追踪。

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

data-domains

如果希望跟踪脚本只在特定的域名上运行，可以在脚本中通过此参数进行配置。可以填写一个以逗号分隔的域名列表。
这测试环境（staging）或开发环境时尤其有用，可以避免在非正式环境中产生统计数据。

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

data-tag

如果希望跟踪器将事件归类到某个特定的标签下，可以为其指定一个标签。在控制台中，可以根据这个标签对事件进行筛选。

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

data-exclude-search

排查页面路径。

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

data-exclude-hash

不根据hash统计。

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

data-do-not-track

Respect user’s Do Not Track browser setting.

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

data-before-send

函数回调

function beforeSendHandler(type, payload) {
  if (checkPayload(payload)) {
    return payload;
  }
  return false;
}

<script
  defer
  src="http://mywebsite.com/umami.js"
  data-website-id="94db1cb1-74f4-4a40-ad6c-962362670409"
  data-before-send="beforeSendHandler"
></script>

UI展示

Umami的UI很是优雅。