熱圖和點擊分析

1）為什麼需要熱卡

熱卡（heatmaps）可視化行為：用戶點擊哪裏，遊標如何移動，遊標如何滾動。這是一種快速檢測層次結構沖突，虛假的「點擊」區域，橫幅過熱，「死亡」塊以及通往目標動作（註冊，存款，遊戲啟動，參加錦標賽）的狹窄軌跡的方法。

關鍵效應：較少的猜測-更多事實。重點排列決定是根據實際互動做出的。

2）熱卡類型

1.Click Heatmap-點擊密度：顯示在非交互元素上點擊的註意區域。
2.Move Heatmap-遊標路徑：桌面上的註意力代理度量。
3.Scroll Heatmap-滾動深度和「折彎線」：到達每個頁面段的用戶比例。
4.Attention/Confetti-強度圖+按來源/設備/變體A/B分列。
5.Rage Clicks-一點快速點擊系列：阻力指示器。
6.Dead Clicks-無後果的點擊（沒有過渡/事件）。
7.Error Clicks-以錯誤結尾的點擊（驗證、網絡故障）。

3）熱卡特別有用的地方（iGaming腳本）

首頁/登陸：檢查「英雄」和P1-CTA的統一性。
遊戲目錄：搜索/過濾器的可見性，徽章點擊，「虛假」卡區域。
遊戲頁面：「立即玩」比賽與次要動作（演示，精選）。
現金（存款/退款）：按提示進行死點擊,重點關註傭金/限額。
比賽/促銷活動：按規則，計時器，表列和獎品點擊。
負責任的遊戲：達到極限和故障率。

4）熱卡的度量和KPI

區域CTR=區域/區域顯示中的點擊。
Scroll Depth p50/p90-中位數和高深度。
查看時間-段平均可見時間。
Rage Click Rate=單個區域/所有會話的點擊≥3為1-2秒的會話。
Dead Click Share=無後果點擊/所有點擊。
Mis-Click Distance-從點擊區域到最近的交互式元素（指向「虛假事件」的指針）的平均距離。
Click Shift After Change-發布/變體B後重點轉移。
折疊線是關鍵的CTA擊中折疊線以上的比例。

業務捆綁：將性能與FMC、TTV、Success Rate和結帳轉換相關聯。

5）配置和收集數據： 實踐

設備分割：desktop/mobile（遊標移動不適用於移動）。
來源切片：有機，paid，轉介，「VIP/新」。

腳本/頁面： 主頁,目錄,遊戲,結帳,促銷.

Sampling：10-30%的流量足以保持穩定，更多-用於罕見的情況。

Фрейм событий (data layer): фиксируйте `click_target`, `component_id`, `is_interactive`, `click_outcome` (success/fail/none), `ui_state` (hover/focus/disabled), `variant` (A/B), `segment` (new/returning/VIP).

機器人鎖定：用戶代理+行為啟發式過濾器（超高速滾動、非人類模式）。
區域生成：基於語義選擇器（"data-heatmap="hero-cta"）-比CSS類更穩定。
可見性狀態：考慮粘貼帽/浮動CTA（否則失真）。

6）隱私和合規性

我們不記錄個人數據（輸入值，地圖，文件）。
我們掩蓋表格欄位，聊天，錢包。
在Cookie和跟蹤中選擇opt-in/opt-out；尊重DNT和本地規則。
匿名IP/ID並限制會話保留。
訪問日誌：誰觀看會議記錄以及為什麼。

7）解釋： 如何不弄錯

點擊≠興趣。點擊可能是混亂（dead/rage）的結果-檢查結果。
橫幅的熱區並不總是好的：也許「吃掉」P1的註意力。
冷塊不一定很糟糕：可能是P4 的參考/SEO內容。
比較「前/之後」和「A/B」而不是絕對熱卡。
查看軌跡：第一個點擊的位置,P1的到達速度（時間到P1）。

8）典型問題的診斷

