網站追蹤、使用者分析、行為分析
網站使用者行為追蹤與轉換分析 — GA、GTM、事件驅動、熱圖分析、錄影分析
探討近 20 年網站行為分析的歷史進展，解析每一個創新追蹤方式背後的脈絡與優缺
在和新認識的行銷朋友切磋時，我們常常會討論一個問題：「怎麼追蹤與分析比較好？」，原因無他，這和我們的 KPI (or OKR) 直接相關。
因此，了解追蹤原理、選擇適合的追蹤工具，將能事半功倍。
對產品團隊而言，追蹤幫助我們衡量是否解決了使用者問題，例如了解使用者都停留在哪、問題是否被解決、新功能是否被採用、以及使用者是否滿意。
對行銷團隊而言，追蹤幫助我們了解轉換成效，包含他們從哪裡來、是否理解你的網站、做了什麼、為何離開、為何而購買。
而在網站追蹤如同呼吸般的 2024 年，打開 Ghostery 或 Adblock，你會發現追蹤工具五花八門，而總有幾個熟面孔一直出現。
這篇將說明這些熟面孔為何能「霸榜」，他們各自背後又是因為哪些原因獨樹一幟，解決了哪些需求、乘上了哪些趨勢？
在了解來龍去脈後，相信你可以選擇或重新審思適合你的追蹤工具。
本主題因篇幅長度原因，會拆成兩篇，本篇會先聚焦在 GA、GTM、事件驅動分析、熱圖分析、錄影分析。
零部曲：荒蕪之地
現代管理學之父彼得杜拉克曾說
無法衡量就難以管理
What gets measured gets managed.
若你是事業負責、網站負責人、專業 PM、專業行銷人，怎能容忍自己掌握不了使用者的蹤跡？這樣要怎麼優化使用者體驗？
很顯然我們需要有一套工具幫助我們，最好還免費。
你可以參考無腦選項：Google Analytics。
一部曲：Google Analytics (GA) 出世
Google Analytics 於 2005 年 11 月發跡，江湖大名 GA，大概是所有網際網路業工作者接觸到的第一個網站追蹤工具。
為擺脫零部曲的荒蕪時代，我們需要一套簡單又容易安裝的工具來幫助我們衡量使用者行為，例如電商網站想了解客戶都造訪了哪些商品、哪些加入了購物車、總共購買了多少、轉換又是來自於哪些管道。
除了事件與轉換， GA 也首創 utm session 追蹤機制，讓行銷人直接在連結上加上 utm 追蹤碼，使用者在點擊入站後即可追蹤來自哪個來源（source）、媒介（medium）、素材（label）等，讓行銷能針對不同媒體與管道做更細緻的貢獻分析。
更不用說 GA 還提供受眾分群，讓分析者除了知道使用者的背景組成，如性別、裝置、國家地區等，還能依照經歷過指定事件或頁面圈群，直接做成動態受眾提供給 Google Ads 下廣告，增加廣告的投遞成效。
GA 的好只有裝過的人才知道，功能族繁不及備載。
看起來貌似能追的都追完了，能追人、頁面、事件，9 成以上的網站也都安裝了，還能有什麼問題？
有，問題不在追蹤，在內部溝通。
GA4 在下一篇說明，本篇說的 GA 是 GA4 的前身，以頁面分析為主、事件分析為輔。二部曲：Google Tag Manager (GTM) 滅世
GA 解決了多數追蹤問題，但追蹤可不是做一遍就結束，隨著網站功能增加、對追蹤的期待增加，我們勢必需要定期調整追蹤主體與規則。
能不能不要叫我埋 code？
隨著事件愈埋愈多，工程師們也注意到一件事：我實際上開發的時間變少了，至於是多少這見仁見智，有的團隊每一個按鈕都想追蹤，有的則只想追蹤關鍵轉換，有的想把使用者滑行的軌跡也紀錄。
有沒有一個好辦法讓這些「雜活」給行銷或產品團隊自己埋就好？
例如你經營的是旅遊票券平台，新增了一個「傳送票券給朋友」的功能，由於是新功能，所以要請工程師針對這個功能去「埋 code」。
工程師與行銷、PM 之間在過去曾為此辯論，尤其在每日被老闆高壓期待追著跑的時候。
沒錯，GTM 就是和平天使，他的降臨就是來弭平這一場場紛爭。
GTM 的權責劃分
在 GTM 小天使的幫助下，PM 與行銷人員可以輕鬆自行設定
例如想追購買成功，只要去設定
- 觸發條件：當頁面 url path 包含
/order-success - 發送購買轉換
例如想看使用者是否有點擊，可以設定
- 觸發條件：元件 class 的特徵
- 發送指定事件（e.g.
click-register）
GTM 有利有弊
GTM 帶給我們兩項好處：
- GTM 劃分了權責
- PM 與行銷掌握網站追蹤的權力
權責問題看似被解決，但也衍生出新的問題，甚至問題反而更大，因為 GTM 開啟了一個部署後門，讓所有程式碼有機會從這個後門進到正式環境（production）。
我曾聽過有朋友公司全網當掉黑畫面，工程師花了幾十分鐘 debug 但就是無法重現，後來才發現是 GTM 搞的鬼，原因是行銷在 GTM 裡某一行 code 不小心放錯、還沒測試，直接部署到正式環境。
看來 GTM 的降臨並非全是好事，而同時衡量網站也還有更好的做法，因爲一個全新的網站追蹤時代即將來臨⋯⋯。
三部曲：事件驅動追蹤入世
先破題
事件驅動 追蹤幫助我們追得更細緻，跟上最新的網站技術。
在 GA 橫行的時代，多數網站都是透過追蹤網站連結、元素 id 或特徵，來判斷是否有觸發某個事件。即便可以追事件，但多數還是 page-based。
隨著 Ajax 技術應用愈來愈普及，GA 面臨到新的挑戰。
網站漸漸不用換頁
Ajax 可簡化成大家口中的「call API」，是一種非同步資訊交換機制。以往使用者的每一個行為，只要涉及資料查詢、寫入、編輯、修改，頁面就要做一次 refresh，這對很多千禧年出生的讀者很難理解，但你只要去政府網站走走看就會發現這些遺跡。
網站們開始一個個改用 SPA(Single page application)，因為大多數功能不需要整頁重整，這不僅節省使用者的流量，體驗也變得更好了。
現在必須回頭請工程師埋追蹤，而二部曲的 GTM 也漸漸從一些公司離開。
Note
1. GA 與 GTM 後來也有跟上時代，提供 hisotry push 的支援，但整體架構還是 page-based。
2. SSR(Server side rendering) 也為了 SEO 因應而生，解決 SPA 削弱 SEO 的問題。事件紀錄更細緻
在事件基礎追蹤的當代，既然都可以追到一個事件了，何不看得更細？
例如使用者「搜尋商品」事件，過往在 GA 我們只能追到最多 4 個參數
- Event category
- Event action
- Event label
- Event value
但若想追蹤很細、以利未來可以更多維度進行分析，這侷限了我們的發揮。
若改用純事件驅動追蹤工具，我們最多可以追 100 種以上的維度，且每個維度都是自定義命名，這將能幫助我們從更多維度分析使用者行為。
例如搜尋商品的事件，我們現在可以追蹤更多、分析更細
- keyword (搜尋的關鍵字)
- sorter (排序的依據)
- searchId (替搜尋加上專屬 id)
- priceMax (價位設定最高值)
- priceMin (價位設定最低值)
- used (是否二手品)
我們針對搜尋後是否有點擊搜尋結果、加入購物車、購買，去做事件的漏斗分析，例如檢驗「有點」和「沒點」第一個搜尋結果的最終轉換率、轉換價值是否有差。
如果兩者有可觀的差距，你應該要調整搜尋演算法，讓使用者想要的結果排到第一名。
以上只是舉例，但相信你可以感受到事件可以追蹤多維度有多麽令人振奮！事後在做分析時，只要針對你有興趣的條件進行維度分析、轉換分析、交叉比對歸因，就可以找到新的洞見、加強轉換效率。
市面常使用的事件驅動追蹤工具有 Amplitude、Mixpanel。
網站趨勢切換成 SPA 也和 React、Vue 這種 Virtual DOM 技術普及有關。
要追溯還得從 jQuery 時代、AngularJS 時代談起，但技術層面偏多，不在此篇幅討論。
有興趣者可參考這篇 https://f2e.kalan.dev/frontend-ui-development/10.html。四部曲：熱圖 & 錄影分析
就在大家普天同慶事件追蹤已經結束時，老闆冷冷拋出一句話
這一頁消費者眼球都在看哪？
完了，我們努力用白名單的方式建立事件，只知道滑鼠和鍵盤怎麼操作，沒有辦法知道人家眼珠子怎麼動啊！
有的，有人解決這題了，例如 Hotjar、Fullstory、Clarity。
熱圖（Heatmap）
如上圖，在安裝後你可以分析使用者都停留在哪，再做事件追蹤上的調整。
例如使用者常駐足在某個角落，可能是一個你沒想過的連結、圖片，而你過去並未設定事件追蹤該行為，這將能幫助你找到新的洞見。
網站熱圖的原理是使用 JavaScript 去追蹤在使用者瀏覽器上的行為，例如記錄使用者的滑鼠點擊、滾動和移動位置，並將這些資料傳送到熱圖服務器，生成各種熱圖。
硬要用 GA 或 Amplitude 紀錄也行，但你需要事後去做大量計算，吃力不討好，也因此這類工具基本上都要付費。
除了量化也要質化：錄影
除了量化方法，我們也需要質化的方式協助分析。
有時 PM 缺乏使用者訪談的機會，或擔心使用者會因自我呈現（Impression management）而取悅面試人員、不說真話。這時若能直接看使用者操作的錄影，就能幫助我們擁有更高品質的質化分析。
目前幾乎所有錄影追蹤分析工具都遵守 GDPR、CCPA，例如不提供追蹤密碼、關鍵字查詢、其他敏感內容。錄影也請切記這是為了分析行為，提供更好的使用者體驗。
需要更多推薦選項，可於 Google 搜尋
Hotjar alternatives追的是人性，未完待續
從一部曲到四部曲，我們搭著時光列車從 2005 年逐漸穿梭到了 2020 年，從 GA 的誕生降低了追蹤門檻、開啟了網站追蹤濫觴，到 GTM 的降臨平息卻又加劇了權責問題，接著事件驅動追蹤增加了我們的想像與分析能力，最後則是透過熱圖和錄影視覺化、質化分析使用者行為。
每一個新的工具出現，都是為了補足上一世代工具的不足，而在提出新的解答背後，又留下新的問題給下一個世代。因此沒有任何一個工具是完美的，端看你與團隊的需求。
希望這篇的四部曲能讓你對這個主題更理解，追蹤是為了提供更好的產品功能、使用者體驗，當然同時也希望讓使用者買得更多、留得更久。
下一篇我會走完最後三部曲，介紹 GA4、實驗分析（A/B testing）、CDP，外加一隻圓舞曲，介紹上不了臺面但有用的追蹤撇步與心得。
如果你覺得這篇對你有用，或身邊有對網站追蹤分析有興趣的朋友，歡迎你拍手、留言、分享給你的朋友們！
