Карта кликов и карта скроллинга в Яндекс Метрике: как включить, смотреть и читать

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

Какие карты есть в Метрике

Инструмент	Что показывает	Данные	Для чего
Карта кликов	Клики по любым элементам: кнопкам, картинкам, тексту, пустым местам	За год или меньший период	Найти «ложные кнопки» и проверить, замечают ли главное действие
Карта ссылок	Переходы по ссылкам: число и долю от всех переходов со страницы	За выбранный период	Понять, какие ссылки и пункты меню уводят посетителей
Карта скроллинга	Число просмотров и среднее время просмотра каждого участка страницы	15 дней, включая текущий	Найти, где теряют внимание, и решить, куда поднять оффер и форму
Аналитика форм	Просмотры страницы с формой, взаимодействия, отправки, время на каждом поле	15 дней, включая текущий	Найти поле, на котором бросают заявку

Карты отвечают на вопрос «где», но не «почему». Причину ищут в записях отдельных визитов: как работать с ними, разобрано в статье про Вебвизор в Яндекс Метрике.

Как включить карты

Если счётчика ещё нет, сначала установите Яндекс Метрику на сайт. Для работающего счётчика:

1. Откройте счётчик в Метрике и перейдите в «Настройки» → «Счётчик».
2. Включите опцию «Вебвизор, карта скроллинга, аналитика форм». Несмотря на название, она подключает и карту кликов, и карту ссылок.
3. Сохраните изменения.
4. Скопируйте обновлённый код счётчика и замените им старый на всех страницах сайта.

Если код ставили через плагин CMS, конструктор или тег-менеджер, после сохранения настроек откройте исходный код страницы и проверьте, что там новая версия. В коде инициализации должны остаться параметры clickmap: true (сбор данных для карты кликов) и webvisor: true. Если программист вырезал их, карты собираться не будут.

Данные копятся с момента установки обновлённого кода, задним числом карта не строится. Для выводов на небольшом сайте нужно 1–2 недели стабильного трафика, но помните про 15-дневное окно у карты скроллинга и аналитики форм.

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

Где смотреть карты и как настроить отчёт

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

Что настраивается в каждом отчёте:

• Адрес страницы. Введите URL в поле над картой. Для группы страниц используйте символы * и ~.
• Период. Для карты кликов — до года, для карты скроллинга и аналитики форм — последние 15 дней.
• Сегмент. Те же условия, что в обычных отчётах: источник трафика, рекламная кампания, UTM-метка, устройство, регион, достижение цели. Как собирать и сохранять сегменты, описано в статье сегменты в Яндекс Метрике.
• Режим отображения. Переключает вид карты, о режимах — ниже.

Адрес страницы, период, сегмент и режим задаются над картой

Скриншоты — из официальной справки Яндекс Метрики: «Карта кликов».

Что ввести в поле адреса	Что получится
https://example.com/catalog/sofa-1	Карта одной страницы
https://example.com/catalog/*	Сводная карта всех страниц, которые начинаются с этого адреса, включая сам /catalog/
~https://example.com/catalog/sofa-.*	Сводная карта страниц, подходящих под регулярное выражение

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

При построении карты Метрика отбрасывает из адреса www, рекламные метки и всё после #, но учитывает обычные GET-параметры. Страницы ?id=1 и ?id=2 получат разные карты. Если каталог фильтруется параметрами, используйте *, чтобы собрать их вместе.

Карта кликов: режимы и как её читать

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

Режим	Как выглядит	Когда удобен
Тепловая карта	Тёплые цвета — частые клики, холодные — редкие	Первый обзор страницы
Монохромная карта	Плотность одного цвета показывает частоту кликов	Плотные скопления кликов на пёстром дизайне
Клики по ссылкам и кнопкам	Скрыты клики по элементам, которые не являются ссылками или кнопками	Оценить только рабочие элементы
Карта прозрачности	Страница под «туманом», самые кликабельные места проступают сквозь него	Быстро найти самые кликабельные места
Карта элементов	Подсвечены элементы страницы целиком	Сравнить кликабельность блоков между собой

Что искать на карте кликов

Что видно	Вероятная причина	Что проверить или изменить
Пятно кликов на картинке, иконке или заголовке без ссылки	Элемент выглядит кликабельным	Сделать его ссылкой или убрать визуальный намёк: подчёркивание, тень, стрелку
Главная кнопка почти без кликов, рядом рассеянные клики	Кнопку не замечают или действие ищут в другом месте	Контраст, размер, текст кнопки, её положение относительно оффера
Много кликов по логотипу, меню, ссылкам в подвале на посадочной странице	Посетитель не находит ответ и уходит искать его по сайту	Нет ли на странице цены, сроков, условий доставки
Клики по тексту без ссылки	Посетители выделяют текст, чтобы скопировать	Что копируют: телефон, адрес, артикул — может, стоит сделать кнопку «Скопировать» или ссылку tel:
На смартфонах клики мимо кнопок	Мелкие зоны нажатия или элементы перекрывают друг друга	Размер кнопок, отступы, всплывающие окна и виджеты чатов

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

