Umami 網站分析：隱私友善的 Google Analytics 替代方案

Umami 是什麼？
#

Umami 是一款開源且輕量級的網站分析工具，提供隱私友好的流量監控功能，可作為 Google Analytics 的替代方案。它不依賴 cookies，不會收集使用者的個人資訊，因此符合 GDPR 等隱私法規。

Umami 支援自託管，使用 PostgreSQL 或 MySQL 作為數據存儲，並且可以輕鬆部署在 Docker、Vercel、Railway 等雲端平台上。此外，它還提供即時數據分析，能夠監控不同頁面的瀏覽量、流量來源、設備類型等指標。

umami github

https://github.com/umami-software/umami

設定 Umami 追蹤腳本
#

1. 註冊 Umami 帳號
#

前往 Umami 官方網站並註冊一個帳號，或選擇自託管 Umami，部署自己的分析服務。

2. 獲取追蹤代碼
#

在 Umami 儀表板中建立網站後，系統會提供一段 JavaScript 追蹤代碼。這段代碼需嵌入到你的部落格或網站中，以便 Umami 進行流量監測。

3. 在部落格中加入追蹤腳本
#

如果你使用 Hugo 作為部落格框架，可以在 /your-blog/layouts/partials/analytics/umami.html 中新增以下程式碼：

{{ if isset site.Params.umamiAnalytics "domain" }}
<script data-id="umami-script" async
        src="https://{{ site.Params.umamiAnalytics.domain }}/{{ with site.Params.umamiAnalytics.scriptName }}{{ . }}{{ else }}script.js{{ end }}"
        data-website-id="{{ site.Params.umamiAnalytics.websiteid }}"
        {{ with site.Params.umamiAnalytics.dataDomains }}data-domains="{{ . }}"{{ end }}>
</script>
{{ else }}
<script data-id="umami-script" async src="https://analytics.umami.is/script.js"
        data-website-id="{{ site.Params.umamiAnalytics.websiteid }}">
</script>
{{ end }}

{{ if .Site.Params.umamiAnalytics.enableTrackEvent | default true }}
<!-- add this -->
<script defer src="https://cloud.umami.is/script.js" data-website-id="{{ site.Params.umamiAnalytics.websiteid }}"></script>
<script type="text/javascript">
    document.querySelector('script[data-id="umami-script"]')
        .addEventListener('load', function () {
            const type = document.head.querySelector('meta[property = "og:type"]').getAttribute('content');
            let title = document.head.querySelector('meta[property = "og:title"]').getAttribute('content');
            let url = document.head.querySelector('meta[property = "og:url"]').getAttribute('content');
            umami.track(type + ':' + title, {'url': url});
    });
</script>
{{ end }}