Аналіз теплових карт скролу на сайті
Ви запустили лендінг з довгою сторінкою, але конверсія низька. Користувачі не добираються до блоку «Замовити» нижче першого екрана. Scroll heatmap показує, що 70% відвідувачів йдуть після 30% сторінки. Це типова ситуація: контент є, але його не бачать. Ми допомагаємо це виправити — налаштовуємо точне відстеження, аналізуємо поведінку та даємо конкретні рекомендації з перекомпонування сторінок. Досвід роботи з проектами від 10 000 відвідувачів на день гарантує, що дані будуть інтерпретовані правильно. Наші інженери мають за плечима понад 5 років у веб-аналітиці та понад 50 успішних проектів з оптимізації конверсії.
Для точного вимірювання глибини прокрутки ми використовуємо кастомні події GA4 з порогами 25%, 50%, 75% та 100% — це дає детальну картину поведінки користувачів на відміну від вбудованої події, яка фіксує лише 90% глибини. Кастомні події втричі точніші за вбудований трекер для посторінкового аналізу та дозволяють знизити шум даних на 40%. Додатково ми інтегруємо дані з тепловими картами сервісів на зразок 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% — він практично невидимий.
Чому користувачі не скроллять?
Найчастіше причиною стають візуальні якорі: горизонтальні роздільники, темні блоки, величезні зображення, які виглядають фіналом сторінки. Довгі стіни тексту також відлякують. Scroll heatmap чітко показує ці точки — можна перемістити CTA вище або розбити контент на коротші секції. Наприклад, в одному з проектів ми перенесли кнопку «Купити» з 70% на 40% сторінки — конверсія зросла на 35%.
Як налаштувати відстеження в 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 робочих дні після отримання доступу до аналітики. Вартість аналізу від 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.