Карта ссылок

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

По ней удобно:

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

Ссылки, которые ведут на редирект, в том числе внутренний, на карте не подсвечиваются. Чтобы видеть ссылки на внешние сайты через редирект, в коде инициализации нужен параметр trackLinks: true — в стандартном коде он есть. Сайт также должен корректно обрабатывать GET-параметры в адресе.

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

Карта скроллинга: как читать

Карта скроллинга показывает, как распределяется внимание по высоте страницы. При наведении курсора на участок видно, сколько раз его просмотрели и сколько времени в среднем на нём провели. Просмотром считается загрузка страницы, её перезагрузка, обновление AJAX-сайта и отправка данных методом hit.

Режимы два:

• Тепловая карта — время просмотра выделено зонами разного цвета;
• Карта прозрачности — участки, которые смотрели меньше, затемнены, а которые дольше — прозрачнее.

Показатели «Минимум» и «Максимум» задают границы шкалы: минимальное и максимальное время просмотра участка относительно всех просмотров страницы.

Что искать:

• Первый экран. Его видят почти все, поэтому здесь должны быть оффер и путь к целевому действию. Если ключевой аргумент или форма лежат ниже, проверьте, сколько посетителей до них доходит.
• Резкий обрыв. Плавное снижение к низу страницы — норма. Резкий переход сразу под каким-то блоком говорит, что блок не удержал внимание или выглядит как конец страницы: широкий баннер, «подвал» посреди лендинга, большое пустое поле.
• Зоны, где задерживаются. Долгое время на участке означает либо интерес, либо затруднение: длинную таблицу цен читают, непонятную схему разглядывают. Сверьте зону с картой кликов и записями Вебвизора.
• Важные блоки ниже точки обрыва. Отзывы, гарантии, кейсы, которые видит малая доля посетителей, — кандидаты на перенос выше.

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

Аналитика форм

Аналитика форм нужна страницам с формами заявки, заказа, обратной связи, поиска. Отчёт состоит из двух частей.

Конверсия формы — воронка из трёх шагов:

• просмотры страницы с формой;
• взаимодействия с формой;
• отправки формы.

Поля формы — данные по каждому полю: время взаимодействия, незаполненные поля и поля, после которых посетитель ушёл со страницы, не отправив данные. Такие поля и вызвали затруднение.

Если на странице несколько форм, переключайтесь между ними в списке в правом верхнем меню отчёта. Форму поиска, которая мешает анализу заявок, можно исключить: присвойте ей CSS-класс ym-disable-submit, и её отправки не попадут ни в аналитику форм, ни в Вебвизор.

Как читать аналитику форм

Что видно	Что это значит	Что сделать
Много просмотров, мало взаимодействий	Форму не замечают или не готовы начать	Поднять форму выше, добавить призыв и объяснить, что будет после отправки
Много взаимодействий, мало отправок	Мешает одно из полей или ошибка валидации	Найти в «Полях формы» поле с уходами
Долгое время на одном поле	Непонятен формат или посетитель ищет данные	Подсказка, маска ввода для телефона, пример заполнения
Уход после необязательного на вид поля	Лишний вопрос на первом шаге	Убрать поле или перенести его на этап после звонка

Условный пример: на форме записи в клинику 500 просмотров страницы, 120 взаимодействий и 30 отправок. В «Полях формы» видно, что большинство уходов приходится на поле «Номер полиса». Гипотеза — убрать поле из формы и уточнять полис по телефону, затем сравнить долю отправок за следующие две недели.

Требования к формам

Данные собираются корректно, если:

• сайт работает в кодировке UTF-8;
• содержимое формы отправляется через событие submit;
• поля не скрыты через display: none в атрибуте style.

Формы, которые отправляются другими JavaScript-событиями, в отчёт не попадают — частая история с конструкторами и самописными виджетами. Для учёта таких заявок настройте цель на JavaScript-событие, как описано в статье про цели в Яндекс Метрике.

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

Как анализировать страницу по картам

Пример для посадочной страницы рекламной кампании:

1. Сформулируйте вопрос. Например: «почему с лендинга по кампании "Кухни на заказ" мало заявок при нормальном CTR».
2. Отберите трафик. Сегмент по рекламной системе и кампании или по UTM-метке, отдельно смартфоны и компьютеры. Чтобы различать кампании и объявления, разметьте ссылки в генераторе UTM-меток для Директа.
3. Карта скроллинга. Доходят ли посетители до цен, кейсов и формы.
4. Карта кликов. Нажимают ли на главную кнопку и нет ли «ложных кнопок» в первом экране.
5. Аналитика форм. Начинают ли заполнять форму и на каком поле уходят.
6. Вебвизор. Посмотрите 15–20 визитов из того же сегмента, в которых проблема проявилась.
7. Изменение и проверка. Внесите одно изменение, выждите 1–2 недели и сравните карты и конверсию до и после.

