1. 首頁
2. 知識庫
3. Sharing AI 架站平台教學
4. Microsoft Clarity 怎麼用？熱圖、工作階段錄製與找出網站卡關處

Sharing AI 架站平台教學

Microsoft Clarity 怎麼用？熱圖、工作階段錄製與找出網站卡關處

作者：JamXu更新日期：2026-10-12

Microsoft Clarity 是什麼？跟 GA4 差在哪裡

Microsoft Clarity 是 Microsoft 推出的網站行為分析工具，主要功能是熱圖（Heatmaps）與工作階段錄製（Session recordings）。安裝追蹤代碼之後，它會記錄訪客在頁面上的點擊、捲動與滑鼠移動，再把這些行為整理成彩色的熱圖，或重建成一段可以播放的瀏覽過程。官方說明 Clarity 是永久免費的服務，沒有流量上限，也不會只抽樣一部分流量。

很多公司已經裝了 Google Analytics 4（GA4），會疑惑兩者是不是重複。其實它們回答的是不同的問題：GA4 擅長回答「多少人來、從哪裡來、有多少人完成詢問」，Clarity 則回答「訪客在這一頁上做了什麼、為什麼沒有按下去」。前者是數字，後者是畫面。先用 GA4 找出有問題的頁面，再用 Clarity 看那一頁發生了什麼，兩者搭配起來效果最好。

要注意的是，Clarity 的錄製不是真的把訪客的螢幕錄成影片。官方文件說明，它是把頁面的 HTML 與訪客的動作一步步重建出來，所以畫面上看到的是「當時頁面的樣子＋訪客的動作」。這也是為什麼遮罩設定很重要：被遮罩的內容一開始就不會上傳，後面的章節會再說明。

安裝之前：先寫下你想回答的三個問題

Clarity 一裝下去就會開始累積大量資料，如果沒有先想好要看什麼，很容易變成「每天看幾段錄製、看完覺得很有趣，但網站什麼都沒改」。比較有效的做法，是在安裝前就寫下目前最想知道的三個問題，每個問題都對應到一個具體頁面與一個可以修改的地方。

• 詢問相關：聯絡表單的瀏覽數不少，為什麼送出的人很少？是哪一個欄位讓人放棄？
• 按鈕相關：服務頁的「預約諮詢」按鈕有沒有人看到？訪客是捲不到，還是看到了也不按？
• 內容相關：長篇的服務說明，訪客平均讀到哪裡就離開？重要的價格說明或案例是不是放得太下面？
• 手機相關：手機版的選單、電話按鈕、LINE 按鈕好不好按？有沒有被其他元素擋住？
• 改版相關：首頁改版之後，訪客的點擊位置有沒有改變？新的區塊有沒有人看？

把問題寫下來，接下來的每一步都會比較有方向：儀表板先看跟問題有關的訊號，熱圖只看那幾頁，錄製也只挑相關的幾段。工具的價值不在資料有多少，而在看完之後改了什麼。

建立專案並安裝追蹤代碼（Sharing AI 網站一段帶過）

安裝 Clarity 的步驟並不複雜，大致是「註冊帳號 → 建立專案 → 把追蹤代碼放到網站上 → 確認有收到資料」。每個網站在 Clarity 裡是一個專案，每個專案都有自己專屬的追蹤代碼與專案 ID。

1. 到 Clarity 官方網站註冊並登入，按「New project」，填入專案名稱與網站網址，建立專案。建立的人會自動成為這個專案的管理員（Admin）。
2. 在專案的「Settings → Overview」可以找到專案 ID；同一個 ID 也會出現在瀏覽器網址列的專案網址中。
3. 使用 Sharing AI 的網站，到後台「設定 → 行銷代碼」，在「新增行銷代碼」區點選「Microsoft Clarity 網站分析」，在對話框選「直接輸入編號」貼上專案 ID，或選「貼上完整程式碼」貼上 Clarity 提供的整段代碼，按「儲存」。
4. 回到 Clarity 專案，開啟自己的網站逛幾頁，確認有出現即時的線上人數，就代表代碼已經開始運作。

如果網站不是用架站平台製作，也可以手動把追蹤代碼貼進每一頁的 head 區段，或透過 Google 代碼管理工具（GTM）安裝。官方文件提供三種主要安裝方式：第三方平台、手動貼上代碼與 NPM 套件，GTM 則有一鍵整合與官方範本兩種做法。同一個網站只要選一種方式安裝，重複安裝容易造成資料重複或互相干擾。各種追蹤代碼要放在哪裡、GTM 容器怎麼建立，可以參考本站的網站行銷代碼安裝教學：GA4、GTM 與 Meta 像素，這裡不再重複。

