你的頁面哪裡被忽略了？
花了好幾天做出來的 Landing Page，上線之後轉換率卻不如預期。你看著 GA4 的數據，知道跳出率很高、停留時間很短，但你不知道為什麼。
訪客是看完標題就走了？還是滑到一半就放棄？他們有沒有注意到你精心設計的 CTA 按鈕？那段花了三天寫的客戶見證，到底有沒有人看？
GA4 能告訴你「發生了什麼」，但沒辦法告訴你「在頁面的哪個位置發生」。這就是 Heatmap（熱圖）工具的價值——它把訪客的行為變成一張彩色地圖，讓你用眼睛就能看出問題在哪裡。
Heatmap 到底是什麼
Heatmap 的概念很直覺：用顏色深淺來表示數據密度。紅色代表「很多人在這裡做了某件事」，藍色代表「很少人」。你一眼就能看出頁面上哪些區域是熱門的、哪些是被冷落的。
根據追蹤的行為不同，Heatmap 主要分成三種類型：
Click Heatmap（點擊熱圖）
記錄訪客在頁面上點了哪些地方。這是最常用也最實用的類型。它能告訴你：
- 訪客最常點擊哪些按鈕和連結
- 有沒有人在「不能點的地方」點擊（代表他們以為那是連結）
- CTA 按鈕的點擊分佈是集中還是分散
Scroll Heatmap（捲動熱圖）
顯示訪客把頁面往下滑到什麼程度。通常會用百分比表示——例如「75% 的訪客看到了頁面 50% 的位置」。這對判斷內容長度和區塊排列順序非常有幫助。
根據 Contentsquare 的 2024 年數位體驗基準報告，桌機使用者平均只會瀏覽頁面 56% 的內容，手機使用者更低，大約 44%。換句話說，你放在頁面下半段的內容，有超過一半的訪客根本看不到。
Move Heatmap（滑鼠移動熱圖）
追蹤滑鼠游標在頁面上的移動軌跡。理論上，滑鼠移動的位置大致反映了視線停留的位置。不過老實說，這個類型的參考價值比前兩種低，因為很多人滑鼠亂放，跟實際閱讀位置不一定吻合。在手機上更是完全沒用，因為沒有游標。
Hotjar vs Microsoft Clarity：該選哪一個
市面上的 Heatmap 工具不少，但最多人用的就是 Hotjar 和 Microsoft Clarity 這兩個。它們的定位不太一樣，適合不同的情境。
| 比較項目 | Hotjar | Microsoft Clarity | |---------|--------|-------------------| | 價格 | 免費版每月 35 個 session，付費版起價 USD $32/月 | 完全免費，無流量上限 | | Heatmap 類型 | Click、Scroll、Move | Click、Scroll、Area | | Session Recording | 有（免費版有限制） | 有（無限制） | | 問卷/回饋工具 | 有（核心賣點之一） | 無 | | GA4 整合 | 有 | 原生整合，自動同步 | | 數據保留 | 依方案，免費版 30 天 | 無限期 | | Rage Click 偵測 | 有 | 有 | | Dead Click 偵測 | 有 | 有 | | 隱私合規 | GDPR、CCPA | GDPR、CCPA、不使用第三方 cookie |
我們的建議：如果你的預算有限，先用 Clarity。它完全免費、沒有流量限制，而且跟 GA4 的整合做得很好。等你需要問卷調查功能或更精細的 Heatmap 篩選條件時，再考慮升級到 Hotjar 的付費方案。
實務上，兩個都裝也是可以的。Clarity 負責基礎的 Heatmap 和 Session Recording，Hotjar 負責使用者回饋調查。兩者不會衝突，對頁面載入速度的影響也很小。
安裝設定其實不難
不管選 Hotjar 還是 Clarity，安裝都不複雜。以 Clarity 為例：
- 到 clarity.microsoft.com 註冊並建立專案
- 拿到一段追蹤碼（大約十行 JavaScript）
- 把追蹤碼放進網站的
<head>標籤裡
如果你的網站有裝 Google Tag Manager（GTM），更簡單——Clarity 有現成的 GTM 範本，幾個點擊就搞定。Hotjar 也是一樣的流程。
裝好之後大約等 30 分鐘到 1 小時，第一批數據就會開始出現。
一個容易踩的坑：記得在隱私權政策裡說明你有使用行為追蹤工具，如果你的訪客主要來自歐盟，還需要在 Cookie 同意橫幅裡加上相關選項。Clarity 的好處是它不使用第三方 cookie，合規上相對簡單一些。
怎麼看懂 Heatmap 數據
裝好工具、累積了一些數據之後，重點來了——怎麼從這些花花綠綠的色塊裡找到有用的資訊？
從 Scroll Map 開始看
先看 Scroll Map，了解訪客到底看了多少內容。找到「大量流失點」——也就是顏色從暖色突然變冷色的位置。
我們幫一家做線上英語教學的客戶分析 Landing Page 時發現，頁面 40% 的位置出現了一個斷崖式的流失，有將近 60% 的訪客在那個點就停止往下滑了。那個位置放的是一大段純文字的課程介紹。我們把那段文字改成條列式重點 + 一張課程流程圖之後，滑到頁面底部的訪客比例從 22% 提升到 38%，表單送出率也跟著提升了 15%。
接著看 Click Map
注意以下幾種情況：
- Ghost Click（幽靈點擊）：訪客在不可點擊的元素上大量點擊——代表他們期望那是一個連結或按鈕。這是 UX 設計有問題的訊號，考慮把那個元素變成可點擊的
- Rage Click（憤怒點擊）：訪客在同一個位置連續快速點擊——通常代表頁面反應太慢或按鈕沒有回饋。Clarity 和 Hotjar 都有內建 Rage Click 的篩選功能
- CTA 被忽視：你的主要 CTA 按鈕顏色很淡或位置太下面，結果 Click Map 上幾乎沒有熱度——這是優先要處理的問題
用 Session Recording 補充細節
Heatmap 是「總覽」，Session Recording 是「個案」。當你在 Heatmap 上看到異常，用 Session Recording 去看幾個個別訪客的操作錄影，理解他們實際的行為脈絡。
比如你看到某個位置有很多 Rage Click，去看錄影才發現原來是一個展開式 FAQ，但展開的動畫太慢，訪客以為沒反應就一直點。
搭配 A/B 測試才能形成閉環
Heatmap 最大的限制是：它只能告訴你問題在哪裡，不能告訴你答案是什麼。
你從 Scroll Map 上發現 70% 的訪客沒看到 CTA 按鈕。所以你決定把 CTA 往上移。但往上移多少？移到哪個位置最好？是只移位置就好，還是應該順便加大按鈕尺寸？
這些問題，Heatmap 回答不了。你需要用 A/B 測試來驗證你的假設。
一個完整的優化流程長這樣：
- Heatmap 發現問題：Scroll Map 顯示大量訪客在頁面中段流失
- 分析原因：該位置放了一段冗長的文字，Session Recording 顯示訪客明顯在那裡失去耐心
- 提出假設：「如果把這段文字改成圖文並茂的條列式重點，應該能降低中段流失率」
- A/B 測試驗證：做兩個版本，讓數據說話
- 再用 Heatmap 確認：測試勝出版本上線後，再看一次 Heatmap，確認問題真的解決了
這個「發現 → 假設 → 驗證 → 確認」的循環才是 CRO（轉換率優化）的核心方法論。單用 Heatmap 或單做 A/B 測試都只做了一半。
實務上的注意事項
用了一陣子 Heatmap 工具之後，有幾個從經驗中學到的眉角想分享：
樣本量要夠
不要裝好工具第二天就跑去看報表。10 個訪客的 Heatmap 什麼都看不出來。根據我們的經驗，一個頁面至少要累積 300-500 個 session 的數據，Heatmap 才有參考價值。流量小的頁面就多等幾天，不要急。
區分裝置
桌機和手機的使用行為差異非常大。桌機使用者可能會在頁面上四處瀏覽，手機使用者幾乎只會垂直捲動。把兩種裝置的數據混在一起看會得到錯誤的結論。記得分開篩選。
不要過度解讀
Heatmap 是一個輔助工具，不是真理。有時候一個區域點擊量很高，不是因為那個元素很吸引人，而是因為訪客在找東西找不到、到處亂點。結合 Session Recording 一起看，才能避免誤判。
定期更新
頁面改版之後，舊的 Heatmap 數據就沒有參考價值了。養成習慣，每次做了重大修改，就重新跑一輪 Heatmap 分析。
注意頁面載入對數據的影響
如果你的頁面載入速度很慢，很多訪客可能在 Heatmap 工具的 JavaScript 載入之前就離開了。這意味著你的 Heatmap 數據可能漏掉了最沒耐心的那群人——而他們的行為模式往往跟留下來的人很不一樣。
結語：用看的比用猜的快
Heatmap 不是什麼高深的技術，也不需要數據分析的專業背景。它做的事情很單純——把訪客的行為攤開來給你看。
很多時候，一張 Heatmap 截圖就能讓團隊停止無意義的爭論。「CTA 按鈕要放上面還是下面」不用吵了，Scroll Map 告訴你 60% 的人根本看不到下面。「客戶見證要不要放」不用猜了，Click Map 告訴你那個區塊根本沒人點。
先把 Clarity 裝起來，花不到十分鐘。跑個一兩週累積數據，然後去看看你的頁面——保證會有驚喜（或驚嚇）。