Тепловая карта (heatmap) — это визуализация поведения посетителей на странице, где цветом показаны клики, движения курсора и глубина прокрутки. Простыми словами, красные зоны — туда смотрят и кликают, синие — игнорируют. Первые коммерческие heatmap-сервисы появились в 2005 году с запуском Crazy Egg, а в 2009 на рынок вышел Hotjar.
Сейчас тепловые карты используют почти все CRO-команды: по данным Baymard Institute (2023), визуальная аналитика входит в топ-3 методов оптимизации конверсии. Как работает инструмент: JS-скрипт фиксирует координаты событий и агрегирует их по сессиям. Популярные решения — Hotjar, Microsoft Clarity (бесплатный с 2020), Plerdy, Yandex Metrica.
§ 01Зачем нужна тепловая карта
Тепловая карта показывает то, что не видно в GA4: куда тянется курсор, до какого экрана докручивает 50% аудитории, какие элементы кликают, хотя они не кликабельны. Илья Гусаров в кейсах агентства не раз отмечал: heatmap раскрывает 30–40% UX-проблем, которые скрыты за усреднёнными метриками. Для чего нужно — найти баннерную слепоту, мёртвые CTA и блоки, которые пользователи принимают за кнопки.
§ 02Как настраивается
В Hotjar или Clarity создаётся проект, на сайт ставится один JS-фрагмент в <head>. Дальше выбираются страницы для трекинга и тип карты: click map, move map, scroll map. Минимальный объём данных для статзначимости — около 2000–3000 сессий на страницу (рекомендация Nielsen Norman Group). Тепловая карта собирается отдельно для десктопа и мобильных — поведение на этих устройствах отличается радикально.
конверсия +18% — Интернет-магазин косметики на Shopify записал тепловую карту кликов в Hotjar и обнаружил, что 62% пользователей кликают по нерабочему баннеру. После замены на CTA-кнопку конверсия в корзину выросла на 18% за 5 недель. Замер через GA4 Funnel Exploration.
scroll depth 28% → 71% — B2B SaaS-сервис аналитики увидел в scroll-карте Microsoft Clarity, что 72% посетителей не доходили до блока с тарифами. Перенесли цены выше формы — глубина прокрутки до тарифов выросла с 28% до 71% за 3 недели. Замер по Clarity Insights.
§ 03Где смотреть результат
Отчёты доступны в кабинете сервиса: Hotjar Heatmaps, Clarity Dashboard, Метрика → Карты. Scroll map показывает процент дошедших до каждого экрана — критично для длинных лендингов. Click map в связке с записями сессий (session recordings) даёт понимание, почему люди кликают по некликабельному. Что это значит для бизнеса: можно перенести оффер выше линии 50% scroll и поднять CR на 10–25%.
§ 04Подводные камни
Heatmap врёт на адаптивных макетах: если блок меняет позицию на разных экранах, агрегированная карта смешивает события и теряет смысл. Второй риск — выводы по 200 сессиям: данных мало, шум выше сигнала. Третий момент — приватность: с GDPR (2018) и 152-ФЗ нужно маскировать поля ввода и получать согласие на трекинг. Тепловая карта — диагностика, а не вердикт; гипотезы из неё проверяются A/B-тестом в VWO или Google Optimize-альтернативах.