Определение
Тепловая карта (Heatmap) — это инструмент визуальной аналитики, который накладывает цветовую шкалу на скриншот страницы и показывает, куда именно пользователи кликают, как далеко скроллят и где задерживают курсор или палец дольше всего. Чем «горячее» цвет — от синего к красному, — тем выше концентрация действий.
В российском e-commerce тепловые карты чаще всего используют в связке с веб-аналитикой (Яндекс Метрика, Google Analytics 4) и A/B-тестами. Метрика, например, даёт встроенный инструмент «Карта кликов» и «Карта скроллинга» — это и есть heatmap в базовом виде.
Аналогия
Представьте магазин в торговом центре. Вы ставите на полу датчики движения и видите: 80% покупателей идут прямо к витрине с новинками, 15% сворачивают к полке со скидками, а зона с аксессуарами у кассы — «мёртвая», туда никто не заходит. Тепловая карта — это те же датчики, только для сайта: она показывает «протоптанные тропы» и «мёртвые зоны» на странице.
Формула
Базовый показатель вовлечённости зоны рассчитывается так:
CTR зоны (%) = (Клики по элементу / Показы страницы) × 100
Для скроллинга используется глубина просмотра:
Scroll Depth (%) = (Позиция скролла / Высота страницы) × 100
Пример: если страница товара имеет высоту 4000 px, а 62% сессий достигают отметки 2400 px, то глубина просмотра этой зоны = 60%.
Сравнение типов тепловых карт
| Тип | Что показывает | Когда использовать | Инструменты |
|---|---|---|---|
| Click map (карта кликов) | Точки кликов и тапы | Проверка CTA, кнопок «В корзину» | Яндекс Метрика, Hotjar |
| Scroll map (карта скролла) | Глубина прокрутки | Оптимизация длины карточки товара | Microsoft Clarity |
| Move map (карта движения) | Траектория курсора | Оценка «читаемости» блока | Hotjar, Smartlook |
| Rage click map | Повторные быстрые клики | Поиск багов и раздражающих элементов | Clarity, Contentsquare |
| Attention map | Время задержки взгляда/курсора | Приоритет контента на первом экране | Eye-tracking + AI |
Сценарии применения
1. Карточка товара на маркетплейсе. Если 74% пользователей кликают по фото, но только 18% доходят до блока «Отзывы», значит, отзывы спрятаны слишком низко — их стоит поднять выше или вынести в аккордеон.
2. Форма оформления заказа (checkout). Rage clicks на кнопке «Оплатить» при 12% повторных нажатий сигналят: кнопка не срабатывает или платёж отклоняется. Это прямая потеря конверсии.
3. Лендинг под акцию. Тепловая карта показывает, что баннер «Скидка 30%» на первом экране собирает 41% кликов, а блок с условиями акции — всего 6%. Условия можно сократить или перенести в модальное окно.
4. Мобильная версия. На смартфонах «зона большого пальца» — нижние 30% экрана. Если CTA находится вверху, heatmap покажет провал по кликам. Перенос кнопки вниз нередко даёт +8–15% к конверсии.
Частые ошибки
- Смотреть только на «горячие» зоны. Красное пятно не всегда означает пользу — иногда это ярость от неработающего элемента (rage click).
- Игнорировать размер выборки. Менее 500 сессий на страницу — статистика недостоверна, карта «шумит».
- Путать клики с намерением. Пользователь может кликать по картинке, ожидая увеличения, а не покупки.
- Не сегментировать трафик. Новые и вернувшиеся пользователи, мобильные и десктопные — ведут себя по-разному. Общая карта усредняет и врёт.
- Делать выводы без гипотезы. Heatmap — инструмент диагностики, а не доказательство. Любое изменение проверяйте через A/B-тест.
Связанные термины
- A/B-тест — проверка гипотез, найденных через heatmap.
- CTR (Click-Through Rate) — процент кликов по элементу.
- Scroll Depth — глубина прокрутки страницы.
- Rage Click — серия быстрых повторных кликов, сигнал фрустрации.
- Session Replay — запись сессии пользователя, дополняет тепловую карту контекстом.
- Воронка конверсии — последовательность шагов до покупки, heatmap помогает найти «узкое горло».
- Юзабилити-аудит — комплексная проверка интерфейса, где heatmap — один из источников данных.