Конверсию до и после изменения считают по целям.

Для страницы с несколькими сотнями визитов в месяц карты почти бесполезны: на паре десятков визитов пятна показывают случайность. Копите данные дольше (для карты кликов — до года) или анализируйте группу страниц одного шаблона.

Ограничения карт

Ограничение	Как работает
Кодировка	Карты строятся только для страниц в UTF-8
Счётчик	Только на страницах, где стоит код Метрики. Страницы без кода в карты не попадают
Объём данных	Действует общее семплирование отчётов, а в отчёт карты кликов и ссылок попадает не больше 100 000 событий. На популярных страницах сократите период, чтобы карта строилась по свежим данным
Длина страницы	В Chrome и Firefox карта отображается на страницах не выше и не шире 32 767 пикселей
SPA-сайты	Карта кликов и карта ссылок работают. Карта скроллинга и аналитика форм на одностраничных приложениях не поддерживаются
Несколько сайтов	В отчёте по группе счётчиков карт нет, их смотрят в каждом счётчике отдельно
Автоматический счётчик магазина на Маркете	Карт и аналитики форм нет
Редизайн	Клики, собранные на старой вёрстке, могут лечь на новую некорректно. Сравнивайте периоды до и после изменений отдельно
Браузеры	Internet Explorer 8 и ниже не поддерживается

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

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

Симптом	Причина	Что сделать
«Нет данных»	Опция в настройках выключена или на сайте старый код	Включите опцию и замените код на всех страницах
«Нет данных» на HTTPS-сайте	В настройках счётчика на вкладке «Фильтры» включено «Заменять https на http»	Отключите эту операцию
Нет данных по конкретной странице	Неверный адрес, лишний параметр или у страницы нет визитов за период	Проверьте адрес, используйте *, расширьте период
Ваших тестовых кликов нет	Включён фильтр «Не учитывать мои визиты»	Тестируйте в браузере, где вы не вошли в Метрику
Карта бесконечно загружается в Safari	Опция «Мешать перекрёстному отслеживанию»	Отключите её в настройках конфиденциальности Safari и перезапустите браузер
Вместо страницы ошибка или пустой фрейм	Сервер запрещает показ сайта во фрейме заголовком X-Frame-Options	Добавьте исключения для своего домена, metrika.yandex.ru, metrika.yandex.by, metrica.yandex.com, metrica.yandex.com.tr и webvisor.com с поддоменами
Ссылка не подсвечена на карте ссылок	Ссылка ведёт на редирект	Проверьте trackLinks: true в коде или поставьте прямую ссылку
Аналитика форм пустая	Форма отправляется не через submit, поля скрыты через display: none или форма вне экрана	Настройте цель на JavaScript-событие
Данные перестали собираться	Метрика отключила карту после 6 месяцев без просмотров	Включите опцию снова

Эту операцию на вкладке «Фильтры» нужно отключить, если карта пишет «Нет данных»

Если сомневаетесь, что счётчик вообще работает на странице, начните с проверки установки: порядок описан в статье как проверить, работает ли Яндекс Метрика.

Клики по кнопке как цель и «кнопка Метрики» на сайте

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

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

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

Карта кликов платная?

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

Учитываются ли нажатия на смартфонах?

Да, касания экрана учитываются как клики. Чтобы смотреть мобильное поведение отдельно, примените сегмент по типу устройства: на общей карте клики со смартфонов и компьютеров смешиваются.

Можно ли посмотреть карту кликов за прошлый год?

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

Можно ли посмотреть карту кликов только по рекламе из Директа?

Да. Добавьте сегмент по источнику трафика: рекламная система, кампания или UTM-метка. Для детального разбора по объявлениям в ссылках должны быть метки, например utm_campaign и utm_content.

Чем карта кликов отличается от Вебвизора?

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

Почему цифры в аналитике форм не совпадают с целью «Отправка формы»?

Аналитика форм строится на выборке записей Вебвизора и учитывает только визиты с взаимодействием с формой, а цель считает все срабатывания по всем визитам. Для учёта заявок используйте цели, для поиска проблемного поля — аналитику форм.

Как сравнить карту до и после изменений на странице?

Постройте карту за период до изменения и за такой же по длине период после. Для карты скроллинга и аналитики форм это возможно только в пределах 15 дней, поэтому показатели «до» сохраняйте заранее.

Видно ли на карте, кто именно кликал?

Нет. Карта показывает агрегированные клики без привязки к посетителю. Информацию о конкретном визите — источник, устройство, регион, достигнутые цели — смотрят в Вебвизоре и отчёте «Посетители».