Тепловые карты сайта: как читать и что менять

Из Директа на лендинг за месяц пришло 800 человек, заявок девять (цифры условные, но пропорция знакома многим). Стандартные отчёты Метрики показывают визиты, отказы, время на сайте. Что человек делал между приходом и уходом, из них не видно. Тепловая карта сайта закрывает именно этот разрыв: она показывает, куда посетители кликают, до какого экрана долистывают и какие блоки пролетают, даже не притормозив.

Инструмент при этом коварный. Красные пятна легко принять за инсайт, сделать выводы по 50 визитам и зря переверстать страницу. Половина «находок» на тепловых картах рассыпается после сегментации по устройствам или проверки в Вебвизоре. В статье разберём, какие карты бывают, где их включить в Яндекс Метрике, как читать данные без самообмана и как превращать наблюдения в правки, которые растят заявки, включая ситуацию, когда трафика мало, а это почти любой B2B.

Что такое тепловая карта и какие бывают

Тепловая карта: визуализация действий посетителей поверх скриншота страницы. Чем горячее цвет зоны, тем больше взаимодействий она собрала. Под общим названием живут четыре разных отчёта. Путать их дорого, потому что каждый отвечает на свой вопрос.

Карта кликов фиксирует все нажатия: по кнопкам, ссылкам, картинкам и по пустым местам. Главная ценность как раз в «пустых» кликах. Люди жмут туда, где ожидают действие, и карта честно показывает эти ожидания, даже если верстальщик их не предусмотрел.

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

Карта скроллинга отвечает на вопрос, до какой глубины страницы доходят посетители и на каких экранах задерживаются. Именно она решает вечный спор «длинный лендинг или короткий»: вместо мнений вы видите, на каком экране теряется половина аудитории.

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

Тип карты	Что показывает	Типовое решение по итогам
Карта кликов	Все нажатия, включая клики по некликабельным элементам	Сделать «ожидаемые» элементы рабочими или убрать у них вид ссылки
Карта ссылок	Долю переходов по каждой ссылке и пункту меню	Вынести востребованные разделы на видное место, вычистить балласт из меню
Карта скроллинга	Глубину прокрутки и внимание по экранам	Поднять ключевой блок выше точки обрыва, продублировать призыв к действию
Карта движения мыши	Траектории курсора, косвенные зоны интереса (только десктоп)	Использовать как подсказку и перепроверять записями сессий

Инструменты: что работает на рынке РФ

Центральный инструмент здесь Яндекс Метрика: бесплатно, без лимитов по трафику, карты и записи сессий в одном интерфейсе со всей остальной аналитикой. Google Analytics тепловых карт из коробки не строит, вдобавок его применимость в РФ ограничена, так что опорой для этой работы он служить не может.

Карты имеют смысл только поверх корректно работающего счётчика: цели на заявку и звонок, отсечённый спам-трафик, размеченные кампании. Если этого нет, начните с настройки Яндекс Метрики, иначе будете изучать поведение непонятно кого.

Карты в Яндекс Метрике

Раздел «Карты» в левом меню счётчика: карта кликов, карта ссылок, карта скроллинга. Карты кликов и ссылок собираются по умолчанию, ничего дополнительно включать не нужно. Выбирайте период, переключайте режимы отображения (тепловая, прозрачность, клики по элементам) и обязательно применяйте сегменты: устройство, источник трафика, новые или вернувшиеся посетители, достигшие цели и нет. Сегмент превращает красивую картинку в рабочие данные.

Вебвизор: где включить и что учесть

Вебвизор записывает действия конкретного посетителя: прокрутку, движение курсора, клики, заполнение полей формы. Включается в настройках счётчика: вкладка «Счётчик», галочка «Вебвизор, карта скроллинга, аналитика форм», после этого обновите код счётчика на сайте. Заодно с Вебвизором заработают карта скроллинга и аналитика форм, они висят на той же опции.

Два ограничения, о которых забывают. Записи хранятся 15 дней, скачать архив за полгода не получится, поэтому смотреть сессии нужно регулярно, а находки фиксировать в документе. При большом трафике записывается выборка визитов, хотя типовому B2B-сайту с десятками или сотнями визитов в день хватает с запасом.

Сила Вебвизора в фильтрах. Отберите сессии людей, которые открыли форму и не отправили. Пришли из конкретной кампании Директа и ушли за 20 секунд. Провели на странице три минуты и не кликнули никуда. Каждый такой срез отвечает на конкретный вопрос, случайный просмотр «каких-нибудь» записей времени почти не окупает.

Clarity, Hotjar и остальные

Microsoft Clarity: бесплатный сервис записей и тепловых карт, в России работает (проверяйте актуальность на момент чтения, доступ западных сервисов меняется). Из полезного: автоматическая подсветка «мёртвых кликов» и «яростных кликов», когда человек многократно жмёт нерабочий элемент. Hotjar с российского рынка ушёл, оплатить и полноценно использовать его из РФ проблематично, закладывать его в процесс не советуем. Платные сервисы вроде Plerdy дают более тонкую аналитику по элементам, но начинать разумно с бесплатной связки: Метрика как основа, Clarity как дополнение.

