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

// 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 робочих дні після отримання доступу до аналітики. Вартість аналізу від 5000 грн, середня економія бюджету на рекламі — 20%.

Практичні висновки

Різке падіння на 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. Наші інженери з п'ятирічним досвідом у веб-аналітиці гарантують, що ви отримаєте максимум від даних.

Компанія має 5+ років досвіду, 50+ успішних проектів, 10+ сертифікацій GA4.