遊戲卡上的高憤怒點擊率→等待點擊未處理的區域→擴大點擊範圍，使整個卡片可點擊或視覺上分離非交互區域。
圖標/徽章上的Dead Clicks →添加動作或刪除「點擊式」樣式。
Scroll Depth到CTA的失敗→將CTA移到上方，增加錨點/粘性塊。
將點擊轉移到橫幅上→減少視覺重量，限制動畫，並澄清優先級。
在高點擊搜索時濾波器的低CTR →改變濾波器的順序/亮度，並提供快速預設。

9）與A/B和漏鬥集成

• 「如果將熱門地區的卡片從160張增加× 200張增加到全卡，並增加視覺輔助功能，Dead Click Share將下降30%，FMC在遊戲推出時將增長8-12%。」
• 對於每個假設，引入目標UX度量（Rage/Dead/Scroll）和業務度量（FMC，TTV，存款轉換）。
• 在兩個分支上運行帶有強制熱卡的A/B：評估Click Shift和註意力的「泄漏」。

10）UX團隊的Dashboard

• Heatmap Overview：頂級屏幕,過去7/28天,按設備劃分。
• Attention vs Outcome：高點擊率和低收獲區域。
• Rage/Dead Trend：按頁面類型劃分的揚聲器。
• Scroll Depth Funnel：關鍵單元的成就份額。
• Click Shift After Release：在關鍵區域進行「前/後」比較。
• VIP vs新用戶：註意模式的差異。

11）技術細節（實施建議）

• `data-heatmap-zone="hero-cta"`, `data-heatmap-zone="game-card"`, `data-heatmap-zone="cashier-primary"`.

• `ui_click: { zone, component_id, is_interactive, outcome, variant, device, page, ts }`
• 與分析的捆綁：從A/B平臺（沒有PII）傳輸「session_id」/「user_bucket」。
• 區域穩定性：禁止在子節點上繼承heatmap標簽,以免侵蝕「點擊」。

12）熱卡審計支票清單

1.關鍵屏幕上有折痕線上方的唯一P1嗎？

2.Rage Click Rate<目標閾值（例如1.5%）?

3.Dead Clicks在卡片上的份額<X%（設置目標走廊）？

4.Scroll Depth p50 是用離線/STA到達街區嗎?

5.是否有Click-Outcome Matrix（點擊→過渡/事件/錯誤/無）?

6.是否考慮了移動/桌面與流量來源之間的差異?

7.所有領域和敏感區域都是偽裝的?

8.為最新版本和A/B構建的「之前/之後」？
9.對於熱橫幅，是否檢查了P1的置換的CTR？
10.制定並制定了具有P1-P3優先權的糾正措施？

13）反模式

在沒有轉換上下文的情況下按單張熱卡評估頁面。
混合移動和桌面數據。
在復雜屏幕上得出關於<200會話的結論。
忽略死者/憤怒,只看「美麗」的地圖。
將熱卡疊加在過時的DOM之上（重新設計後，選擇器遷移）。

14）任務優先排序和排序

• 問題：「遊戲卡徽章上的高死點擊共享（18％）。」
• 原因（假設）："徽章被風格化為按鈕；沒有行動。"
• 解決方案：「使徽章在視覺上不互動或綁定動作「通過標簽過濾」。」
• 預期效果是：「− 50％的死點擊率，+5％的FMC進入遊戲發布。」
• 驗收標準：在dashboard中測得的度量閾值。

15）常見問題

總是需要打開熱卡嗎？-在關鍵路徑上是的；在服務上-通過樣本。
可以信任移動卡嗎?-僅作為間接信號（僅限桌面）。
更重要的是：點擊或滾動？-取決於屏幕；折彎線對於登陸很重要，對於結帳而言，點擊結果很重要。

16) TL;DR

熱圖-接口的快速視覺「X射線」。不僅要查看「熱在哪裏」，還要查看結尾：死亡/憤怒/錯誤。細分，綁定到A/B和業務指標，捕獲糾正措施。最重要的是減少噪音，增加信號以提高轉換率。