Что такое тепловая карта сайта и зачем она нужна

Тепловая карта, или heatmap — это инструмент визуализации данных, который показывает поведение пользователей на странице сайта с помощью цвета.

Под активностью понимают клики, движения курсора мыши, глубину прокрутки и другие виды взаимодействия с интерфейсом. Анализ этой информации помогает найти проблемы юзабилити и точки роста для конверсии.

Коммерческие факторы. Чек-лист за заявку!

• Подарим чек-лист по коммерческим факторам ранжирования
• Проконсультируем по SEO-вопросам.

Получить чек-лист

Виды тепловых карт

Основные виды тепловых карт:

• карта кликов;
• карта ссылок;
• карта скроллинга;
• карта движений мыши (hover/move map).

Рассмотрим каждый вид подробнее.

Тепловая карта кликов

Карта кликов показывает, на какие элементы страницы и как часто кликают пользователи. Иногда отчёт может показать, что посетители нажимают на некликабельные картинки. Это сигнал, что их нужно либо убрать, либо сделать интерактивными и придать смысловую нагрузку.

Если окажется, что посетители не кликают на формы захвата — возможно, надо доработать призыв к действию или сделать саму форму более заметной.

Задачи, которые решает тепловая карта кликов:

1. Оценка юзабилити сайта. Если пользователи кликают по элементам, которые не являются ссылками или кнопками, это указывает на явные проблемы с юзабилити интерфейса. Часто подобное происходит с логотипом компании и телефонами — лучше делать их кликабельными.
2. Выявление наиболее привлекательных элементов. Если на сайте предусмотрены несколько вариантов дизайна кнопки конверсионного действия, карта кликов поможет определить наиболее эффективный вариант. Смотрите CTR элемента в тестируемых вариантах.
3. Улучшение дизайна сайта. Наиболее кликабельные элементы можно переместить в самые заметные блоки, а тексты на кнопках сделать более читабельными для увеличения отклика.
4. Выявление самых популярных разделов и усиление их контента. Если посетители часто интересуются страницей «О нас», рационально проверить её на информативность, убедительность и конверсионность.
5. Поиск перспективных тем. Если на сайте есть блог с хештегами, можно увидеть, на какие из них часто кликают пользователи, и использовать эти данные при формировании контент-плана.

Тепловая карта ссылок

Она показывает, по каким ссылкам переходят посетители конкретной страницы. Например, в какие разделы меню они заглядывают, какие карточки товаров в интернет-магазине изучают, используют ли кликабельный номер телефона. С помощью этого инструмента можно проанализировать и внутренние, и главную страницу сайта.

Задачи, которые решает тепловая карта ссылок:

1. Определение самых ходовых товаров. Если в товарную карточку часто переходят, товар перспективен. Если нет, возможны три варианта: переработать ссылку-описание, чтобы она была более мотивирующей, поменять позиционирование товара или вывести его из ассортимента.
2. Доработка дизайна сайта. Самые востребованные товары и услуги логично выделить более заметно с точки зрения дизайна и, возможно, перенести на более видное место для повышения их видимости.
3. Уточнение интересов пользователей. В этом плане могут быть информативны ссылки в подвале сайта. Например, если посетители часто, изучив основной контент, переходят в раздел кейсов, можно продублировать эту ссылку на первом экране и улучшить поведенческие факторы.

Тепловая карта скроллинга

Она визуализирует процесс прокрутки страницы. Блоки, на которых посетитель задерживает внимание, подсвечиваются ярким красным, а те, которые быстро пролистывают — бледно-зеленым.

Задачи, которые решает карта скроллинга:

1. Взгляд на контент глазами пользователя. Такие карты помогут убрать лишние блоки и определиться с оптимальной длиной текстов. Ориентируйтесь на медианную глубину скролла и долю пользователей, дошедших до ключевых блоков.
2. Определение лучшего места для размещения ссылок. Если вы заинтересованы, чтобы по внутренним ссылкам на сайте переходили, лучше размещать их в блоках, которые привлекают максимум внимания посетителей.
3. Выбор вида ленты. Карта скроллинга покажет, что может быть эффективнее в вашем случае — бесконечная прокрутка или пагинация (постраничная навигация).

