Google Analytics 有個盲區

Google Analytics（GA4）是大多數網站的標配分析工具，它能告訴你：

這個月有多少人來
他們從哪裡來（搜尋/社群/直接輸入）
他們看了哪些頁面
平均停留了多久

但它有一個根本的盲區：它不告訴你訪客在頁面上做了什麼。

他們是到了一半就離開了，還是認真看完？他們在哪個段落放棄繼續滑？那個「立即諮詢」按鈕有沒有被看到？他們有沒有試著點那個根本沒有連結的圖片？

這些問題，用熱圖工具（Heatmap Tool）才能回答。

什麼是熱圖工具

熱圖工具會在你的網站上記錄：

熱圖（Heatmap）：哪些位置被滑鼠移過去（桌機）或被點擊—用顏色直觀顯示「熱區」（多互動）和「冷區」（少互動）。

點擊圖（Click Map）：精確記錄每一個點擊發生在哪裡，包括那些沒有連結的區域（「憤怒點擊」通常代表用戶期待那裡有連結）。

滾動圖（Scroll Map）：顯示訪客平均滾動到頁面的哪個位置就停止了——你可以知道有多少比例的人看到了頁面底部的 CTA。

錄影回放（Session Recording）：記錄個別訪客的瀏覽行為，就像看著別人使用你的網站的影片。

為什麼選 Microsoft Clarity（而不只是推薦 Hotjar）

Hotjar 是這個領域最知名的工具，功能完整，但免費方案有明顯限制（每日錄影上限、熱圖採樣限制）。

Microsoft Clarity 是 Microsoft 在 2020 年推出的熱圖工具，從那時起一直是完全免費，而且沒有重大功能限制：

錄影回放：無上限
熱圖（點擊/滾動/移動）：無上限
資料保留：90 天
網站數量：無上限
費用：完全免費（Microsoft 以匿名化資料訓練 AI 產品）

對預算有限的台灣中小企業和個人工作室來說，Clarity 是目前最划算的選擇。

安裝 Microsoft Clarity

在 Next.js 網站安裝

前往 clarity.microsoft.com 註冊帳號
新增一個專案，填入你的網站 URL
取得你的 Clarity Project ID（格式如：xxxxxxx）

在 Next.js 的 app/layout.tsx 加入 Script 元件：

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-TW">
      <body>
        {children}
        <Script
          id="microsoft-clarity"
          strategy="afterInteractive"
        >
          {
            `(function(c,l,a,r,i,t,y){
              c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
              t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
              y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
            })(window, document, "clarity", "script", "YOUR_PROJECT_ID");`
          }
        </Script>
      </body>
    </html>
  )
}

將 YOUR_PROJECT_ID 替換為你在 Clarity 取得的 ID。strategy="afterInteractive" 確保 Clarity 腳本不會阻塞頁面初始載入。

部署後，等 24-48 小時，Clarity 開始收集資料。

四個你一定要看的 Clarity 分析报告

1. Dead Clicks（死點擊）

Clarity 會自動標記「Dead Clicks」——用戶點擊了某個元素，但什麼都沒發生。

這經常代表：

訪客期待那個元素是可點擊的（比如產品圖片、標題、某個看起來像按鈕的 div）
解決方法：讓那個元素真的可點擊，或改變視覺設計讓它看起來不像按鈕

2. Rage Clicks（憤怒點擊）

用戶在同一個地方快速連點多次——通常代表「頁面沒有如預期反應」的挫敗感。

常見原因：

按鈕點了沒反應（JavaScript 錯誤或連結失效）
頁面載入慢，用戶以為自己沒點到
移動版的觸控目標太小

3. Scroll Depth（滾動深度）

查看你的重要 CTA 按鈕在頁面的哪個位置，然後看有多少比例的訪客實際滾動到那裡。

如果你的「立即諮詢」按鈕在頁面 80% 的位置，但只有 30% 的訪客滾動到那裡，表示大多數人根本沒看到那個按鈕。

解決方案：在頁面更早的位置也放一個 CTA，或在 Navbar 固定一個 CTA 按鈕。

4. Session Recordings（錄影回放）

選幾個「進來之後很快離開」的瀏覽紀錄看看——他們在哪裡停下來，然後決定離開？

這是最直覺、最能找出問題點的方式。看 10-20 個錄影通常就能找出明顯的模式。

一個實際優化案例

以我自己的 SimpleCreative 網站為例，Clarity 幫我找到的最有價值的洞察：

問題一：服務方案卡片

很多訪客在服務方案卡片上的「了解更多」被大量點擊，但那個按鈕我原本只是導向頁面內的錨點（#pricing），沒有打開新頁面或彈窗——用戶點完之後滾了一下就離開了。後來我優化了錨點定位精確度和滾動動畫，讓那個 CTA 更有反饋感。

問題二：行動版 Navbar

行動版的 Hamburger Menu 按鈕被很多人點，但記錄顯示很多人點開之後只看了一眼就關掉。原來是我的行動版選單項目太多（8 個），用戶進入選單後因為選項太多而放棄。後來精簡到 5 個最重要的項目。

注意事項：隱私與 GDPR

Clarity 的錄影功能會記錄用戶在表單欄位輸入的內容——Clarity 預設會自動遮蔽密碼欄位，但如果你的表單有其他敏感欄位（如身分證號），需要手動設定「遮蔽元素」。

如果你的網站有台灣以外的用戶，需要在你的隱私政策中說明「本網站使用 Microsoft Clarity 收集匿名化行為資料與工作階段錄影」。

開始的第一步

安裝 Clarity，等兩週收集資料，然後做三件事：

看一下你最重要的頁面的熱圖——主要 CTA 在哪裡，訪客的點擊熱區在哪裡，兩者有沒有對齊？
看 Scroll Depth——你的重要資訊有多少人真的看到了？
看 5 個跳出率高的工作階段錄影——他們在哪裡決定離開的？

這三件事做完，幾乎肯定能找到 1-2 個可以立刻改善的問題點。

用 Microsoft Clarity 和 Hotjar 分析訪客行為：找出網站轉換率低的真正原因