Тепловые карты и аналитика кликов

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.
Каталог игр: видимость поиска/фильтров, клики по бейджам, «ложные» карточные зоны.
Страница игры: конкуренция «Играть сейчас» vs вторичные действия (демо, избранное).
Касса (депозит/вывод): dead-клики по подсказкам, фокус внимания на комиссиях/лимитах.
Турниры/акции: клики по правилам, таймерам, табличным строкам, призам.
Ответственная игра: достигаемость лимитов и частота отказов.

4) Метрики и KPI для тепловых карт

CTR зоны = клики в зоне / показы зоны.
Scroll Depth p50/p90 — медианная и высокая глубина.
Time in View — среднее время видимости сегмента.
Rage Click Rate = сессии с ≥3 кликами в 1–2 сек на одной области / все сессии.
Dead Click Share = клики без последствий / все клики.
Mis-Click Distance — среднее расстояние от зоны клика до ближайшего интерактивного элемента (указатель на «ложный affordance»).
Click Shift After Change — смещение фокуса после релиза/варианта B.
Line-of-Fold Coverage — доля ключевых CTA, попадающих выше линии сгиба.

Бизнес-связка: коррелируйте показатели с FMC, TTV, Success Rate и конверсиями в кассе.

5) Настройка и сбор данных: практика

Сегментация по устройствам: desktop/mobile отдельно (движения курсора неприменимы к мобильным).
Срезы источников: органика, paid, реферальные, «VIP/новые».
Сценарии/страницы: главная, каталог, игра, касса, акции.
Сэмплинг: 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).
Блокировка ботов: фильтры user-agent + поведенческие эвристики (сверхскоростной скролл, нечеловеческие паттерны).
Генерация зон: на базе семантических селекторов (`data-heatmap="hero-cta"`) — стабильнее, чем CSS-классы.
Состояния видимости: учитывайте sticky-шапки/плавающие CTA (иначе искажения).

6) Приватность и комплаенс

Не фиксируем персональные данные (ввводимые значения, карты, документы).
Маскируем поля форм, чаты, кошельки.
Опции opt-in/opt-out по cookie и трекингу; уважение DNT и локальных правил.
Анонимизация IP/ID и ограничение хранения сессий.
Журналы доступа: кто смотрит записи сессий и зачем.

7) Интерпретация: как не ошибиться

Клик ≠ интерес. Клик может быть следствием путаницы (dead/rage) — проверяйте outcome.
Горячая зона баннера не всегда хороша: возможно, он «съедает» внимание у P1.
Холодные блоки не обязательно плохи: возможно, это референс/SEO-контент P4.
Сравнивайте «до/после» и «A/B», а не абсолютные теплокарты.
Смотрите траекторию: где первый клик, как быстро попадают к P1 (time-to-P1).

8) Диагностика типичных проблем

Высокий Rage Click Rate на карточке игры → ожидание клика по области, где клик не обрабатывается → расширить hit-area, сделать всю карточку кликабельной или визуально отделить неинтерактивные участки.
Dead Clicks на иконках/бейджах → добавить действие или убрать «кликабельный» стиль.
Провал Scroll Depth до CTA → переместить CTA выше, добавить якорь/липкий блок.
Смещение кликов на баннеры → уменьшить визуальный вес, ограничить анимации, уточнить приоритеты.
Низкий CTR фильтров при высоких кликах на поиск → поменять порядок/яркость фильтров, дать быстрые пресеты.

9) Интеграция с A/B и воронкой

• «Если увеличить hit-area карточки с 160×200 до full-card и добавить визуальный affordance, то Dead Click Share снизится на 30%, а FMC в запуск игры вырастет на 8–12%.»
• Для каждой гипотезы привяжите целевые UX-метрики (Rage/Dead/Scroll) и бизнес-метрики (FMC, TTV, конверсия депозита).
• Запускайте A/B с обязательной теплокартой на обеих ветках: оценивайте Click Shift и «утечки» внимания.

10) Дашборд команды UX

• Heatmap Overview: топ-экраны, последние 7/28 дней, split по устройствам.
• Attention vs Outcome: зоны с высоким кликом и низким outcome.
• Rage/Dead Trend: динамика по типам страниц.
• Scroll Depth Funnel: доли достижений ключевых блоков.
• Click Shift After Release: сравнение «до/после» по ключевым зонам.
• VIP vs New Users: различия паттернов внимания.

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 }`
• Связка с аналитикой: передавайте `session_id`/`user_bucket` из A/B-платформы (без PII).
• Стабильность зон: запрещайте наследовать heatmap-метки в дочерних узлах, чтобы не «размывать» клики.

12) Чек-лист аудита по теплокартам

1. На ключевых экранах есть единственный P1 выше линии сгиба?
2. Rage Click Rate < целевого порога (например, 1,5%)?
3. Доля Dead Clicks по карточкам < X% (задайте целевой коридор)?
4. Scroll Depth p50 достигает блока с оффером/CTA?
5. Есть Click-Outcome Matrix (клик → переход/событие/ошибка/ничего)?
6. Рассмотрены различия mobile/desktop и источники трафика?
7. Все поля и чувствительные зоны замаскированы?
8. Построены «до/после» для последних релизов и A/B?
9. Для горячих баннеров проверен вытесненный CTR у P1?
10. Сформулированы и заведены корректирующие действия с приоритетом P1–P3?

13) Анти-паттерны

Оценивать страницу по одной теплокарте без контекста конверсий.
Смешивать мобильные и десктопные данные.
Делать выводы по <200 сессиям на сложных экранах.
Игнорировать dead/rage, смотреть только «красивую» карту.
Накладывать теплокарту поверх устаревшего DOM (после редизайна селекторы мигрировали).

14) Приоритизация и оформление задач

• Проблема: «Высокий Dead Click Share (18%) на бейджах карточек игр».
• Причина (гипотеза): «Бейдж стилизован как кнопка; нет действия».
• Решение: «Сделать бейджи неинтерактивными визуально или привязать действие “отфильтровать по метке”».
• Ожидаемый эффект: «−50% dead-кликов, +5% FMC в запуск игры».
• Критерии приемки: пороги метрик, измеримые в дашборде.

15) Частые вопросы

Нужно ли всегда включать теплокарты? — На ключевых путях да; на служебных — по сэмплу.
Можно ли доверять move-картам? — Только как косвенному сигналу (только desktop).
Что важнее: клики или скролл? — Зависит от экрана; для лендинга важна линия сгиба, для кассы — кликовые исходы.

16) TL;DR

Тепловые карты — быстрый визуальный «рентген» интерфейса. Смотрите не только «где горячо», но и чем это заканчивается: dead/rage/ошибки. Сегментируйте, привязывайте к A/B и бизнес-метрикам, фиксируйте корректирующие действия. Главное — меньше шума, больше сигналов для повышения конверсий.