Как читать карты без самообмана

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

Сначала объём, потом выводы. Пять кликов в углу страницы это шум. Условный ориентир: хотя бы 1000-2000 просмотров на каждую версию страницы (десктоп и мобильная отдельно), прежде чем паттерны станут устойчивыми. Для страниц с малым трафиком копите данные неделями или переходите к записям сессий, об этом ниже.

Десктоп и мобильные раздельно, всегда. Палец вместо курсора, короткий экран, другой порядок блоков в видимой зоне. Смешанная карта усредняет два разных мира и врёт про оба. Условный пример: на десктопе форма стоит справа от оффера и видна сразу, на мобильном та же форма уезжает на четвёртый экран, и общая карта покажет по ней «средние» клики, скрыв, что мобильная аудитория до неё почти не доходит. В Метрике сегмент по устройствам ставится в два клика, нет ни одной причины его не ставить.

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

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

Проверяйте ложные паттерны. Горячее пятно не всегда интерес. Случайные тапы при прокрутке на мобильном подсвечивают середину экрана. Клики по тексту бывают выделением для копирования. Пятно на логотипе это возвраты на главную, что само по себе сигнал: человек не нашёл нужное здесь. Прежде чем строить гипотезу, откройте 10-15 записей Вебвизора по этой зоне и посмотрите, что там происходило на самом деле.

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

Пошаговая методика: от карты до проверенной правки

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

Шаг 1. Определите задачу страницы. У лендинга услуги это заявка, у статьи блога переход к услуге или подписка. Без ответа на вопрос «что здесь считается успехом» карту читать бессмысленно, любое пятно можно трактовать как угодно.

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

Шаг 3. Начните с карты скроллинга. Найдите точку обрыва: экран, где доля досмотревших резко падает. Сопоставьте её с содержимым: что стоит прямо перед обрывом и какой блок аудитория уже не увидит. Если до формы доходит 10% посетителей, а до блока с кейсами 25%, проблема архитектуры страницы, и решать её нужно на уровне структуры лендинга, точечные правки кнопки не помогут.

Шаг 4. Наложите карту кликов. Куда жмут на каждом экране. Конкурируют ли второстепенные кнопки с целевой. Есть ли мёртвые клики. Отдельно посмотрите карту ссылок по меню: какие разделы ищут чаще всего.

Шаг 5. Спуститесь в Вебвизор. По каждой подозрительной зоне отсмотрите 15-20 записей нужного сегмента. Карта говорит «что происходит часто», записи объясняют механику: человек трижды тапнул по картинке, подождал, ушёл. Или начал заполнять форму и бросил на поле «ИНН». Это уже материал для гипотезы.

Шаг 6. Сформулируйте гипотезу с ожидаемым эффектом. Формат простой: наблюдение, изменение, ожидаемый результат в измеримой метрике. «14% кликов первого экрана приходится на некликабельный телефон в шапке. Делаем телефон ссылкой tel. Ждём рост конверсии в звонок с мобильных». Плохая формулировка: «шапка не работает, надо переделать».

Шаг 7. Внедрите и проверьте. Дешёвые однозначные правки (телефон-ссылка, увеличение зоны тапа) внедряйте сразу и следите за метрикой до и после. Спорные и дорогие изменения раскатывайте через A/B-тест, иначе не отличите эффект правки от сезонного колебания или смены кампании в Директе. И меняйте по одной вещи за раз: пачка из пяти правок не скажет, какая из них сработала.

После проверки цикл повторяется. Карта снова находит зону, Вебвизор объясняет, гипотеза проверяется. Этот цикл и есть ядро оптимизации конверсии, тепловые карты в нём удешевляют самый дорогой этап: поиск места, где копать.

Если трафика мало: тепловые карты в B2B

У B2B-сайтов типовая беда: 30-60 визитов в день на ключевую страницу, и честной карты из этого не собрать за разумный срок. Ждать полгода нельзя, решения нужны сейчас. Что делать.

Сместите вес с карт на Вебвизор. Двадцать внимательно отсмотренных сессий целевого сегмента дают больше, чем размытое пятно из 300 визитов. Смотрите записи людей, дошедших до формы и не отправивших её, это самый концентрированный источник находок.

Подключите аналитику форм. Отчёт показывает, на каком поле посетители бросают заполнение и сколько времени тратят на каждое. В B2B-формах классические стопоры это поля «ИНН», «должность» и обязательный телефон при холодном интересе. Сократили форму до двух полей, остальное выясняет менеджер в первом звонке: типовое решение, которое регулярно даёт прирост.

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

И держите связь с воронкой. Тепловая карта объясняет только один переход: из визита в заявку. Сколько из этих заявок доходит до сделки и денег, видно в CRM и сквозной аналитике. Бывает, что правка растит число заявок, а качество падает: форма стала слишком лёгкой, посыпались нецелевые. Поэтому итог любой правки оценивайте минимум до квалифицированной заявки, лучше до сделки.

Типовые находки и что с ними делать