怎麼確認真的有在收資料？

除了在 Clarity 看即時線上人數，官方也提供第二種確認方法：在自己的網站按右鍵選「檢查」，切到「Network（網路）」分頁，一邊操作頁面一邊觀察，如果看到送往 clarity.ms 的「collect」請求，就代表資料正在上傳。官方常見問題提到，儀表板的統計資料通常要等幾個小時才會出現，剛裝好看到空白是正常的，不用急著重裝。

安裝後先做的三個設定

• 排除公司內部 IP：在「Settings → IP blocking」加入公司辦公室的固定 IP，避免同事測試、改稿時的操作混進資料。官方說明只支援 IPv4，可以用 CIDR 寫法排除一段範圍，設定後約 15 分鐘生效；手機網路的 IP 不固定，無法用這種方式排除。
• 邀請團隊成員：在「Settings → Team」用 Email 邀請同事。角色分為管理員與成員，只有管理員能改設定、刪除專案；成員可以看熱圖、看錄製、儲存區段。
• 確認遮罩模式：在「Settings → Masking」確認目前是預設的平衡模式（Balanced），若網站上有會員資料、訂單資料等頁面，考慮改成更嚴格的設定（見後面的隱私章節）。

儀表板先看哪些訊號？怒點擊、無效點擊與快速返回

打開 Clarity 專案，第一個看到的是儀表板（Dashboard）。上面有工作階段數、每次工作階段的頁數、捲動深度、停留時間等基本數字，但對找問題最有用的，是一組官方稱為行為洞察指標的訊號。它們會自動標記「訪客可能感到挫折」的瀏覽過程，等於幫你先篩出值得看的錄製。

根據 Microsoft Clarity 官方文件對行為洞察指標的定義，各訊號的意思與常見原因整理如下。英文名稱是 Clarity 介面上的寫法，中文是本文的譯名。

看這些訊號時，不要只看百分比的高低就下結論。例如一張價格表上有多個看起來很像按鈕的方案名稱，無效點擊比例偏高，問題可能是設計誤導，也可能只是訪客習慣點一下來放大。數字只是提醒你「這裡值得看一下」，原因要靠熱圖與錄製確認。

使用者意圖：快速看出流量品質

儀表板的使用者概覽中，還有一個「使用者意圖（User intent）」的分類，Clarity 依互動與停留時間把工作階段分成低、中、高三種。官方說明，低意圖通常是停留不到 5 秒或停留卻完全沒有點擊與捲動的瀏覽，可能代表機器人流量或內容與受眾不符。如果某個廣告活動帶來的流量大多落在低意圖，就值得回頭檢查廣告的關鍵字與到達頁是否對得上。

熱圖怎麼看？點擊、捲動、區域與注意力四種圖

熱圖是把許多訪客的行為疊在一起看的工具。Clarity 會在頁面截圖上用顏色表示熱度：越接近紅色代表互動越多，越接近藍色代表越少。官方說明熱圖沒有最低流量門檻，選好網址就能立即產生，也可以一次看一組網址（例如所有服務頁）的合計結果。

點擊圖：先看主要按鈕，再看「不是連結卻被點」的地方

打開某一頁的點擊圖，左側會依點擊數排出最常被點的元素與占比。第一個要確認的是主要行動按鈕的排名：如果「預約諮詢」排在很後面，而選單裡的「關於我們」排在前面，代表訪客在決定之前還想多了解公司，可以考慮在服務頁補上可信的公司資訊。第二個要看的是那些「不是連結卻被點很多次」的地方，例如產品照片、服務名稱或圖示，這些通常是最容易修正的地方。按鈕的文案與擺放原則，本站的網站 CTA 設計：按鈕文案與擺放位置有完整說明。

點擊圖還可以切換裝置。電腦版與手機版一定要分開看，因為同一頁在兩種裝置上的版面不同，混在一起看會得到錯誤的印象。很多公司網站的手機流量比例並不低，手機版的點擊圖往往比電腦版更能看出問題。

捲動圖：找出多數人停下來的位置

捲動圖會用顏色由上到下漸層，左側的數據則列出每 5% 頁面高度還有多少訪客、在哪裡流失。判讀時可以找兩個位置：一是平均首屏（Average fold），代表訪客不捲動時平均看得到的範圍；二是只剩一半訪客的位置。如果價格說明、主要案例或聯絡按鈕落在只剩不到一半訪客的位置，就值得考慮把它往上移，或在前面加一個直接跳過去的連結。

