Как собрать данные о скроллинге страниц бесплатно

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

Зачем вообще нужны данные о скроллинге?

• UX-оптимизация. Узнать‚ «проваливаются» ли пользователи до CTA-кнопок или баннеров.
• SEO. Поисковые системы учитывают pogo-sticking и время на странице; глубина просмотра напрямую влияет на ранжирование.
• Конверсия. Перенести форму захвата‚ отзывы или товары на «тёплую» зону‚ куда 90 % посетителей точно доскролливают.

Критерии выбора бесплатного инструмента

1. Простота установки. Достаточно вставить JS-файл или установить расширение.
2. Лимиты. Сколько страниц/сеансов можно записать бесплатно.
3. Экспорт данных. Возможность выгрузить CSV‚ XLSX или хотя бы скрин тепловой карты.
4. Кросс-доменность. Работает ли на поддоменах и мобильной версии.

Топ-5 бесплатных решений для сбора скроллинга

Яндекс Метрика — «Карта скроллинга»

Плюсы

• Полностью бесплатно без ограничения трафика.
• Данные в Webvisor появляются через 2-3 часа после записи.
• Автоматическая сегментация по девайсам‚ источникам и целям.

Минусы

• Нет экспорта «чистых» процентов скроллинга — только визуальная тепловая карта.
• Не работает на сайтах‚ где запрещён сторонний JS (строгий CSP).

Как включить

1. В кабинете Метрики откройте «Поведение → Карты скроллинга».
2. Выберите нужную страницу и период.
3. Наведите курсор — увидите точный процент до каждого пикселя.

Hotjar (беспланный тариф)

Hotjar даёт 35 сессий в день без оплаты. Этого хватает для лендингов или тестовых страниц.

Инструкция по установке

1. Регистрируемся на hotjar.com.
2. Добавляем JS-код перед закрывающим </head>.
3. Через 30 минут заходим в «Heatmaps → Scroll» и скачиваем скриншот.

Microsoft Clarity

Клон Hotjar от Microsoft. Главное преимущество — 0 лимитов по трафику и полностайлинговые записи сеансов.

• Автоматически генерирует «мертвые клики» и «быстрые прокрутки».
• Есть фильтр «Rage Clicks» — пользователи быстро кликают без результата.

Google Analytics 4 + Google Tag Manager (бесплатно)

GA4 не показывает тепловые карты‚ но можно собрать кастомные события «scroll_depth».

// GTM-триггер: Scroll Depth
gtag('event'‚ 'scroll'‚ {
 'event_category': 'engagement'‚
 'event_label': '90%'‚
 'value': 90
});

Затем строим отчёт «События → scroll» и смотрим‚ сколько % дошли до 25‚ 50‚ 75 и 90 %.

Yandex Webvisor → Скачать CSV через API

Если нужны «сырые» данные‚ а не картинка:

1. Включите Webvisor → «Экспорт данных».
2. Получите JSON с параметром scroll_depth для каждого визита.

Как выбрать под задачу

Чек-лист быстрого старта (5 минут)

1. Выберите инструмент из таблицы выше.
2. Копируем JS-код.
3. Вставляем перед </head> через CMS или GTM.
4. Ждём 30–60 минут.
5. Смотрим тепловую карту и отмечаем «холодные» зоны.
6. Переносим CTA‚ формы или ключевые блоки в «тёплые» 70–90 % высоты.

Частые ошибки и как их избежать

• Адблок. До 25 % пользователей режут сторонние трекеры. Используйте сразу 2-3 инструмента.
• Lazy-load изображений. Скролл-метрика «ломается»‚ если картинки подгружаются позже. Настройте loading="eager" на ключевых блоках.
• Мобильная версия. Проверяйте отдельно mobile heatmap — на смартфонах люди доходят до 60 % реже из-за большой высоты экрана.

Даже если вы «не программист и не готовы платить»‚ собирать данные о скроллинге можно за 5 минут с помощью Яндекс Метрики‚ Hotjar‚ Clarity или GA4.
Выберите один инструмент‚ установите код и уже завтра увидите‚ где теряете клиентов и как исправить это бесплатно.

P. S. Сегодня — всё описанное работает прямо сейчас. Сохраните статью‚ чтобы не потерять лимиты бесплатных тарифов.