Microsoft Clarity 是微軟提供的免費網站行為分析工具，裝上一段追蹤程式碼後，就能用熱圖看訪客點了哪裡、捲到多深，用工作階段錄影重現訪客的操作過程，並自動標出 Dead clicks、Rage clicks 這類代表挫折的行為。它不取代 GA4：GA4 告訴你哪一頁的重要事件偏少，Clarity 讓你看到訪客在那一頁卡在哪裡。安裝方式有直接貼程式碼、透過 Google 代碼管理工具，以及 WordPress 等平台的外掛；上線前記得確認遮罩設定。
Microsoft Clarity 能做什麼
Clarity 的功能可以分成三塊：
- 熱圖（Heatmaps）：Click maps 顯示點擊集中的元素；Scroll maps 顯示訪客捲到多深；Area maps 統計自選區域的點擊總數；Attention maps 顯示各區段的停留時間；電商網站另有 Conversion maps。
- 工作階段錄影（Recordings）：逐步重現單一訪客的捲動、點擊與換頁，可依篩選器與區隔找出特定行為。
- 洞察指標（Dashboard）：自動標記 Dead clicks、Rage clicks、Excessive scrolling、Quick backs 與 JavaScript 錯誤。
熱圖適合看整體趨勢，錄影適合理解原因。實務上先從洞察指標或熱圖找到可疑的頁面與區塊，再用錄影確認訪客實際遇到的狀況，不必一支一支從頭看。
安裝前的準備：選擇安裝方式
先登入 Clarity，按 New project 填入名稱與網站資料建立專案，再依網站的管理方式選擇安裝途徑：
| 安裝方式 | 適合情境 | 注意事項 |
|---|---|---|
| 手動貼追蹤程式碼 | 能修改原始碼的網站 | 需要能編輯網頁的 head 區段 |
| Google 代碼管理工具 | 已用代碼管理工具管理追蹤碼 | 需有容器的發布權限 |
| 平台外掛或整合 | WordPress、Shopify、Wix 等平台 | 依各平台的整合方式設定 |
原則是全站只用一種方式安裝，避免同一頁載入兩次追蹤碼。若 GA4 已經透過代碼管理工具管理，Clarity 也放在同一個容器，日後維護比較單純。
安裝步驟：程式碼、GTM 與 WordPress 外掛
手動安裝
在專案的 Settings 中進入 Setup，選擇手動安裝並取得追蹤程式碼，貼到網站每一頁的 head 區段。
透過 Google 代碼管理工具
- 官方建議的做法：在 Settings 的 Setup 中選擇 Google Tag Manager，選取帳戶與容器後按 Create and publish。
- 或在代碼管理工具的範本庫匯入 Microsoft Clarity – Official 範本，填入 Clarity 專案 ID，觸發條件選 All pages 再發布。
- 也可以建立自訂 HTML 代碼貼上追蹤程式碼，同樣以 All pages 觸發。
代碼管理工具的容器與發布流程，可參考GTM 教學。
WordPress 外掛
在後台外掛頁面搜尋 Microsoft Clarity，安裝並啟用後從選單開啟外掛，登入並選擇既有專案或建立新專案即可。
確認資料與串接 GA4
官方說明程式碼加入後，Recordings 與 Dashboard 就能開始看到資料。驗證時用自己的手機與電腦各瀏覽幾頁，再到 Recordings 確認有沒有這幾段工作階段。一直沒有資料時，常見原因是程式碼只裝在部分頁面、快取還在提供舊版網頁，或代碼管理工具的變更尚未發布。
安裝完成後可以串接 Google Analytics：在 Settings 的 Setup 找到 Google Analytics integration，按 Get Started，登入 Google 帳戶並選擇要拉資料的 GA4 資源。官方說明每個專案只能串接一個資源，且必須先完成 Clarity 安裝。串接後可以在 Clarity 內看到 GA 的資料，把流量數字和行為紀錄放在一起判讀。
洞察指標代表哪些轉換障礙
- Dead clicks：點了某個元素，卻在合理時間內沒有任何回應。常見於看起來像按鈕的圖片、沒有連結的商品圖。
- Rage clicks：在同一區域快速連續點擊，通常代表訪客以為那裡可以互動，或按鈕沒有反應。
- Excessive scrolling：垂直捲動量明顯高於預期，可能是找不到資訊或內容排列不清楚。
- Quick backs：離開到另一頁後很快返回，代表導覽或連結沒有帶他到預期的內容。
- Click errors：點擊後發生的 JavaScript 錯誤，表單送不出去時可以先查這一項。
這些指標描述的是行為，和 GA4 的參與度、跳出率是不同角度，可以互相對照。
從熱圖與錄影找出轉換卡點的流程
- 先挑頁面：從 GA4 找出流量不少但重要事件偏少的頁面，例如服務頁、產品頁、表單頁。
- 看捲動深度：用 Scroll maps 確認主要行動按鈕是否落在多數訪客看得到的範圍，太多人沒捲到就往上移或在中段重複出現。
- 看點擊分布：用 Click maps 搭配 Dead clicks，找出被點卻沒反應的元素，決定要加連結還是改掉讓人誤會的設計。
- 篩選錄影：只看出現 Rage clicks 或 Click errors 的工作階段，並分開手機與桌機。
- 修改後比較：用相同條件比較修改前後的熱圖與指標。
頁面的訊息層次與行動呼籲怎麼安排，可參考Landing Page Design 提升轉換的關鍵原則。
隱私遮罩與同意模式設定
遮罩設定在 Settings 的 Masking，有三種模式：Strict 遮罩所有內容；Balanced 只遮罩敏感內容，數字與電子郵件會被視為敏感資料，這也是預設值；Relaxed 不遮罩一般內容。不論哪種模式，輸入框都會被遮罩。個別區塊可加上 data-clarity-mask 或 data-clarity-unmask 屬性，效果會覆蓋 Clarity 後台的設定。官方說明遮罩的內容不會上傳，只有專案管理員能調整，變更也無法回溯到既有錄影。
Cookie 方面，Clarity 提供同意模式（Consent Mode），開啟後要取得訪客的有效同意才會設定 Cookie，來自歐洲經濟區、英國與瑞士的造訪預設啟用。是否需要同意橫幅、隱私權政策怎麼寫，請以主管機關公告或法律專業意見為準。
常見問題
Microsoft Clarity 要付費嗎？
不用。官方說明 Clarity 是永久免費的服務，不會被要求升級成付費版本，同一個帳戶可以建立多個網站專案；但官方也列出每個專案每天記錄的工作階段數與每張熱圖的網頁瀏覽數有上限。
安裝 Clarity 會拖慢網站速度嗎？
官方說明 Clarity 的 JavaScript 採非同步載入，不影響網站載入速度。若網站本身已經偏慢，仍建議定期盤點整體追蹤碼的數量。
錄影可以保存多久？
官方說明錄影自錄製起保留三十天，加入收藏的錄影與系統隨機抽選的樣本可保留到九個月。有代表性的問題錄影，建議立刻收藏，方便日後和團隊討論。
錄影是真的把訪客的螢幕錄下來嗎？
不是。官方說明錄影是擷取網頁的 HTML 與使用者動作後重建出來的畫面。訪客閒置三十分鐘後工作階段就會結束，再回來會算成新的工作階段。
Clarity 會把網站資料拿去販售嗎？
官方說明 Clarity 不販售資料，處理方式可參考微軟的隱私權聲明。網站端仍要自行做好遮罩與同意設定，並在隱私權政策中說明使用行為分析工具。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
如果 GA4 已經看出某幾頁的重要事件偏少，下一步就是安裝 Clarity，挑出這幾頁的熱圖與錄影逐一檢視。京采的轉換優化與數據追蹤服務可以協助安裝與遮罩設定、串接 GA4，並整理卡點清單與頁面修改建議；想先討論哪些頁面值得優先檢查，歡迎與我們聯繫。