Все это влияет на поведенческие факторы, а через них и на продвижение сайта в поисковых системах.

Как посмотреть и создать тепловую карту в Яндекс.Метрике

1. Подключите счетчик и включите Вебвизор 2.0. При создании счетчика отметьте чекбокс «Вебвизор, карта скроллинга, аналитика форм» в настройках и сохраните изменения. Дождитесь накопления данных — рекомендуется не менее недели.
2. Установите код счетчика на сайт. Вставьте скопированный скрипт напрямую в HTML или через Google Tag Manager (тег типа «Пользовательский HTML» с триггером All Pages). Через 10–15 минут после установки проверьте, что визиты фиксируются в отчетах.
3. Откройте нужный тип карты. В интерфейсе Метрики перейдите: Отчеты → Карты → выберите нужный тип: Клики, Ссылки или Скролл.
4. Задайте период и сегменты. Отфильтруйте данные по устройству (десктоп/мобайл), источнику трафика или типу посетителей (новые/вернувшиеся). Смешивать десктоп и мобайл в одном срезе — частая ошибка, так как поведение на этих устройствах принципиально разное.
5. Сохраните отчет и зафиксируйте инсайты. Обратите внимание на CTR элементов, долю «пустых» кликов по некликабельным зонам и медианную глубину скролла. Это базовые показатели для дальнейших гипотез по улучшению страницы.

Плюсы и минусы тепловых карт

Тепловые карты сайтов — во многом недооцененный инструмент. Работа с ними дает много преимуществ владельцу бизнеса, маркетологу и веб-аналитику.

1. Наглядность. Цветовая визуализация позволяет представить большие массивы данных в максимально простой и понятной форме. Это экономит время на аналитику, ведь окинуть взглядом тепловую карту намного проще, чем работать с теми же данными в таблицах.
2. Возможность доработать сайт. Анализ тепловых карт дает конкретные идеи для оптимизации сайта: какие элементы сделать кликабельными, какие разделы убрать из текста, где разместить рекламный баннер, а где добавить призыв к действию, чтобы повысить конверсию.
3. Улучшение юзабилити. Повышая функциональность элементов сайта, например, форм захвата, и сделав навигацию более очевидной, вы делаете сайт удобнее для посетителей, что повышает их лояльность.
4. Рост позиций сайта в поисковой выдаче. Дорабатывая контент, визуальное оформление и юзабилити на основе данных тепловых карт, можно снизить количество отказов и увеличить время сессий. Поисковые роботы учтут эти сигналы, что положительно скажется на ранжировании.

У любой медали есть две стороны — у тепловых карт тоже есть свои минусы.

1. Недостаточность данных. Основной минус — соблазн делать выводы только на основании данных тепловых карт. Более рационально использовать их в связке с другими инструментами веб-аналитики, чтобы получить достоверную картину.
2. Большинство сервисов — платные. Стоимость использования полного функционала таких сервисов может быть ощутимой для стартапов и небольших компаний.

Ограничения и точность тепловых карт

Тепловые карты — полезный инструмент, но с оговорками. Без понимания их ограничений легко сделать неверные выводы и потратить ресурсы на ненужные изменения.

• Движение курсора не равно взгляду. Hover-карты — лишь косвенный индикатор внимания. Пользователь может смотреть в одну зону, а курсор держать совсем в другой.
• Мобайл искажает данные. На смартфонах инерционный скролл и тапы смещают фиксируемую плотность кликов. Десктопные и мобильные данные обязательно разделяйте — иначе карта даст ложную картину.
• Rage-клики и «пустые» клики. Часть кликов приходится на некликабельные элементы из-за багов в верстке или неочевидного интерфейса. Это сигнал UX-проблемы, а не реальной активности.
• Боты и тестовые хиты. Фильтруйте трафик сегментами — иначе автоматические переходы исказят тепловую карту.
• Нужна достаточная выборка. Одна страница — слишком мало. Анализируйте шаблоны: категории, карточки товаров, лендинги — группами однотипных URL.
• Смешение сегментов дает ложные выводы. Разделяйте десктоп и мобайл, новых и вернувшихся, органику и платный трафик — поведение в этих группах принципиально различается.