區域圖與注意力圖：看整段內容而不是單一按鈕

區域圖可以自己框選範圍，例如把整個「三種方案比較」區塊框起來，看它占全頁點擊的比例；注意力圖則顯示各段落平均停留多久。這兩種圖適合用在內容調整：如果一段花很多篇幅寫的公司沿革幾乎沒人停留，而常見問題區停留最久，就可以把常見問題提前，或把沿革縮短。首頁各區塊的排列原則，可以搭配公司網站首頁內容規劃一起看。

熱圖的限制

• 官方文件說明，滑過才展開的下拉選單這類動態區塊，熱圖不會顯示上面的點擊；要看選單的使用情況，請看錄製。
• 每張熱圖最多以 10 萬次頁面瀏覽計算；捲動圖以整個頁面的 body 為準，頁面內自己會捲動的小框不會顯示。
• 熱圖是疊在其中一次瀏覽的畫面上，如果頁面有輪播或依訪客顯示不同內容，畫面與熱度可能對不太起來，可以用「更換截圖」換一張。
• 嵌入在 iframe 裡的第三方內容（例如外部的地圖、影片或表單）以及 Canvas 畫布中的內容，Clarity 無法擷取。

熱圖還有一個好用的「比較」功能，可以把兩張熱圖並排，例如同一頁改版前後、電腦版與手機版，或廣告流量與自然搜尋流量的差別。比較模式預設的時間範圍是最近 3 天，比較改版前後時記得手動調整日期。

工作階段錄製怎麼看才不浪費時間

錄製是 Clarity 最吸引人的功能，也是最容易浪費時間的功能。一個中小企業網站一個月可能累積數千段錄製，如果從最新的一段開始逐一播放，看一個下午也找不到重點。錄製要用篩選條件「挑」出來看，而不是從頭看到尾。

1. 先決定要看的問題，例如「為什麼聯絡表單送出的人很少」。
2. 在錄製頁加上篩選條件：瀏覽過的網址包含聯絡頁、裝置選手機，並加上「有怒點擊」或「沒有完成送出」這類行為條件。
3. 用排序把錄製依時間長短或點擊數排列，優先看停留較久、點擊較多的幾段，這些訪客通常是真的想完成某件事卻沒有成功的人。
4. 播放時開啟「略過閒置時間」，只看有操作的片段；看到關鍵畫面就記下時間點與現象。
5. 同一個現象至少在三到五段錄製中重複出現，再把它列為要修改的問題。單一訪客的特殊操作不需要立刻改。

錄製頁左側的每一張卡片都會列出進入頁、離開頁、來源網址、點擊數、頁數、裝置與國家等資訊，播放前先看卡片，就能判斷這段值不值得看。值得保留的錄製可以加入最愛（星號），或加上標籤方便日後查找。

從上表可以看出，一般錄製只保留 30 天，過期就無法救回。看到能說明問題的錄製，當下就加入最愛或加上標籤，月底整理改善報告時才找得到證據。

找出網站卡關處：五種常見情境與改法

把前面的工具組合起來，就能有系統地找出網站上讓訪客卡住的地方。以下整理企業網站最常見的五種情境，每一種都寫出「在 Clarity 裡會看到什麼」以及「通常怎麼改」。這些是判讀方向的示範，實際原因仍要以自己網站的錄製確認。

情境一：聯絡表單瀏覽多、送出少

在錄製中篩選瀏覽過聯絡頁、但沒有到達感謝頁的工作階段，觀察訪客停在哪一個欄位。常見的現象是訪客填到「預算」或「公司統編」這類欄位就停下來，或是按了送出卻因為格式錯誤沒有成功，畫面又沒有清楚的錯誤提示，只好反覆點擊送出按鈕，留下怒點擊。刪掉非必要欄位、把錯誤訊息放在欄位旁邊，通常就能明顯改善。欄位設計與感謝頁的做法，可以參考網站表單設計：欄位、感謝頁與通知設定。

情境二：主要按鈕很少人點

先看捲動圖，確認按鈕是不是落在大多數人捲不到的位置；如果位置沒問題，再看點擊圖，確認訪客是不是把注意力放在其他看起來更像按鈕的元素上。按鈕位置太下面就往上移，或在首屏與內容中段多放一次；按鈕不夠明顯，就調整文字與對比，讓它看起來確實是一顆按鈕。

情境三：圖片和標題被當成連結

