热图和点击分析

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和业务指标，捕获纠正措施。最重要的是减少噪音，增加信号以提高转换率。