Налаштування Heatmaps для аналізу поведінки користувачів
Теплові карти візуалізують зони кліків, руху мишиі та глибину прокрутки сторінок. На відміну від числових метрик, heatmap миттєво показує, куди концентрується увага користувачів та де вона теряється.
Типи тепловидів
Click maps—записують кожен клік. Показують, чи користувачі клікають на декоративні елементи, помилково прийняті за кнопки ("гнівані клікі").
Scroll maps—показують відсоток користувачів, які прокрутили до кожної точки сторінки. Якщо 70% виходять перед CTA-кнопкою—контент над ним потрібно скоротити.
Move maps—відстежують рух курсора як проксі для погляду (на desktop). Менш точні, але не вимагають eye-tracking обладнання.
Інструменти
| Інструмент | Особливості |
|---|---|
| Hotjar | Click/scroll/move + опитування, записи сесій |
| Microsoft Clarity | Безплатно, без обмежень, інтеграція GA4 |
| Mouseflow | 6 типів карт + воронки |
| Crazy Egg | Вбудовані A/B тести |
Microsoft Clarity—оптимальний вибір для більшості проектів: безплатен, не сповільнює сайт (асинхронне завантаження), інтегрується в Google Analytics 4 одним кліком.
Установка Clarity
<script type="text/javascript">
(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", "PROJECT_ID");
</script>
Через GTM це робиться за 5 хвилин без розгортання.
Сегментація heatmap
Дивитися на загальну карту всієї аудиторії—грубої помилки. Потрібно розбивати:
- Нові користувачі vs. повернені
- Мобільні vs. десктоп (різні макети = різні карти)
- Джерело трафіку (реклама, органіка, email)
- A/B варіант сторінки
Практичний приклад
Інтернет-магазин помічає, що на карточці товару 60% кліків на мобільних йдуть на зображення товару, а не на кнопку "Купити". Рішення: піднести кнопку вище, під зображенням, та додати sticky-бар внизу екрана. Конверсія на мобільних зростає на 12–18%.
Часова шкала
Установка та базова конфігурація—1 день. Налаштування сегментів, фільтрів та первинний аналіз карт з рекомендаціями—2–3 дні.