Сервисы для создания тепловых карт

Коротко расскажем о сервисах, с помощью которых можно получить тепловые карты сайта для их анализа.

5 классных SEO-кейсов

Круче, чем Гудини: как мы вырастили трафик в 2,2 раза

Все вы прекрасно знаете Гарри Гудини: этот фокусник мог выбраться из закрытой бочки, брошенной в воду. Примерно в таких же рамках оказались и мы, начиная работу с сайтом Eurorepar. Узкий функционал, жесткие требования. Но мы справились без магии, увеличив трафик х2!

Читать кейс

Читать кейс

Как выжать максимум из двадцатилетнего сайта

Можно ли выжать максимум из 20-летнего сайта и докрутить его до современных стандартов? А если есть отягчающие обстоятельства — накрутка поведенческих факторов, антиботы, да еще и админка капризничает и сама удаляет категории?

Читать кейс

Читать кейс

Долгая дорога в SEO и мощный прорыв

Наш клиент — интернет-магазин B2B промышленной тематики. Он достался нам после предыдущих подрядчиков, и первые год-два мы исправляли их ошибки. А потом началась долгая кропотливая работа, которая в итоге принесла желанный результат.

Читать кейс

Читать кейс

Qugo: вырастили трафик из блога платформы b2b в 9,7 раз!

Молодой сайт, сложная тематика b2b, крупные конкуренты — с такими вводными трафик и позиции оставляли желать лучшего. Но бы добились цели: повысили трафик и позиции, улучшили узнаваемость бренда

Читать кейс

Читать кейс

Эффективное ссылочное продвижение для федеральной аптечной сети

Федеральная аптечная сеть пришла в Kokoc Performance (входит в Kokoc Group) за ссылочным продвижением. Интересно, что в компании есть своя in-house команда по SEO, которая подготовила ссылочную стратегию, а за ее реализацией обратилась к нам.

Читать кейс

Читать кейс

1/5

«Яндекс Метрика»

Сайт: https://metrika.yandex.ru/

Стоимость: бесплатно

Виды тепловых карт: карта скроллинга, карта кликов, карта ссылок

Самый популярный и единственный полностью бесплатный сервис в Рунете. Он русскоязычный, понятный и многофункциональный. Предоставляет разные виды отчетов, включая подробные тепловые карты.

У сервиса хорошо работающая служба поддержки, к которой можно обратиться онлайн прямо из интерфейса Метрики. На вопросы техподдержка отвечает быстро и профессионально.

Можно настроить следующие виды карты кликов:

• Классическая с переходом от теплого красного к холодному синему.
• Монохромная, где наиболее кликабельные элементы выделяются плотным темным цветом.
• Прозрачная, где карта кликов отображается как туманная маска: чем четче элемент, тем чаще по нему кликают.
• Клики по ссылкам и кнопкам: в этом режиме не будут отображаться нажатия по некликабельным элементам.

Минус только один, и то условный — с сервисом нужно разобраться, посвятив этому некоторое время, чтобы использовать весь его потенциал.

Microsoft Clarity

Сайт: https://clarity.microsoft.com/

Стоимость: бесплатно

Виды тепловых карт: карта скроллинга, карта кликов

Бесплатный сервис от Microsoft с записями сессий и автоматическими инсайтами — в частности, он фиксирует rage-клики (серии быстрых кликов) и «мертвые» клики по нерабочим элементам. Удобные фильтры по устройствам, странам и UTM-меткам; есть интеграция с Google Analytics. Данные по тепловым картам хранятся до 13 месяцев. Подходит для быстрого старта и мониторинга UX-проблем без вложений.

Минусы — нет карты ссылок; возможны сложности с динамическим контентом и страницами с бесконечным скроллом.

Mouseflow

Сайт: https://mouseflow.com/

