Знать, сколько человек посетило страницу - недостаточно. Важно понимать, что они делали: куда кликали, как далеко листали, на что обращали внимание. Карта кликов и карта скроллинга в Яндекс Метрике дают визуальный ответ на эти вопросы прямо поверх страницы вашего сайта. Разберём, как ими пользоваться и какие выводы делать для оптимизации рекламы и конверсий.
Карта кликов: куда нажимают пользователи
Карта кликов показывает все клики пользователей на странице в виде тепловой карты. Горячие зоны (красные и оранжевые) - там, куда кликают чаще. Холодные зоны (синие и зелёные) - там, куда не кликают совсем.
Карта кликов доступна в Метрике через раздел «Карты» в левом меню, или прямо с сайта через Яндекс Браузер с расширением Метрики.
Что показывает карта кликов
- Клики по ссылкам и кнопкам - это ожидаемое поведение
- Клики по тексту - пользователи думали, что это ссылка
- Клики по изображениям - ожидали увеличение или переход
- Клики по декоративным элементам - путаница в интерфейсе
Карту кликов можно фильтровать по устройствам, источникам трафика и датам. Это критично - мобильная карта кликов кардинально отличается от десктопной.
Практическое применение
Пример 1. Лендинг юридической фирмы. Карта кликов показала: пользователи активно кликают по фотографии главного юриста - ожидают перехода на страницу о сотрудниках или биографию. Ссылки не было. После добавления ссылки - глубина просмотра выросла на 18%.
Пример 2. Интернет-магазин электроники. В карточке товара 40% кликов приходилось на второй и третий слайд галереи изображений. А кнопка «Купить» получала в 2 раза меньше кликов, чем предполагалось. Проблема: кнопка была слишком далеко от фотогалереи. После переноса кнопки ближе к галерее CTR кнопки вырос на 24%.
Пример 3. Анализ рекламного лендинга. Карта кликов по трафику из Директа показала: пользователи кликают по разделу «Почему мы», который находится в нижней части страницы. При этом форма заявки в верхней части получала мало кликов. Решение: перенесли ключевые аргументы «Почему мы» выше, рядом с формой. Конверсия выросла с 2,3% до 3,1%.
Карта скроллинга: как далеко листают страницу
Карта скроллинга показывает, какой процент пользователей прокрутил страницу до определённой точки. По сути это ответ на вопрос: что видит большинство ваших посетителей?
На карте скроллинга страница окрашена в цвета от красного (верх) до синего (низ). Чем холоднее цвет - тем меньше людей доскроллили до этой части.
Как читать карту скроллинга
Стандартные показатели: - Первый экран (без скролла): 100% пользователей - До середины страницы: 40-60% в зависимости от тематики - До нижней трети: 20-35% - До самого низа: 10-20%
Для длинных лендингов - это нормальная картина. Проблема возникает, когда ключевые элементы (форма заявки, цены, главное преимущество) расположены там, где до них доскролливают только 15-20% пользователей.
Практические выводы из карты скроллинга
«Линия смерти» - точка, ниже которой резко падает процент пользователей. Обычно это граница первого экрана, но иногда она неожиданно находится в середине страницы из-за блока, который выглядит как конец страницы (темный фон, footer-like элемент).
Где разместить форму заявки. Для лендинга рекомендуется размещать форму в зоне, где видят 60-70% посетителей. Если форма в самом низу страницы, которую видят 12% - вся работа по привлечению трафика работает только на 12% потенциальной аудитории.
Где заканчивается «коммерческая зона». Если страница длинная - определите точку, ниже которой скроллят только самые заинтересованные. Всё важное должно быть выше этой точки.
Сравнение мобильной и десктопной карты
Это сравнение часто открывает неожиданные различия.
На мобильном устройстве: - Пользователи скроллят дальше, чем на десктопе (скролл проще пальцем) - Но кликают по другим элементам (часто по номеру телефона) - Форма заявки с большим количеством полей конвертирует значительно хуже
На десктопе: - Пользователи скроллят осторожнее, ориентируются на визуальные блоки - Больше кликают по ссылкам в меню и навигации - Охотнее заполняют длинные формы
Вывод: отдельные версии страниц для мобильного и десктопа (или хотя бы адаптированные блоки) дают значительный прирост конверсии. Карта скроллинга помогает определить, где конкретно нужна адаптация.
Карта ссылок
Отдельный режим карты в Метрике - карта ссылок. В отличие от карты кликов, которая показывает любые клики, карта ссылок показывает только клики по ссылкам и их количество.
Практическое применение: - Определить, какие пункты навигации используются чаще всего - Понять, какие ссылки во внутреннем перелинковании работают - Выявить «мёртвые» ссылки, на которые никто не кликает, хотя они занимают место
Для интернет-магазина карта ссылок на главной странице показывает, в какие категории люди переходят из рекламного трафика. Если из Директа приходят пользователи, которые ищут «холодильники», но в карте ссылок активен раздел «стиральные машины» - значит, есть проблема с посадочными страницами или объявлениями.
Как использовать карты для оптимизации Директа
Карты - не только инструмент для UX-дизайнеров. Для специалиста по рекламе они дают несколько конкретных инсайтов:
1. Соответствие страницы намерению пользователя
Если пользователь из Директа кликает по запросу «купить диван», приходит на страницу каталога и 70% кликов приходится на фильтр «по цене по убыванию» - это говорит о том, что люди ориентированы на конкретную ценовую категорию. Уточните объявления, добавьте цены в тексты, проверьте соответствие посадочной страницы.
2. Выявление технических проблем
Карта кликов иногда показывает клики в «пустоте» - пользователи кликают, но никакого элемента там нет. Это может быть сломанный JavaScript, который убрал кнопку из DOM, или элемент, который отображается неправильно на каком-то разрешении экрана.
3. Приоритеты для A/B-тестирования
Перед тем как запускать A/B-тест варианта страницы, изучите карты. Они подскажут, что именно тестировать. Не нужно менять всё подряд - нужно исправить конкретное узкое место, которое видно на карте.
Аналитика форм как дополнение к картам
В Метрике есть отдельный инструмент - Аналитика форм. Он дополняет карту кликов, показывая поведение внутри форм:
- На каком поле пользователи чаще всего «застревают»
- Какие поля оставляют пустыми
- Сколько времени тратят на заполнение каждого поля
- С какого поля уходят без отправки
Типичный пример: поле «Как вас зовут?» заполняется быстро, но после поля «Название компании» 35% пользователей уходят. Это поле лишнее для первого контакта - уберите его и соберите на следующем шаге воронки.
Технические ограничения
Несколько важных нюансов:
- Карты работают только на страницах с установленным кодом Метрики
- Для страниц с динамическим контентом (AJAX, React) карта может некорректно отображать клики по элементам, которые появляются без перезагрузки
- Карты строятся по данным за выбранный период - для статистически значимых данных нужно минимум 500-1000 визитов на странице
- Карта скроллинга некорректно работает с бесконечной прокруткой (infinite scroll)
Заключение
Карта кликов и карта скроллинга - это визуальная диагностика, которая дополняет цифры в отчётах. Цифры говорят «конверсия 1,8%», карты объясняют «кнопка оформления заказа находится в зоне, которую видят только 22% посетителей, и пользователи не понимают, что по фото товара тоже можно кликнуть».
Практический ритм работы с картами: раз в месяц просматривать карту скроллинга ключевых посадочных страниц и карту кликов на страницах с низкой конверсией. Это занимает 20-30 минут, но регулярно приводит к конкретным улучшениям, которые напрямую снижают стоимость конверсии из рекламы.