Анализ тепловых карт скролла для оптимизации конверсии

// 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;

Какие метрики критичны для конверсии?

Сравнение показателей для разных типов страниц:

Если ваш лендинг показывает 30% на 50-й глубине — это сигнал проблемы.

Сравнение методов отслеживания

Настройка кастомных событий занимает на 40% меньше времени, чем разработка собственного сервера событий. Для продакшена мы рекомендуем кастомные события GA4 — они дают гибкость и не требуют бюджета.

Как мы проводим анализ: пошаговая инструкция

1. Разработка структуры событий: определяем пороги и дополнительные параметры (раздел страницы, устройство).
2. Интеграция через GTM или кастомный скрипт.
3. Сбор данных до набора минимум 500 сессий (обычно 2-3 дня).
4. Построение отчётов в GA4 / BigQuery с выделением страниц-аутсайдеров.
5. Анализ точек отвала и формирование рекомендаций.

Что входит в анализ 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. Наши инженеры с пятилетним опытом в веб-аналитике гарантируют, что вы получите максимум от данных.