Стоимость: от 24 до 199 €.

Виды тепловых карт: карта скроллинга, карта кликов

Многофункциональный англоязычный сервис. У него довольно удобный интерфейс, и если в ваш браузер встроен переводчик, разобраться будет несложно.

Сервис заявляет о 165 000 пользователей и обещает помощь в оптимизации сайта и повышении его конверсии. Есть бесплатный тариф, который позволяет записать и сохранить на 30 дней 100 сессий — это похоже на цветной вебвизор.

Минусы — нет карты ссылок. А если вы хотите получить больший объем информации, то придется выбрать один из платных тарифов.

Freshmarketer

Сайт: https://www.freshworks.com/crm/features/heatmap/

Стоимость: от 19 до 299 $.

Виды тепловых карт: карта скроллинга, карта кликов

Удобный англоязычный сервис, есть всплывающие подсказки, которые помогут начать работу. Можно задать конкретный период для сбора статистики.

У сервиса есть расширение для популярных браузеров (кроме «Яндекс.Браузера»), которое помогает просматривать тепловые карты прямо на сайте, без перехода на внешние площадки.

Минусы — нет карты ссылок. На сервисе заявлен бесплатный тариф, но с оговоркой: «0 $/месяц, но при этом ежегодно выставляется счет за 100 маркетинговых контактов». Платить все-таки придется.

Эффективное SEO

• Гарантия результатов
• Комплексное развитие
• При любом тарифе отслеживаем динамику заявок и звонков с сайтов
• Регулярный пересмотр семантического ядра

Узнать больше

Hotjar

Сайт: https://www.hotjar.com/

Стоимость: от 39 до 389 € в месяц, есть бесплатный тариф

Виды тепловых карт: карта скроллинга, карта кликов

Еще один информативный англоязычный сервис с функцией создания тепловых карт. Он позволяет не просто создавать отчеты, но и скачивать их для анализа или отправлять коллегам. На сайте карты хранятся в течение 365 дней.

Разработчики сервиса информируют, что Hotjar используют в 180 странах мира. Есть полностью бесплатный базовый тариф, которого вполне достаточно для небольшого бизнеса.

Минусы — нет карты ссылок. Для расширения функционала предусмотрены платные тарифы.

Heat-map

Сайт: http://heat-map.co/

Стоимость: от 29 до 79 $ в месяц, заявлен бесплатный тариф

Виды тепловых карт: карта кликов

Англоязычный сервис, который существенно отличается от всех, представленных выше. Он работает без подключения к сайту, просто анализируя по собственным алгоритмам заданную страницу по ссылке. Статистику сервис не собирает.

После регистрации пользователь создает новый проект, вставляет ссылку на страницу, которую хочет проанализировать, и через 2-3 минуты должен получить тепловую карту. Однако на практике сервис часто не отображает результат и предлагает заплатить, хотя заявлен бесплатный тариф.

Минусы — относиться серьезно к Heat-map с его непонятной системой расчета пользовательской активности и запросом на оплату после нескольких неудачных попыток оснований нет.

Подводим итоги

Тепловые карты полезны и владельцам сайтов, и маркетологам, и оптимизаторам, так как помогают сделать ресурс привлекательным для пользователей и весомым с точки зрения поисковых систем. Есть несколько ситуаций, в которых именно тепловые карты могут быть особенно полезными:

1. Разработка/доработка контент-стратегии. Определите лучший объем контента и перспективные темы.
2. Редизайн сайта. Сделайте более заметными ключевые конверсионные элементы.
3. А/В-тестирование. Узнайте, какая версия оформления сайта наиболее привлекательна для посетителей.
4. Улучшение пользовательского интерфейса. Сделайте сайт максимально удобным для пользователей. Отслеживайте, как изменения интерфейса меняют их поведение.
5. Сравнение поведения пользователей на десктопных и мобильных устройствах. Посмотрите, как воспринимаются одни и те же элементы сайта с ПК, планшета или смартфона.

Важно помнить, что тепловые карты наиболее эффективны в сочетании с другими инструментами аналитики.