Обычно в Метрике смотрят на цифры: сколько посетителей пришло на сайт, откуда именно, какой процент отказов и так далее. Но у неё есть и другие инструменты, например, тепловая карта. С её помощью бизнес может узнать, куда кликают пользователи, до какого места они листают страницу или где бросают заполнение формы. В статье расскажем о ней подробнее: от внешнего вида до анализа результатов.
Сервисы Callibri
Автоматизируем работу с лидами на всех этапах воронки
Помогаем понять, какая реклама приводит платящих клиентов
Делаем работу маркетинга прозрачной и эффективной
Как работают тепловые карты и зачем нужны
Они показывают, как люди взаимодействуют со страницей: чем популярнее зона, тем ярче она подсвечивается. Так проще понять, какие элементы привлекают внимание, а какие остаются незамеченными. Например, вы можете увидеть, что пользователи часто нажимают на фотографию товара, хотя она не кликабельна. Или что форма заявки стоит слишком низко, и многие до неё просто не доходят.
Всего есть пять режимов просмотра, но доступны они не везде. Например, в аналитике форм большинства из них нет.
- Тепловая карта — чем чаще пользователи кликают на определённую область, тем теплее её оттенок.
- Монохромная карта — в отличие от первой, имеет одну цветовую гамму: чем насыщеннее оттенок, тем чаще люди жали на эту точку. Удобно, когда нужно оценить плотность без визуального шума.
- Клики по ссылкам и кнопкам — здесь отображаются только нажатия по интерактивным элементам.
- Карта прозрачности — на страницу накладывается полупрозрачная маска, сквозь которую просвечиваются отдельные зоны. Чем они виднее, тем чаще пользователи с ними взаимодействуют.
- Карта элементов — показывает статистику по конкретным объектам страницы. Подходит, когда нужны точные цифры, а не визуальное пятно.
📌 Важно: тепловые карты показывают общую картину по всем посетителям. В этом их главное отличие от Вебвизора, который собирает статистику по конкретному пользователю.
Виды карт и их настройка: где смотреть, какие возможности есть
По умолчанию такие отчёты в Метрике выключены. Чтобы их активировать, зайдите в настройки счётчика и переведите ползунок «Вебвизор, карта скроллинга, аналитика форм» в положение «Вкл». Если счётчик установлен вручную через код, его нужно обновить на всех страницах. Если через тег-менеджер или плагин CMS — достаточно сохранить настройки.
Сразу после включения отчёты будут пустыми — Метрике нужно время, чтобы накопить данные. Чем выше посещаемость сайта, тем быстрее это произойдёт. Обычно хватает пары недель при стабильном трафике.
Когда данные накопятся, открывайте раздел «Поведение» в левом меню, там будет доступны четыре отчёта. Разберём каждый из них:
👉 Карта ссылок — по каким переходили пользователи и сколько раз. Поможет узнать, как люди перемещаются по сайту. Например, в меню пять разделов, но 80% трафика собирают только два из них. Значит, остальные или менее интересны, или хуже выделены.
👉 Карта кликов — все нажатия на странице: по кнопкам, ссылкам, изображениям, тексту и другим элементам. За этим важно следить, потому что люди часто кликают на статичные объекты. Например, на иконки или другие дизайнерские штуки.
👉 Карта скроллинга — до какого места долистывают пользователи и сколько в среднем тратят на просмотр каждой области. Допустим, вас беспокоит низкая конверсия кнопки. Может оказаться, что проблема не в дизайне, а в расположении: она находится слишком низко и до неё доходит лишь треть посетителей.
👉 Аналитика форм — сколько человек увидели форму, на каком шаге бросили её заполнение, много ли времени потратили на каждое поле, какие из них пропустили. Например, если люди зависают на шаге «Название компании», но оно не так важно для обработки заявки, его стоит убрать.
Для каждой карты можно выбрать конкретную страницу или группу, задать период и сегмент аудитории. Так как у людей разные запросы и интересы, маркетологи часто сравнивают новых и постоянных посетителей, пользователей из рекламы и органического поиска и так далее.
Как анализировать отчёты по тепловым картам
Карта кликов. В первую очередь обратите внимание на красные пятна в неожиданных местах. Например, если пользователи нажимают на изображение или иконку, в которых нет ссылок, — сделайте их кликабельными или измените оформление. И наоборот: если переходов по CTA очень мало, доработайте UX. Проверьте, не сливается ли кнопка с фоном, стоит ли она там, где её ожидает увидеть посетитель.
Чаще всего я встречаю такие паттерны:
Клики по картинкам, чтобы увеличить их размер. Это типично для карточек в интернет-магазинах: перед покупкой человеку важно хорошо изучить товар. То же самое бывает в блогах, справке и инструкциях, где изображения несут смысловую нагрузку, а не просто украшают страницу.
Если пользователь нажимает на картинку, а она не увеличивается, это вызывает раздражение и повышает риск ухода с сайта. В такой ситуации логично поставить задачу разработчикам: добавить возможность открыть изображение крупнее.
Клики по телефону или почте, чтобы позвонить или написать. Если заметите подобное поведение, попросите разработчиков внести изменения на сайте. Важно максимально сократить путь пользователя до покупки или заказа услуги — не заставляйте его копировать данные вручную.
Клики рядом с кнопкой. Этот симптом неудобного UX чаще встречается на мобильных устройствах: люди промахиваются из-за маленького размера кнопки или её неудобного расположения. В таком случае я советую увеличивать зону кликабельности и думать в сторону перемещении элемента.
Карта скроллинга. Она выглядит однотипно для всех страниц: верхняя часть красная, нижняя — синяя. Это нормально, так как начало просматривают все, но мало кто долистывает до конца. Важно другое: есть ли резкий переход от одного цвета к другому. Если да — где именно. Может, в этом месте стоит непонятный блок или другой визуальный барьер, который сбивает пользователя. Проанализируйте это.
Помимо «глубины» просмотра, карта показывает, сколько времени посетители проводят на каждом участке. Это помогает понять, какие блоки нужно усиливать: менять дизайн, текст или само предложение.
Пример из практики на B2B-проекте: мы увидели по карте скроллинга, что пользователи в среднем отваливаются на середине страницы, не доходя до блока с УТП и кнопки заявки. Выдвинул гипотезу, что проблема в слишком трудном для восприятия контенте — огромном блоке с характеристиками и неудобном расположении офера.
Мы переработали структуру страницы: вместо простыни текста сделали три блока с иконками, короткими подзаголовками-преимуществами и таблицами с характеристиками. Главный офер вынесли наверх и повторили внизу.
В первую неделю глубина просмотра увеличилась почти на 30%, а количество целевых действий — на 12%. Тепловая карта наглядно подтвердила: как только мы убрали визуальный барьер и упростили страницу, пользователи стали доходить до конца и активно оставлять заявки.
Аналитика форм. Если пользователи открывают форму и сразу уходят, возможно, она слишком сложная: много полей, нет пояснений, ответы на первые вопросы требуют больших усилий. Попробуйте начать с простого — имени и адреса электронной почты.
Если же люди застревают на конкретном поле, наверняка, оно непонятное или требует информации, которой нет под рукой. Добавьте подсказку, упростите формулировку или уберите блок вообще.
Тепловые карты желательно использовать не по отдельности, а в связке — так вы сможете формулировать более точные гипотезы и делать правильные выводы.
Например:
• Карта скроллинга + Карта кликов. Если видите низкую кликабельность кнопки, сначала откройте карту скроллинга. Часто проблема не в дизайне, а в том, что до кнопки просто физически не долистывают.
• Аналитика форм + Вебвизор. Сначала смотрим аналитику форм, чтобы узнать, с какого поля уходят пользователи. Затем идём в Вебвизор и детально проверяем, что вызывает затруднение.
• Любая тепловая карта + Сегментация аудитории. В каждой карте можно разделить пользователей на сегменты и проанализировать их поведение. Например, сравнить, как себя ведут владельцы десктопных и мобильных устройств.
Также при анализе важно учитывать ограничения отчётов:
- Карты кликов и ссылок хранят данные до года.
- Карта скроллинга доступна только за последние 15 дней. Если нужно сравнить поведение пользователей до и после изменений, результаты лучше сохранить заранее.
- Когда данных много, в отчёте будут учитываться не более 100 тыс. событий. Это не мешает увидеть общую картину, но для сайтов с высокой посещаемостью стоит учитывать этот нюанс.
Почему может не работать тепловая карта: частые проблемы
Отключён сбор данных. Если не активировать в счётчике опцию «Вебвизор, карта скроллинга, аналитика форм», система не будет собирать данные. Поэтому зайдите в Настройки → Счётчик, включите опцию и сохраните изменения. Если код установлен вручную, обновите его на всех страницах. Если через тег-менеджер или плагин CMS — достаточно сохранить настройки.
Счётчик установлен не везде. Убедитесь, что код Метрики есть на каждой странице, которую хотите анализировать. Часто забывают про лендинги, новые или проморазделы, добавленные уже после установки счётчика. Если при открытии карты нужной вам страницы видите ошибку «Не установлен код счётчика» — именно это и произошло.
Форма нестандартная. Важно, чтобы данные отправлялись через событие submit. Если форма собрана на конструкторе или кастомном решении с другим механизмом отправки, Метрика её не увидит. При этом отчёт будет просто пустым, без каких-либо ошибок. Это частая причина путаницы: кажется, что конверсий нет, хотя на самом деле счётчик просто не распознаёт форму. В таком случае нужна дополнительная настройка через JavaScript — это задача для разработчика.
Некорректные данные по всплывающим окнам. Иногда карта кликов плохо работает с динамическими элементами — попапами, слайдерами и выпадающими меню, реализованными через JavaScript. Клики по ним могут отображаться в неправильном месте или не отображаться вовсе. Если на вашем сайте много таких элементов, данные по ним лучше проверять через Вебвизор — он записывает реальную сессию пользователя и показывает взаимодействие точнее.
Карта отключилась. Если вы не заходите в карты больше шести месяцев, Метрика автоматически отключает сбор данных. Никакого уведомления при этом нет — они просто перестают накапливаться. Чтобы возобновить запись, зайдите в настройки счётчика и включите опцию заново.
Сайт не поддерживает кодировку UTF-8. Из-за этого могут быть проблемы со счётчиком Метрики. Посмотрите в настройках CMS или через исходный код страницы: в теге <meta charset=""> должно стоять UTF-8.
CRM-чат
Пишите клиентам в мессенджеры прямо из CRM
Не теряйте диалоги из WhatsApp, Telegram, Авито, ВКонтакте, Авто.ру и других каналов
Сделки создаются и обновляются автоматически
Главное: чем полезны тепловые карты Яндекса
Они показывают то, чего нет в стандартных отчётах: как пользователи взаимодействуют со страницей, где теряют интерес, что мешает заполнить форму, какие элементы привлекают и удерживают внимание.
Но сами по себе карты не дают готовых ответов — делать выводы и строить гипотезы должен специалист. Поэтому лучше использовать их вместе с другими инструментами: Вебвизором, отчётами по источникам трафика, конверсиям и целям. Такой подход поможет увидеть проблему и понять её причину.
Часто задаваемые вопросы о тепловых картах Метрики
Чем отличаются от Вебвизора?
Тепловые карты строятся на данных всех посещений и помогают увидеть закономерности в поведении разных людей. Вебвизор работает иначе: он записывает отдельные сессии и показывает путь конкретного пользователя. На практике эти инструменты лучше использовать вместе: карты помогают найти проблему, а Вебвизор — понять её причину.
Можно ли посмотреть тепловую карту для мобильной версии?
Да, для этого выберите в настройках конкретный сегмент — пользователи мобильных устройств. Такие отчёты полезны, потому что на смартфонах элементы страницы располагаются иначе, чем на компьютере. Из-за этого люди могут по-другому взаимодействовать с контентом, кнопками и формами.
Как часто обновляются данные тепловых карт?
По мере появления. Если на вашем сайте маленький трафик, запаситесь терпением — статистика будет собираться медленнее.
Почему я не вижу тепловую карту для конкретной страницы?
Причин может быть несколько:
- ещё не накопились данные,
- на страницу приходит слишком мало посетителей,
- там не установлен счётчик Метрики,
- не включена опция «Вебвизор, карта скроллинга, аналитика форм».
Можно ли выгрузить тепловую карту или поделиться ей с коллегами?
В виде отдельного файла нет, нужно делать скриншот экрана. Чтобы поделиться картой с другими людьми, раздайте им доступ для просмотра в настройках Метрики.
У Callibri есть телеграм-канал — присоединяйтесь, чтобы не пропустить свежие кейсы, материалы блога и обновления сервисов.
Нажимая «подписаться», вы соглашаетесь с правилами получения рекламных рассылок
Опубликуйте статью в блоге Callibri
Подойдут материалы про маркетинг, продажи и клиентский сервис