Аналіз теплових карт прокрутки
Теплові карти прокрутки показують, наскільки глибоко користувачі прокручують сторінку. Критично для довгих посадкових сторінок та статей: якщо 70% не прокручуються нижче fold, контент нижче невидимий для більшості.
Що вимірюють теплові карти прокрутки
- Average fold line — середня точка, де закінчується перший екран (відрізняється залежно від пристрою/дозволу)
- Scroll depth % — відсоток користувачів, які досягають конкретної глибини
- Drop-off points — місця, де користувачи перестають прокручувати
Ключові метрики
Типові орієнтири для посадкової сторінки:
- 100% бачать перший екран (fold)
- 60–70% прокручують на 25% сторінки
- 40–50% прокручують на 50%
- 20–30% прокручують на 75%
- 10–20% досягають кінця
Якщо CTA на 80% і туди доходить лише 15% — CTA неефективна
Налаштування відстеження глибини прокрутки
// GA4: користувацькі eventos для порогів прокрутки
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 або пропозицію вище.
Хороші показники для довгих текстів: стаття повинна мати 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 робочих дні.