為什麼選擇 Umami
自己的部落格架好之後一直想要裝上網站分析工具,因為之前還在經營 Medium 時會有內建的分析工具來查看各個文章的成效,雖然功能感覺沒那麼強大,但至少我能看最基本的每篇文章的流量,但是轉到 Astro 之後就拖延到了現在都還沒裝上相關工具,至於為什麼會選擇 Umami 其實也是跟 AI 討論得知這個工具,後來瞭解後發現相對於 GA4 來說,因為相較輕量化這個就已經滿足我的需求,我不需要太多太複雜的功能,而且資料也是自己可以掌控
Umami 特色
根據官方網站的說明
- 不使用 Cookie、Banner
- 合規,符合 GDPR、CCPA 和 PECR
- 不收集任何個人識別信息(PII),並對收集的資料進行匿名化 因為我自己也對於隱私也很注重,所以看到能夠滿足網站的分析同時又能保護使用者的隱私,光這些特點就足夠吸引我了,加上是開源軟體真的擔心也可以去深入挖掘程式碼來增加自己對這個工具的信任
不用花錢的選擇 Astro + Umami + Neon
接下來就要講怎麼安裝並進行配置了,首先我的部落格是使用 Astro 框架,不過不論用什麼 SSG 其實都可以所以這不是重點。
因為資料是可以完全自己掌控,所以會有個地方進行儲存,因為我也沒有 VPS 所以傾向找其他替代方案,最終找到了兩個方案分別是 Supabase 與 Neon,這兩個方案我就簡單帶過,Supabase 功能更多更強,更適合你需要後端相關服務,像是 Auth 或是儲存等等,那 Neon 就相對單純,然後是採用 Serverless 架構,這個對我們這種流量不高然後要蹭免費方案的就很棒,沒有用到的時候就會自動進入休眠狀態,減少消耗運算額度。 那我也剛好都沒用過就隨手選了一個,若是之後使用上有遇到其他問題那在想辨法把資料遷移。
安裝配置的部分其實並沒有想像中複雜,首先就是到 neon.com 去註冊帳號,然後拿到連線字串(我選擇 Pooled connection string),接下來因為我們會需要一個台的介面去分析資料,所以要去 umami fork 到自己的 Github repo 裡,接著這裡選擇 Vercel 作為佈署平台,接著就是要串接資料庫了,這裡我們就把從 Neon 拿到的連線字串放到 Vercel 這裡的環境變數,未來若是 Umami 有更新的話就到他的 Repo 上點擊 Sync fork 就可以更新了
接下來就是在部落格內放入腳本,以 Astro 來說我只要放到 Layout.astro 就能讓全部頁面都能被追蹤到了
讓資料更乾淨,把自己排除
到你的網站打開開發者工具 F12 在 console 中輸入 localStorage.setItem('umami.disabled', 1); 就可以了,但這個值就是存在這個瀏覽器裡,所以不同電腦裝置你就會需要重複操作。