如何使用 Umami 的事件追蹤（track events）功能追蹤使用者行為？ - 日知紙簍

從 Umami 1.40 版本開始，提供了事件追蹤（track events）功能，可以「埋點」追蹤使用者的事件操作與行為；根據官方文件的說明，可以使用 HTML 資料屬性的方式埋設，也可以使用 JavaScript 腳本調用物件進行記錄。

Umami 是一款基於 Next.js 開發的開源網路分析工具，可以作為 Google Analytics (GA) 的替代品，能夠在避免使用 cookies 的前提下，收集和儲存使用者資料，符合歐盟的《通用資料保護規則》（General Data Protection Regulation, GDPR）和英國的《隱私和電子通訊法規》（Privacy and Electronic Communications Regulations, PECR）標準。

在 1.40 版本開始，Umami 提供了 事件追蹤（track events） 功能，用以追蹤使用者在網站上的事件操作與行為，比如：點擊按鈕、填寫表單等。那麼要如何使用 Umami 追蹤記錄使用者行為或者說「埋點」呢？

根據官方文件中的說明，Umami 提供了兩種方式來追蹤事件，分述如下：

使用資料屬性（data attributes）

在特定的 HTML 元素上，添加資料屬性 data-umami-event 給予追蹤事件名稱，而要給事件傳遞的屬性，則可以使用 data-umami-event-[PROPERTY] 格式。比如：

<button id="signup-button"
        data-umami-event="signup button"
        data-umami-event-id="123"
        data-umami-event-name="newsletter"
>註冊</button>

使用 HTML 資料屬性的方式，會將所有的數據保存為字串形式，其中給事件傳遞的屬性會被以 JSON 字典鍵值對的方式保存如：{ id: '123', name: 'newsletter' }；並且要注意的是，在元素內層的其他事件監聽器並不會被觸發。

使用 JavaScript 程式腳本（JavaScript）

如果想要將事件的資料以字串以外的格式（如 numeric, dates, booleans 等）保存下來，則必須使用 JavaScript 腳本來主動呼叫。

在引入 umami/scripts.js 時，會在全域中注入一個 umami 物件，因此可以直接使用 umami.track(event_name: string, event_data: object) 方法。比如在前一個例子中，點擊按鈕的事件追蹤可以這樣進行記錄：

// 獲取按鈕元素
const button = document.getElementById('signup-button');

// 添加按鈕點擊事件監聽器
button.onclick = () => umami.track('signup button', { id: 123, name: 'newsletter' });

如果沒有傳遞 event_name 參數，記錄的會是頁面瀏覽事件。