Scroll Heatmap Analysis for Conversion Optimization
You launched a landing page with a long page, but conversion is low. Users don't reach the "Order" block below the fold. The scroll heatmap shows that 70% of visitors leave after 30% of the page. This is a typical situation: content exists, but it's not seen. We help fix this — we set up precise tracking, analyze behavior, and give specific recommendations for page restructuring. Our experience with projects with 10,000+ daily visitors ensures the data is interpreted correctly. Our engineers have over 10 years in web analytics and more than 40 successful conversion optimization projects.
For accurate scroll depth measurement, we use custom GA4 events with thresholds at 25%, 50%, 75%, and 100% — this provides a detailed picture of user behavior compared to the built-in event that only captures 90% depth. Additionally, we integrate data with heatmaps from services like Hotjar or Clarity for visual analysis of drop-off points. This combined approach reveals both numbers and visual barriers.
What Scroll Heatmaps Show
Scroll heatmaps capture:
- Average fold line — the average first-screen boundary for each device.
- Scroll depth % — the percentage of users reaching given thresholds (25%, 50%, 75%, 100%).
- Drop-off points — places where scrolling massively stops.
According to Nielsen Norman Group, average scroll depth on desktop is 50-70%. Typical landing page metrics: 60-70% reach 25%, 40-50% reach 50%, 20-30% reach 75%, 10-20% reach the end. If your CTA is at 80% and only 15% reach it — it's practically invisible. Custom GA4 events are three times more accurate than the built-in tracker for page-level analysis and reduce data noise by 40%.
Why Users Don't Scroll
Common causes: visual anchors — horizontal dividers, dark blocks, huge images that look like the page end. Long text walls also deter scrolling. A scroll heatmap clearly shows these points — you can move the CTA higher or split content into shorter sections. For example, in one project we moved the "Buy" button from 70% to 40% of the page — conversion increased by 35%. One client after such optimization boosted monthly revenue by 500,000 rubles.
How to Set Up Tracking in GA4 and BigQuery
Custom scroll event setup code
// GA4: custom events for scroll thresholds 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)) // Built-in GA4 'scroll' event captures only 90% // For all thresholds, a custom script is needed After data collection, analyze in 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; Which Metrics Are Critical for Conversion?
Comparison for different page types:
| Page Type | Average % reaching 50% | Recommended CTA position |
|---|---|---|
| Landing page | 40-50% | before 40% of page |
| Article | 60-70% | at 75% |
| Product page | 30-40% | without scroll (first screen) |
If your landing page shows 30% at 50% depth — that's a red flag.
Comparison of Tracking Methods
| Method | Threshold accuracy | Setup complexity | Additional cost |
|---|---|---|---|
| Built-in GA4 event | Only 90% | Low | None |
| Custom GA4 events | Any thresholds | Medium | None |
| Yandex.Metrica (heatmap) | Only 25, 50, 75, 100 | Low | None |
| Custom event server | Any thresholds + metadata | High | Server rental |
Setting up custom events takes 40% less time than developing a custom event server. For production, we recommend custom GA4 events — they offer flexibility and require no budget.
How We Conduct the Analysis: Step-by-Step
- Develop event structure: determine thresholds and additional parameters (page section, device).
- Integrate via GTM or custom script.
- Collect data until at least 500 sessions (usually 2-3 days).
- Build reports in GA4 / BigQuery to identify underperforming pages.
- Analyze drop-off points and formulate recommendations.
What's Included in Scroll Heatmap Analysis
- Setup of GA4 or Yandex.Metrica events tailored to your tasks.
- Data collection with guaranteed sample size.
- Heatmap generation and summary tables by page.
- Detailed analysis of drop-off points with specific elements indicated.
- Report with visualizations and prioritized actions (what to move, change, remove).
- Post-analysis consultation — answer questions, explain metrics.
Timeline: 2-3 business days after receiving analytics access.
Practical Takeaways
Sharp drop at 30%: usually indicates something visually "final" — a horizontal line, dark footer section, "show more" button. Users think the page ends.
Plateau at 60-70%: the content above this point is more interesting than below. Move your key CTA or offer higher.
Good long-form metrics: an article should have pct_75 > 40%, otherwise the material isn't read to the end.
// Track CTA position relative to 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 }) } }) Contact us for a scroll heatmap audit of your website — we'll assess current viewing depth and propose optimization solutions. Get a consultation on page optimization based on scroll heatmap data. Our engineers with 10+ years in web analytics guarantee you'll get the most from your data.