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