Тепловая карта, heatmap, — это наглядная картинка поверх страницы сайта, где цветом показано, куда чаще всего смотрят, кликают или докуда долистывают страницу посетители. Обычно используют шкалу от синего или зеленого, места с низкой активностью, до красного, места с самым большим вниманием посетителей.
Вместо таблицы с цифрами по каждому элементу страницы тепловая карта показывает всю картину сразу: одного взгляда хватает, чтобы понять, что кнопку заказа посетители пропускают, зато бесполезная картинка в шапке забирает половину их внимания.
Три основных вида тепловых карт
Карта кликов показывает, по каким элементам страницы люди кликают чаще всего, включая клики по местам, где нет ни ссылки, ни кнопки. Такие "пустые" клики часто выдают элемент, который выглядит кликабельным, хотя разработчик не закладывал туда никакого действия, например заголовок, который посетители пытаются нажать в надежде на подробности.
Карта движения курсора отслеживает, куда посетители водят мышкой на странице. Движение курсора не всегда совпадает со взглядом человека, но на практике часто коррелирует с ним, особенно у людей, которые читают текст, следя за строкой указателем.
Карта скроллинга, глубины прокрутки, показывает, до какого места на странице долистывает большинство посетителей. Часто выясняется, что важный блок с ценами или отзывами стоит слишком низко, и до него долистывает лишь малая часть людей, которые вообще открыли страницу.
Как собирают данные для тепловой карты
На страницу сайта устанавливают небольшой код отслеживания, обычно через сервис аналитики вроде Яндекс Метрики со встроенным модулем карт или через отдельный специализированный инструмент. Этот код фиксирует движения курсора, клики и прокрутку у каждого посетителя без личных данных, только координаты и действия.
После накопления данных за несколько сотен или тысяч визитов система накладывает все зафиксированные действия друг на друга и раскрашивает страницу по плотности активности. Чем больше собрано визитов, тем точнее и надежнее выглядит итоговая карта, а на выборке в десять посещений выводы делать рано.
Тепловая карта и A/B-тесты
Тепловая карта сама по себе не доказывает, что новый вариант страницы сработает лучше, она только показывает, где именно на текущей странице теряется внимание посетителей. По итогам анализа карты обычно формулируют гипотезу: например, если кнопку заказа перенести выше, больше людей ее заметит и нажмет.
Дальше эту гипотезу проверяют через A/B-тестирование: запускают старый и новый вариант страницы одновременно на разных посетителях и сравнивают итоговую конверсию. Без такой проверки решение, принятое только по тепловой карте, остается догадкой: расположение кнопки — лишь один из факторов конверсии, рядом работают цена, оформление и доверие к магазину.
Пример: как тепловая карта помогла поднять конверсию
Интернет-магазин электроники разместил кнопку "Купить в один клик" в правом верхнем углу карточки товара, а стандартную кнопку "Добавить в корзину" ниже описания. Конверсия карточки держалась на уровне 1.8 процента несколько месяцев подряд без объяснимой причины.
Тепловая карта кликов показала, что большинство посетителей вообще не долистывают до кнопки "Добавить в корзину": карта скроллинга подтвердила, что только 35 процентов посетителей видят нижнюю часть карточки с описанием и ценой. После переноса обеих кнопок покупки в верхнюю часть страницы, сразу под фотографией товара, конверсия карточки выросла до 2.9 процента за следующий месяц.
Типичные ошибки при работе с тепловыми картами
Смотрят карту по одному-двум визитам или за первый день после запуска и делают выводы на основе такой маленькой выборки. Случайное поведение нескольких человек легко принять за общую закономерность, если данных слишком мало.
Анализируют тепловую карту в отрыве от других данных: конкретный элемент может собирать много кликов просто из-за того, что стоит в самом заметном месте страницы; к реальной важности для решения посетителя о покупке это отношения не имеет.
Забывают разделить карты по устройствам: поведение на телефоне и на компьютере отличается сильно, а объединенная карта без разбивки по устройствам смешивает две разные картины поведения в одну размытую.
Смотрят карту один раз при запуске сайта и больше к ней не возвращаются, хотя поведение посетителей меняется вместе с содержанием страницы, сезоном и составом трафика, и разовый анализ быстро теряет актуальность.
Делают выводы только по цвету без учета контекста самой страницы: красная зона на баннере с рекламной акцией — ожидаемый результат: баннер по замыслу дизайнера и должен притягивать внимание, удивляться тут нечему.
Частые вопросы
Сколько визитов нужно для достоверной тепловой карты? Большинство специалистов ориентируются на минимум 500-1000 визитов на страницу для базовых выводов, а для страниц с высокой конкуренцией за внимание, вроде главной или карточки товара, лучше набрать несколько тысяч визитов.
Нужна ли тепловая карта небольшому сайту с малым трафиком? При трафике в несколько десятков визитов в день накопление достаточной выборки займет месяцы, поэтому на старте эффективнее опросить реальных пользователей напрямую или посмотреть запись сессий вместо усредненной карты.
Заменяет ли тепловая карта обычную аналитику? Нет, тепловая карта показывает поведение внутри страницы, а обычная аналитика вроде отчетов по конверсии и источникам трафика нужна, чтобы понять, какие страницы вообще стоит анализировать в первую очередь.
Можно ли использовать тепловую карту вместо записи сессий пользователей? Лучше использовать оба инструмента вместе: тепловая карта дает усредненную картину по всем посетителям сразу, а запись отдельных сессий показывает конкретный путь одного человека и помогает заметить нестандартное поведение, которое усредненная карта сглаживает.
Тепловые карты обычно смотрят вместе с показателем отказов и итоговой конверсией страницы, чтобы понять и сколько людей ушло, и что именно на странице их не удержало. Настроить сбор данных о поведении посетителей и найти слабые места на сайте помогает аналитика и сквозные отчеты.