Анализ тепловых карт скролла на сайте

Анализ тепловых карт скролла на сайте

Scroll Heatmap показывает, до какой глубины страницы доходят пользователи. Критически важно для длинных landing page и статей: если 70% пользователей не скроллят ниже первого экрана, весь контент ниже fold невидим для большинства.

Что измеряет scroll heatmap

• Average fold line — средняя точка, где заканчивается первый экран (различается для разных устройств и разрешений)
• Scroll depth % — процент пользователей, достигших конкретной глубины
• Drop-off points — места, где пользователи перестают скроллить

Ключевые метрики

Обычные показатели для landing page:
- 100% пользователей видят первый экран (fold)
- 60–70% скроллят до 25% страницы
- 40–50% скроллят до 50%
- 20–30% скроллят до 75%
- 10–20% скроллят до конца

Если CTA находится на 80% страницы, а туда доходит 15% — CTA неэффективен

Настройка отслеживания глубины скролла

// 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%: обычно означает что-то визуально "финальное" — горизонтальная линия, тёмный 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 tracking, сбор данных (500+ посетителей), анализ по страницам и рекомендации — 2–3 рабочих дня.