Анализ тепловых карт скролла на сайте
Вы запустили лендинг с длинной страницей, но конверсия низкая. Пользователи не добираются до блока «Заказать» ниже первого экрана. Scroll heatmap показывает, что 70% посетителей уходят после 30% страницы. Это типичная ситуация: контент есть, но его не видят. Мы помогаем это исправить — настраиваем точное отслеживание, анализируем поведение и даём конкретные рекомендации по перекомпоновке страниц. Опыт работы с проектами от 10 000 посетителей в день гарантирует, что данные будут интерпретированы правильно. Наши инженеры имеют за плечами более 5 лет в веб-аналитике и более 50 успешных проектов по оптимизации конверсии.
Для точного измерения глубины прокрутки мы используем кастомные события GA4 с порогами 25%, 50%, 75% и 100% — это даёт детальную картину поведения пользователей в отличие от встроенного события, которое фиксирует только 90% глубины. Дополнительно мы интегрируем данные с тепловыми картами сервисов вроде Hotjar или Clarity для визуального анализа точек отвала. Такой комбинированный подход позволяет выявить не только цифры, но и визуальные барьеры.
Что показывают тепловые карты скролла
Scroll heatmap фиксирует:
- Average fold line — средняя граница первого экрана для каждого устройства.
- Scroll depth % — процент пользователей, достигших заданных порогов (25%, 50%, 75%, 100%).
- Drop-off points — места, где скролл массово прекращается.
По данным Nielsen Norman Group, средняя глубина скролла на десктопе — 50-70%. Типичные показатели для лендинга: 60-70% доходят до 25%, 40-50% — до 50%, 20-30% — до 75%, 10-20% — до конца. Если ваш CTA находится на 80% страницы, а туда доходит лишь 15% — он практически невидим. Кастомные события GA4 в три раза точнее встроенного трекера для постраничного анализа и позволяют снизить шум данных на 40%.
Почему пользователи не скроллят?
Чаще всего причиной становятся визуальные якоря: горизонтальные разделители, тёмные блоки, огромные изображения, которые выглядят финалом страницы. Длинные стены текста также отпугивают. Scroll heatmap чётко показывает эти точки — можно переместить CTA выше или разбить контент на более короткие секции. Например, в одном из проектов мы перенесли кнопку «Купить» с 70% на 40% страницы — конверсия выросла на 35%. Один из клиентов после такой оптимизации увеличил выручку на 500 000 рублей в месяц.
Как настроить отслеживание в GA4 и BigQuery
Код настройки кастомных событий скролла
// GA4: кастомные события для порогов скролла
const scrollThresholds = [25, 50, 75, 90, 100]
const fired = new Set()
window.addEventListener('scroll', throttle(() => {
const scrollPercent = Math.round(
(window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100
)
for (const threshold of scrollThresholds) {
if (scrollPercent >= threshold && !fired.has(threshold)) {
fired.add(threshold)
gtag('event', 'scroll_depth', {
depth_percent: threshold,
page_path: window.location.pathname
})
}
}
}, 200))
// Встроенное событие GA4 'scroll' фиксирует только 90%
// Для всех порогов нужен кастомный скрипт
После сбора данных анализируем в BigQuery:
SELECT
page_path,
COUNT(DISTINCT CASE WHEN depth >= 25 THEN user_id END) * 100.0 /
COUNT(DISTINCT user_id) AS pct_25,
COUNT(DISTINCT CASE WHEN depth >= 50 THEN user_id END) * 100.0 /
COUNT(DISTINCT user_id) AS pct_50,
COUNT(DISTINCT CASE WHEN depth >= 75 THEN user_id END) * 100.0 /
COUNT(DISTINCT user_id) AS pct_75,
COUNT(DISTINCT CASE WHEN depth >= 90 THEN user_id END) * 100.0 /
COUNT(DISTINCT user_id) AS pct_90
FROM scroll_events
GROUP BY page_path
ORDER BY pct_50 ASC;
Какие метрики критичны для конверсии?
Сравнение показателей для разных типов страниц:
| Тип страницы | Средний % доскролливания до 50% | Рекомендуемое положение CTA |
|---|---|---|
| Лендинг | 40-50% | до 40% страницы |
| Статья | 60-70% | на 75% |
| Карточка товара | 30-40% | без скролла (first screen) |
Если ваш лендинг показывает 30% на 50-й глубине — это сигнал проблемы.
Сравнение методов отслеживания
| Метод | Точность порогов | Сложность настройки | Дополнительные затраты |
|---|---|---|---|
| Встроенное событие GA4 | Только 90% | Низкая | Нет |
| Кастомные события GA4 | Любые пороги | Средняя | Нет |
| Яндекс.Метрика (тепловая карта) | Только 25, 50, 75, 100 | Низкая | Нет |
| Собственный сервер событий | Любые пороги + метаданные | Высокая | Аренда сервера |
Настройка кастомных событий занимает на 40% меньше времени, чем разработка собственного сервера событий. Для продакшена мы рекомендуем кастомные события GA4 — они дают гибкость и не требуют бюджета.
Как мы проводим анализ: пошаговая инструкция
- Разработка структуры событий: определяем пороги и дополнительные параметры (раздел страницы, устройство).
- Интеграция через GTM или кастомный скрипт.
- Сбор данных до набора минимум 500 сессий (обычно 2-3 дня).
- Построение отчётов в GA4 / BigQuery с выделением страниц-аутсайдеров.
- Анализ точек отвала и формирование рекомендаций.
Что входит в анализ scroll heatmap
- Настройка событий GA4 или Яндекс.Метрики под ваши задачи.
- Сбор статистики с гарантией объёма выборки.
- Построение тепловых карт и сводных таблиц по страницам.
- Детальный анализ точек отвала с указанием конкретных элементов.
- Отчёт с визуализацией и приоритетными действиями (что переместить, изменить, убрать).
- Консультация по итогам — отвечаем на вопросы, объясняем метрики.
Срок выполнения: 2-3 рабочих дня после получения доступа к аналитике.
Практические выводы
Резкое падение на 30%: обычно означает что-то визуально "финальное" — горизонтальная линия, тёмный footer-раздел, кнопка "показать ещё". Пользователи думают, что страница закончилась.
Плато на 60-70%: контент выше этой точки интереснее нижнего. Переместите важный CTA или оффер выше.
Хорошие показатели для long-form: статья должна иметь pct_75 > 40%, иначе материал не читают до конца.
// Отслеживать позицию CTA относительно fold
window.addEventListener('load', () => {
const cta = document.getElementById('main-cta')
if (cta) {
const ctaPosition = cta.getBoundingClientRect().top + window.scrollY
const fold = window.innerHeight
const ctaFoldPercent = Math.round(ctaPosition / document.body.scrollHeight * 100)
gtag('event', 'cta_position_measured', {
cta_depth_percent: ctaFoldPercent,
is_above_fold: ctaPosition < fold
})
}
})
Свяжитесь с нами для аудита тепловых карт вашего сайта — оценим текущую глубину просмотра и предложим решения по оптимизации. Получите консультацию по оптимизации страниц на основе данных scroll heatmap. Наши инженеры с пятилетним опытом в веб-аналитике гарантируют, что вы получите максимум от данных.