輕量級谷歌分析開源替代品 - Umami
??Umami?? 是一個簡單、易于使用、自我托管的網絡分析解決方案，目標是為您提供一個更友好的、注重隱私的谷歌分析的替代品，以及一個免費的、開源的付費解決方案的替代品。Umami 只收集你關心的指標，所有東西都放在一個頁面上。
特性
簡單分析 Umami 只測量你關心的重要指標：網頁瀏覽量、使用的設備以及訪問者的來源。這些數據都在一個易于瀏覽的頁面上展示。
不限網站數量 Umami 通過一次安裝就可以跟蹤無限數量的網站，甚至還可以跟蹤子域名和單個的 URL。
繞過廣告攔截器 Umami 由你在自己進行托管部署，所以你可以有效地避免 Google Analytics 不同的廣告攔截器。
輕量級 追蹤腳本很小（只有 2KB），而且支持 IE 等舊版瀏覽器。
多賬戶 Umami 可用于為朋友或客戶托管數據，只需創建一個單獨的賬號，他們就可以開始在自己的儀表板上跟蹤自己的網站。
共享數據 如果你想公開分享你的統計數據，那么你可以使用一個唯一生成的 URL 進行共享。
移動端友好 Umami 界面已針對移動設備進行了優化，因此你可以從任何地方查看你的統計數據。
數據所有權 由于 Umami 是自托管的，因此你擁有所有數據。無需將你的數據交給第三方進行利用。
注重隱私 Umami 不收集任何個人身份信息，并對收集的所有數據進行匿名處理。
開源 Umami 是開源的，并采用 MIT 的開源協議。
安裝
從源碼構建
如果你想要從源碼進行構建安裝，需要滿足以下條件：
- Node.js 版本在 12 及以上
- 一個 MySQL 或 Postgresql 數據庫
然后直接獲取源碼安裝依賴包：
git clone https://github.com/mikecao/umami.git
cd umami
npm install
接下來創建數據庫表結構。Umami 支持 MySQL 和 Postgresql，首先需要為你的 Umami 安裝創建一個數據庫，并使用包含的腳本安裝表。
對 MySQL：
mysql -u username -p databasename < sql/schema.mysql.sql
對 Postgresql:
psql -h hostname -U username -d databasename -f sql/schema.postgresql.sql
這也將創建一個用戶名為 ??admin???、密碼為 ??umami?? 的登錄賬戶。
接著使用以下內容創建一個 ??.env?? 文件：
DATABASE_URL=連接地址
HASH_SALT=任意隨機字符串
連接 url 格式如下：
postgresql://username:mypassword@localhost:5432/mydb
mysql://username:mypassword@localhost:3306/mydb
其中 ??HASH_SALT?? 用于為你的安裝生成一個唯一值。
配置完成后使用下面命令構建應用：
npm run build
構建完成后就可以啟動應用程序了：
npm start
默認情況下，這將在 http://localhost:3000 上啟動應用程序。
使用 Docker
更簡單的方式是使用 Docker 一鍵啟動，在源碼根目錄下面有 docker-compose 的配置，要構建 umami 容器并啟動 Postgres 數據庫，直接在項目根目錄下面執行如下命令即可：
docker-compose up
或者，只獲取支持 PostgreSQL 的 Umami Docker 鏡像：
docker pull ghcr.io/mikecao/umami:postgresql-latest
或者使用 MySQL 支持：
docker pull ghcr.io/mikecao/umami:mysql-latest
使用
安裝完成后，Umami 將使用用戶名 ??admin??? 和密碼 ??umami?? 創建一個默認管理員賬戶。
登錄 Umami 后，單擊頂部的 ??Settings??? 導航到 ??Websites???，點擊右側的 ??+ Add website??? 按鈕就可以開始創建網站分析了。
填寫表單詳細信息，然后單擊“Save”按鈕保存即可。
其中 ??Name??? 字段可以是任何內容，通常它與域名相同。??Domain??? 字段是你網站的實際域名。??Enable share URL?? 表示你希望通過唯一 URL 共享你的網站統計信息。
添加網站后。單擊 Get tracking code 按鈕可以獲取跟蹤代碼。
從彈出的表單中，復制代碼并將其插入到你網站的 ??<head>??? 部分即可。
然后訪問你的網站后，數據正常就會在你的 Umami 儀表板中出現了。
除了網站瀏覽相關數據之外，Umami 還能夠跟蹤你網站上發生的事件，在 Umami 中記錄事件有兩種方法，使用 CSS classes 或使用 Javascript。
使用 CSS 類
要啟用事件跟蹤，只需向要跟蹤的元素添加一個特殊的 CSS 類即可。例如，你可能有一個帶有以下代碼的按鈕：
<button id="signup-button" class="button">Sign up</button>
然后使用下面的格式添加一個 ??class?? 類：
umami--<event>--<event-name>
你的這個按鈕元素代碼可能看起來是這樣的：
<button id="signup-button" class="button umami--click--signup-button">Sign up</button>
當用戶點擊該按鈕時，Umami 會記錄一個名為 ??signup-button??? 的事件，事件類型為 ??click??。該事件可以是任何可應用于元素的 Javascript 事件。
注意：不要附加到任何連續觸發的事件上去，如 ?
?scroll??? 和 ??drag??。
使用Javascript
我們還可以使用 ??window.umami?? 對象手動記錄事件，要完成與上述 CSS 方法相同的事情，可以執行以下操作：
const button = document.getElementById('signup-button');
button.onclick = () => umami('Signup button click');
在這種情況下，Umami 將記錄一個名為 ??Signup button click??? 的事件，事件類型為 ??custom??。
查看事件
記錄事件后，它們將在你的網站詳細信息頁面上看到。
此外 Umami 還有很多高級功能，比如跟蹤配置、跟蹤函數、環境變量、API 等等，更多高級用法可以參考官方文檔 https://umami.is/docs 以了解更多信息。
最后我們來看一張使用 Umami 的 Dashboard 示例圖：
Git 倉庫：https://github.com/mikecao/umami。
