Genius-bot · 8 минут чтения
Карта скроллинга показывает, до какого места посетители листают страницу и где задерживают взгляд. По ней за пять минут видно, что важный блок стоит слишком низко, а половина текста не читается вообще. Разбираем, как устроена карта скроллинга, чем она отличается от карты кликов, где её открыть в Яндекс Метрике и в WordPress и какие правки страницы она подсказывает.
Что такое карта скроллинга
Это наложение цвета на вашу страницу: каждый участок окрашен в зависимости от того, сколько посетителей его увидели и как долго на нём задержались. Тёплые цвета — внимания много, холодные — мало. Обычно картина одинаковая: первый экран горячий, дальше цвет постепенно остывает, а где-то посередине резко обрывается — там большинство уходит.
Отчёт отвечает на три практических вопроса:
какая доля посетителей добирается до кнопки, формы или цены;- на каких блоках люди задерживаются, а какие пролистывают;
- где проходит «точка ухода» — место, после которого страницу почти никто не смотрит.
Чем карта скроллинга отличается от тепловой карты кликов
Словом «тепловая карта сайта» называют несколько разных отчётов. Их легко перепутать, поэтому сведём в таблицу.
| Отчёт | Что показывает | Когда полезен |
|---|---|---|
| Карта скроллинга | Сколько посетителей увидели каждый участок страницы и сколько времени на нём провели | Длинные лендинги, статьи, карточки товаров |
| Карта кликов | Куда нажимают, включая некликабельные элементы | Проверка кнопок, меню, «ложных» ссылок |
| Карта ссылок | Какие ссылки на странице получают переходы | Навигация, перелинковка, меню |
| Вебвизор | Запись отдельных визитов | Разбор конкретных проблем: почему не отправляют форму |
Карта кликов отвечает на вопрос «что делают», карта скроллинга — «что видят». Если до кнопки доходит 20% посетителей, разбирать клики по ней бессмысленно: сначала нужно поднять её выше.
Как читать карту скроллинга
- Найдите линию резкого обрыва. Плавное остывание цвета — нормально. Резкий переход от тёплого к холодному означает, что здесь что-то отталкивает: длинный однотипный блок, «ложное дно» (визуально страница будто закончилась), тяжёлая картинка, которая долго грузится.
- Сравните с расположением целевых действий. Отметьте, где стоят кнопка, форма, цена, телефон. Если они в холодной зоне, большинство посетителей их не видит.
- Ищите островки тепла ниже первого экрана. Участок, на котором люди задерживаются дольше соседних, — это интересный для них контент. Его стоит поднять или продублировать выше.
- Смотрите отдельно по устройствам. На смартфоне страница в несколько раз длиннее, чем на ПК, и точка ухода там совсем другая.
- Набирайте достаточно данных. Карта по 30 визитам показывает случайность. Ориентируйтесь хотя бы на несколько сотен просмотров страницы.
Карта скроллинга в Яндекс Метрике
В Метрике отчёт есть, но по умолчанию он не собирается — его нужно включить в настройках счетчика.
Как включить
- Откройте счетчик и перейдите в «Настройки» → «Счетчик».
- Включите опцию «Вебвизор, карта скроллинга, аналитика форм».
- Сохраните изменения.
- Установите обновлённый код счетчика на все страницы сайта (если код вставлен плагином или через тему, обновите его там).
Как открыть и что настроить
Отчёт находится среди карт Метрики, рядом с картами кликов и ссылок. Вы указываете адрес страницы, и карта строится поверх неё. Есть два режима: «Тепловая карта», где время просмотра показано цветными зонами, и «Карта прозрачности», где малопросматриваемые участки затемнены. При наведении курсора на участок Метрика показывает среднее время его просмотра и количество просмотров.
Полезная возможность — карта по группе страниц. В адресе можно использовать * для любого количества символов (например, https://example.com/goods/* соберёт все товары раздела) или ~ для регулярного выражения. Данные усредняются по всем подходящим страницам.
Ограничения, о которых стоит знать
- Данные карты хранятся 15 дней, включая текущий день, — для редко посещаемых страниц этого может не хватить.
- Карта может отключиться, если её не просматривали 6 месяцев; тогда опцию нужно включить снова.
- Если сервер запрещает показ сайта во фрейме заголовком
X-Frame-Options, данные не отобразятся — нужно добавить исключение для доменов Метрики. - Сайт должен работать в кодировке UTF-8, а при включённом фильтре «Заменять https на http» карта может показывать «Нет данных».
Все детали — в справке Метрики о карте скроллинга.
Карта скроллинга в WordPress без внешних сервисов
Если не хочется включать запись поведения во внешнем сервисе или вы уже ограничиваете загрузку Метрики до согласия посетителя, карту можно смотреть прямо в админке. Бесплатный плагин статистики Visitrix строит карту скроллинга для каждой страницы сайта и позволяет отфильтровать её по типу устройства: ПК, смартфоны, планшеты. Данные хранятся в базе вашего сайта, а не у третьей стороны.
Порядок работы такой:
- Установите Visitrix из каталога WordPress.org и активируйте.
- Подождите, пока страница наберёт несколько сотен просмотров.
- Откройте карту скроллинга нужной страницы в разделе статистики.
- Переключите фильтр на смартфоны — обычно именно там самые большие потери.
Рядом в той же статистике видны источники трафика и цели (отправки форм, звонки, клики по мессенджерам), так что можно сопоставить: страница, которую перестали дочитывать, и стала ли она приносить меньше заявок. Сравнение разных счетчиков есть в статье о бесплатных счетчиках посещений.
Что исправлять по карте скроллинга: 7 типовых решений
- Кнопка в холодной зоне. Продублируйте призыв к действию на первом экране и после самого «тёплого» блока.
- Ложное дно. Широкая полоса другого цвета или большой отступ создают ощущение конца страницы. Уберите разрыв или добавьте визуальную подсказку, что ниже есть продолжение.
- Длинное вступление. Если люди уходят на третьем абзаце, сократите вводную часть и сразу дайте ответ на запрос.
- Тёплый блок внизу. Отзывы, цены или FAQ, на которых задерживаются, поднимите выше.
- Слишком длинная мобильная версия. Скройте на смартфонах второстепенные блоки, сверните длинные списки в аккордеоны.
- Тяжёлые картинки. Если обрыв совпадает с большим изображением или видео, проверьте, как быстро оно грузится на мобильном интернете.
- Форма в самом конце. Для коротких заявок форма или кнопка «Оставить заявку» должна быть видна без долгой прокрутки.
После каждой правки дайте странице набрать новую статистику и сравните карты «до» и «после». Меняйте по одному элементу за раз, иначе не поймёте, что сработало.
Пример разбора: лендинг услуги
Возьмём типичную страницу услуги: первый экран с заголовком и кнопкой, затем блок «Почему мы», цены, отзывы, вопросы и форма заявки в самом низу. Вот как обычно выглядит разбор по карте скроллинга:
- Первый экран горячий — это нормально, его видят все.
- Блок «Почему мы» заметно остывает. Шесть одинаковых иконок с общими словами люди пролистывают. Вывод: сократить до трёх конкретных пунктов с цифрами.
- На ценах снова тепло. Посетители останавливаются и читают. Вывод: поднять цены выше, сразу после первого экрана.
- После цен — обрыв. Большой отступ и фон другого цвета создают ложное дно. Вывод: убрать разрыв или поставить после цен кнопку «Оставить заявку».
- Форма внизу почти холодная, особенно на смартфонах. Вывод: продублировать кнопку, которая открывает форму, на первом экране и после цен.
Обратите внимание: ни один из этих выводов не требует редизайна. Карта скроллинга подсказывает перестановку блоков и сокращение текста — правки, которые делаются за час. После изменений сравните карту и число отправок формы за такой же период.
Карта скроллинга и согласие на cookie
Внешние инструменты записи поведения работают со скриптами и cookie на стороне сервиса. Если вы показываете cookie-баннер и загружаете аналитику только после согласия, карта будет строиться по части посетителей — тем, кто нажал «Принять». Это нормально, просто учитывайте, что выборка сдвинута. Настроить такую загрузку на WordPress помогает баннер согласия Cookietrix.
Частые вопросы
Карта скроллинга в Яндекс Метрике бесплатная?
Да, она входит в бесплатную Метрику. Нужно только включить опцию «Вебвизор, карта скроллинга, аналитика форм» и обновить код счетчика.
Почему в Метрике карта пустая?
Частые причины: опция включена недавно и данных ещё нет, код счетчика не обновлён, сайт запрещает показ во фрейме через X-Frame-Options или включён фильтр замены https на http.
Сколько данных нужно для выводов?
Ориентируйтесь на несколько сотен просмотров страницы на каждом типе устройств. На десятках визитов картина слишком случайна.
Чем тепловая карта сайта отличается от карты скроллинга?
«Тепловая карта» — общее название способа отображения. Тепловой может быть и карта кликов, и карта скроллинга. Первая показывает нажатия, вторая — внимание к участкам страницы.
Можно ли смотреть карту скроллинга отдельно для смартфонов?
Да. В Visitrix есть фильтр ПК, смартфоны и планшеты. Анализировать мобильную версию отдельно стоит всегда — там страница длиннее и точка ухода другая.
Как часто смотреть карту скроллинга?
Для ключевых страниц — раз в месяц и обязательно после каждой заметной правки: нового блока, смены первого экрана, переноса формы. В Метрике данные карты хранятся 15 дней, поэтому для сравнения «до» и «после» сделайте скриншот старой карты заранее, пока данные ещё доступны.
Вывод
Карта скроллинга — самый быстрый способ понять, что посетители на самом деле видят на странице. Включите её в Метрике или поставьте плагин статистики для WordPress, найдите точку обрыва, проверьте, не стоит ли ниже неё кнопка или форма, и исправляйте по одному блоку за раз. Часто самая полезная первая правка — поднять призыв к действию туда, где его действительно видят.
