Scroll heatmap analysis on website

Scroll Heatmap Analysis

Scroll heatmaps show how deep users scroll on a page. Critical for long landing pages and articles: if 70% don't scroll below the fold, content below it is invisible to most.

What Scroll Heatmaps Measure

• Average fold line — mean point where first screen ends (varies by device/resolution)
• Scroll depth % — percentage reaching specific depth
• Drop-off points — where users stop scrolling

Key Metrics

Typical landing page benchmarks:
- 100% see first screen (fold)
- 60–70% scroll to 25% of page
- 40–50% scroll to 50%
- 20–30% scroll to 75%
- 10–20% reach the end

If CTA is at 80% and only 15% get there — CTA is ineffective

Setting Up Scroll Depth Tracking

// 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 only fires at 90%
// Custom script needed for all thresholds

BigQuery Scroll Depth Analysis

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  -- pages with poor scroll first

Practical Insights

Sharp drop at 30%: usually something visually "final" — horizontal line, dark footer section, "show more" button. Users think page ended.

Plateau at 60–70%: content above more interesting than below. Move important CTA or offer higher.

Good long-form benchmarks: article should have pct_75 > 40%, otherwise not read to 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
    })
  }
})

Delivery Time

Setting up scroll tracking, collecting data (500+ visitors), per-page analysis and recommendations — 2–3 business days.