Настройка Heatmaps для анализа поведения пользователей на сайте
Тепловые карты визуализируют зоны кликов, движений мыши и глубину скролла по страницам сайта. В отличие от числовых метрик, heatmap моментально показывает, куда смотрят пользователи и где теряется их внимание.
Типы тепловых карт
Click maps — фиксируют каждое нажатие. Показывают, кликают ли пользователи на декоративные элементы, принятые за кнопки («rage clicks»).
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 дня.