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

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 досягає блоку з оффером/СТА?
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 і бізнес-метриків, фіксуйте коригувальні дії. Головне - менше шуму, більше сигналів для підвищення конверсій.