Несколько связок «увидели на карте, что делать», которые повторяются от проекта к проекту.

Клики по картинке без ссылки. Ждут увеличения или перехода. Добавьте зум, галерею или переход, либо уберите у картинки интерактивный вид (рамки, тени, курсор-палец).
Обрыв скролла до ключевого блока. До калькулятора, кейсов или формы доходят единицы. Поднимите блок выше точки обрыва или разберитесь, какой из верхних экранов гасит интерес: часто виноват длинный абстрактный блок «о компании» вторым экраном.
Баннерная слепота на главном оффере. Оффер оформлен яркой плашкой, и его пролистывают. Переверстайте под обычный контентный блок: заголовок, текст, кнопка.
Второстепенная кнопка горячее целевой. «Скачать прайс» собирает больше кликов, чем «Оставить заявку». Иногда это плохо и лишние пути стоит убрать. А иногда прайс и есть естественный первый шаг сделки, тогда стройте лидогенерацию через него: отдавайте файл за контакт.
Активные клики по пункту меню «Цены» или «Кейсы». Людям не хватает этого блока на самой странице. Добавьте его прямо на лендинг, не заставляйте искать.
На мобильном тапают мимо кнопок. По записям видно двойные и «промахивающиеся» тапы рядом с мелкими элементами. Увеличьте зону нажатия, разведите соседние ссылки по вертикали, проверьте, что телефон в шапке открывает звонилку по tel-ссылке.
До кнопки доскроллили, кликов мало. Видимость есть, убеждения нет. Это вопрос оффера, доверия рядом с кнопкой и объёма формы, карта здесь передаёт эстафету работе над текстом и предложением.

Ошибки при работе с тепловыми картами

Решение по одной общей карте. Без сегментации по устройствам и источникам карта показывает «среднюю температуру». Правило простое: ни одного вывода по несегментированной карте.

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

Выводы на 50 визитах. На малой выборке любое пятно случайность. Либо копите объём, либо честно переключайтесь на штучный разбор записей сессий.

Правки без проверки результата. Поменяли по интуиции, через месяц никто не помнит, что и зачем меняли. Ведите журнал изменений с датами, без него данные «до и после» не восстановить.

Игнор мобильной версии. На многих B2B-проектах больше половины первичных касаний происходит с телефона, а анализируют почему-то десктопную карту. Начинайте с того устройства, где больше трафика.

Частые вопросы

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

Сколько хранятся записи Вебвизора? 15 дней, потом запись удаляется. Поэтому разборы сессий ставьте в регулярный ритм, например раз в неделю, а находки сразу фиксируйте письменно.

Сколько нужно трафика, чтобы верить карте? Точной границы нет, всё зависит от разброса поведения. Рабочий ориентир (условный): от 1000-2000 просмотров на каждую версию страницы, десктоп и мобильную считайте отдельно. Меньше: смотрите записи сессий и аналитику форм, там полезный сигнал появляется уже на десятках визитов.

Hotjar и Clarity работают в России? Hotjar ушёл из РФ, рассчитывать на него не стоит. Microsoft Clarity на момент написания работает и бесплатен, его удобно держать вторым инструментом рядом с Метрикой. Доступность западных сервисов меняется, перед внедрением проверяйте.

Тепловые карты влияют на SEO? Напрямую нет, на позиции сами карты не действуют. Косвенно да: устраняя мёртвые клики и обрывы скролла, вы улучшаете поведенческие метрики (глубину, время, возвраты в поиск), а они учитываются в ранжировании, особенно в Яндексе. Так что работа с картами поддерживает SEO, хотя и не заменяет его.

Можно ли посмотреть тепловую карту чужого сайта? Нет, данные Метрики видит только владелец счётчика и те, кому он дал доступ. Существуют нейросетевые сервисы «предсказанного внимания», которые рисуют карту по скриншоту без данных о реальных посетителях. Для прикидки макета годятся, решения по ним принимать рискованно.

Чеклист: работа с тепловыми картами

В Метрике включён Вебвизор с картой скроллинга и аналитикой форм, цели настроены.
Данных достаточно, десктоп и мобильная версия анализируются отдельно.
Карта скроллинга: найдена точка обрыва и реальная «линия сгиба», ключевые блоки стоят выше неё.
Карта кликов: найдены мёртвые клики и конкуренты целевой кнопки.
Каждая подозрительная зона проверена по 15-20 записям Вебвизора.
Каждая находка оформлена как гипотеза: наблюдение, изменение, ожидаемая метрика.
Дешёвые правки внедрены и измерены, дорогие проверены тестом, изменения ведутся в журнале.
Эффект каждой правки оценивается по цепочке до заявки и сделки, рост кликов сам по себе успехом не считается.

Тепловые карты переводят споры о сайте с уровня «мне кажется» на уровень наблюдаемого поведения. Дальше всё решает дисциплина: сегменты, гипотезы, проверка. Если хотите разобрать поведение посетителей на вашем сайте и понять, какие правки дадут больше заявок при текущем трафике, расскажите о проекте команде Lead The Way, посмотрим данные вместе и предложим план.