在無效點擊熱圖上，如果產品照片、服務卡片的標題或圖示一直出現熱點，代表訪客以為點下去會看到更多內容。處理方式有兩種：一是順著訪客的期待，把它做成真正的連結，連到對應的服務頁；二是如果不打算讓它可以點，就拿掉讓它看起來可以點的樣式，例如移除滑過時的變色效果。

情境四：手機選單或固定按鈕卡住

用手機裝置篩選錄製，特別留意選單展開、關閉的過程，以及頁面底部的固定按鈕。常見的問題包括選單項目太擠導致點錯、Cookie 橫幅或聊天按鈕蓋住了送出按鈕、彈出的提示框在手機上關不掉。這類問題在電腦上測試時幾乎不會發現，錄製是最直接的證據。

情境五：長頁面讀到一半就離開

服務說明頁或文章頁如果過度捲動的比例偏高，再配合注意力圖看停留集中在哪些段落，常會發現訪客在找某一項資訊，例如價格、服務流程或地區。可以在頁面上方加入目錄、把常被搜尋的資訊做成獨立段落，並在段落標題上直接寫出答案。如果頁面本身載入很慢，也會讓訪客在內容出現前就離開，速度問題可以用PageSpeed Insights 檢測網站速度另外檢查。

篩選、區段、智慧事件與漏斗：讓資料對準你的問題

Clarity 的儀表板、熱圖與錄製都可以套用篩選條件，常用的有瀏覽過的網址、裝置、國家地區、來源（例如來自 Google 或某個廣告活動）、工作階段長度，以及是否出現怒點擊等行為。常用的條件組合可以儲存為「區段（Segment）」，例如「手機＋來自廣告＋瀏覽過服務頁」，存成區段後整個專案的成員都能直接套用，每次報告都用同一個口徑。

智慧事件：不寫程式也能定義重要動作

智慧事件（Smart events）是 Clarity 用來標記重要動作的功能。官方說明它會自動偵測九種常見事件，包括購買、加入購物車、開始結帳、聯絡我們、送出表單、要求報價、註冊、登入與下載；管理員也可以不寫程式，自己用「按鈕點擊」或「頁面瀏覽」定義新的事件，自訂事件最多 20 個。對企業官網來說，最值得定義的通常是「送出聯絡表單」「點擊電話」「點擊 LINE 詢問」這幾個動作。

漏斗：看訪客在哪一步流失

有了智慧事件，就可以建立漏斗（Funnels），把「瀏覽服務頁 → 瀏覽聯絡頁 → 送出表單」這樣的順序串起來。儀表板會顯示每一步有多少比例的工作階段繼續往下、多少人在這裡離開，以及完成整個漏斗的轉換率與花費時間的中位數。點選某一步的錄製圖示，就能直接看在這一步離開的訪客做了什麼，這是把「數字」和「畫面」接起來最快的方法。

要提醒的是，這裡的漏斗與事件是 Clarity 自己的計算方式，數字不會和 GA4 的轉換數完全一樣。兩邊的定義、計算時間點與受 Cookie 同意影響的程度都不同，對外報告詢問數時，請以單一系統為準。

和 GA4、Search Console 搭配：先找頁面，再找原因

三個工具各自負責不同的階段：Google Search Console 告訴你「搜尋使用者看到並點進了哪些頁面」，GA4 告訴你「進站之後的流量、互動與詢問數」，Clarity 則告訴你「在某一頁上具體發生了什麼」。最實用的工作流程，是由上往下逐層縮小範圍。

Clarity 也提供與 Google Analytics 的整合，連結後可以在 Clarity 內切換到 Google Analytics 的儀表板，把流量數字和行為資料放在一起看。手動整合時需要填入 GA 的帳戶 ID、評估 ID（G- 開頭）與資源 ID；官方也註明 Clarity 目前不支援套用 GA4 的區段。Search Console 的成效報表怎麼看，可以參考本站的Google Search Console 使用教學。

隱私與遮罩：哪些資料不該被錄到

Clarity 會重建訪客的瀏覽過程，自然會牽涉到隱私。好消息是它的預設值偏向保守：官方文件說明，Clarity 預設會遮蔽敏感內容，而且被遮罩的內容從一開始就不會上傳。即使如此，網站經營者還是要了解遮罩的規則，並在網站上清楚告知訪客。

三種遮罩模式怎麼選

