簡單介紹輕量級訪客分析工具:Splitbee

網站使用者的分析、統計工具,在業界 ™ 預設是 Google Analytics。然而,Google 推出 GA4 之後,臃腫的介面令人開始思考是否有替代方案。

原因


Splitbee 的標誌


接下來的內容


基本功能

還可以:


安裝

<head>
  <script async src="https://cdn.splitbee.io/sb.js"></script>
</head>

這段 <script> 放在每個頁面,去 Splitbee 新增專案就可以了,非常無腦。

目前手上的專案都是蓋在 Next.js,所以不須特別設定,若是 Client Side Rendering,要用其他方法。


自訂事件

最基本只要在 HTML 標籤加上屬性 data-splitbee-event,點擊就會記錄成事件:

<button type="button" onClick={toggleScheme} data-splitbee-event="切換為暗色模式">

事件記錄也是 Server 端,如果以 onClick 事件修改屬性值,或直接打開 Dev Tools,在 Client 端改為 data-splitbee-event="切換為亮色模式",事件仍是記錄 切換為暗色模式

還有,屬性 data-splitbee-event-type 是事件的副標題:

<a href="/process/01-project...html" data-splitbee-event="開始閱讀" data-splitbee-event-type="第 1 章">第 1 章</a>

在 Splitbee 呈現事件的副標題

雖然 Splitbee 內建就會抓外連網址,如果這外連網址是很重要的轉換行為,還是要設定事件,才可以讓 Funnel 幫忙統計轉換率。

在 Splitbee 呈現外連網址的轉換率


用 Webhook 產生 Discord 訊息

想在訪客踩到了重點關注的頁面或事件時收到通知,除了用 Telegram 訊息通知( 教學文件 ),也可以設定 Webhook,這裡以送通知到 Discord 的頻道為例。

取得 Webhook 網址

首先在 Discord 伺服器後台取得 Webhook 網址:
Server Settings > Integrations > Webhooks > New Webhook

在 Discord 新增 Webhook

按下 Copy Webhook URL

設定 Automation

Splitbee 填入 Discord 的 Webhook

把剛剛 Copy Webhook URL 的網址貼進來,並且設定通知訊息,格式是

{
  "content": "<你的內容>"
}

訊息內容提供訪客的資料,先在 { ... } 外面按兩次 { 有提示。

設定成功便可以在 Discord 收到像這樣的 Bot 訊息:

Bot 在 Discord 顯示 "New Visitor from Taiwan"

自訂 Discord Bot 訊息樣式的方法參考:Discohook


收費

Splitbee 沒有把獲取的資料轉售,因此 1 個月內使用達到 5,000 次事件,或要團隊共用時,就會收費。


還有更多替代方案

Plausible Analytics 是開源的統計分析套件,比 GA 小 45 倍,且不用放 GDPR 聲明

Amplitude 是許多企業規模團隊使用的分析、統計工具