Microsoft Clarity 官方的遮罩說明指出，輸入框裡的內容在任何模式下都會遮罩，下拉選單也一樣，所以訪客在聯絡表單裡填的姓名、電話不會出現在錄製中。除了整站的模式，管理員也可以用 CSS 選擇器指定某些區塊遮罩或不遮罩，或在網頁元素上加上 data-clarity-mask="True" 屬性強制遮罩。

• 遮罩設定只對之後的新錄製有效，不會回頭套用；變更後最長可能要一小時才生效，有疑慮的頁面請在上線前就設定好。
• 只有專案管理員可以修改遮罩設定，成員只能查看。
• 官方提醒，寫在樣式表（CSS）裡的內容不會被遮罩，不要把敏感資訊放在 CSS 中。
• 改成寬鬆模式之前，先逐頁確認頁面上沒有會員姓名、訂單編號、電話這類資料。

Cookie 與訪客同意

Clarity 會在訪客的瀏覽器設定 Cookie，第一方 Cookie 中的 _clck 用來記住同一位訪客，_clsk 則把同一位訪客瀏覽的多個頁面串成一段工作階段。官方常見問題明確寫到，網站經營者需要告知使用者 Clarity 所使用的 Cookie。官方也說明，自 2025 年 10 月 31 日起，來自歐洲經濟區、英國與瑞士的瀏覽需要有效的同意訊號，Clarity 的功能才能完整運作；如果在設定中關閉 Cookie，錄製就無法把同一位訪客的多個頁面串在一起。

在台灣，個人資料保護法第 2 條將「其他得以直接或間接方式識別該個人之資料」也列入個人資料，第 8 條則規定蒐集個人資料時應告知的事項，例如蒐集者名稱、目的、資料類別與利用方式。行為分析資料是否構成個人資料，要看實際能否識別到特定個人，本文不提供法律意見。實務上比較穩妥的做法，是在隱私權政策與 Cookie 說明中寫出使用 Clarity 的目的與方式，並維持預設或更嚴格的遮罩。網站的 Cookie 橫幅與隱私權頁面怎麼設定，可以參考Cookie 使用政策、隱私權與頁尾資訊設定。

每月例行檢查：一小時的 Clarity 工作流程

行為分析最怕「裝了之後就忘記」。建議把 Clarity 排進每個月的網站例行檢查，固定用同一套流程，大約一小時就能完成，也方便每個月比較。

1. 打開儀表板，把時間範圍設為上個月，記下工作階段數、怒點擊、無效點擊、過度捲動與快速返回的比例，和前一個月比較。
2. 找出瀏覽數最高的五頁，以及本月剛修改過的頁面，分別看電腦版與手機版的點擊圖和捲動圖。
3. 針對這個月想回答的問題，套用儲存好的區段，挑出五到十段錄製觀看，把能說明問題的錄製加入最愛並加上標籤。
4. 把觀察到的現象整理成待辦清單，每一項寫清楚「哪一頁、哪個裝置、什麼現象、預計怎麼改」。
5. 每次只改少數幾個地方，記下修改日期；下個月用同樣的條件比較修改前後的差異。

如果網站正在改版或準備上線，也可以把 Clarity 的檢查加入上線後第一、二週的觀察清單，及早發現新版面讓訪客困惑的地方。上線前後還要檢查哪些項目，可以對照網站上線前檢查清單。

常見誤解與使用限制

Clarity 很容易上手，但也有一些常見的誤解。了解它做得到和做不到的事，判讀時才不會被資料誤導。

另外，Clarity 的數字會受到 Cookie 設定、廣告阻擋外掛與機器人過濾的影響。官方說明 Clarity 預設會偵測並排除機器人流量，但任何分析工具都無法做到百分之百準確，所以請把 Clarity 的數字當作趨勢參考，不要當成精確的訪客人數。

下一步：先選一頁、一個問題開始

把整篇濃縮成三件事：第一，安裝前先寫下想回答的問題，安裝後排除公司內部 IP、確認遮罩模式；第二，從儀表板的行為訊號找出值得看的頁面，用熱圖確認位置、用錄製找出原因，電腦版與手機版分開看；第三，在隱私權政策中說明使用目的，並把 Clarity 排進每月的例行檢查，修改後用同樣的條件比較前後差異。

如果不知道從哪裡開始，就從聯絡頁或流量最多的服務頁開始，先看一次手機版的點擊圖。Sharing AI 後台其他功能的位置，可以回到 Sharing AI 架站平台教學主題頁對照；想了解平台方案，可以從 Sharing AI 架站平台開始。如果希望由專業團隊協助分析網站數據、規劃改版方向，也歡迎直接與我們聯絡。