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

// 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:

If your landing page shows 30% at 50% depth — that's a red flag.

Comparison of Tracking Methods

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

1. Develop event structure: determine thresholds and additional parameters (page section, device).
2. Integrate via GTM or custom script.
3. Collect data until at least 500 sessions (usually 2-3 days).
4. Build reports in GA4 / BigQuery to identify underperforming pages.
5. 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.

Setup Web Analytics: GA4, GTM, Yandex.Metrica, and Amplitude

We often see: conversion rate 1.2%, traffic grows, but conversion stays flat. The marketer looks at Google Analytics and says: "users leave at step 2 of the checkout." The developer opens the same step — no errors, Sentry is silent. So it's not a JS bug, but a UX issue or skewed data from analytics. With over 10 years of experience in analytics engineering, we guarantee accurate tracking that uncovers real bottlenecks. Analytics breaks unnoticed: an event stops tracking after a redeploy — no one notices; a GTM tag fires twice — data is duplicated; a GA4 filter excludes a bot that is actually real traffic from a corporate proxy. An audit of your current tags will find the cause within a week.

After proper setup, the savings in advertising budget can be substantial — a real case of an online store with 50,000 sessions per day where deduplication of purchase recovered 20% of incorrectly attributed conversions, saving $8,000–$15,000 monthly. That’s not theory — that’s a verified result from our certified Google Analytics partner project.

Why do GA4 events duplicate and how to fix it?

Universal Analytics is gone, replaced by GA4's event-based model. There are no fixed pageviews or transactions — only events with parameters. This is more flexible but requires proper event design. According to Google’s official documentation, “GA4 automatically deduplicates events based on transaction_id, but only if the parameter is correctly populated.” Many implementations miss this.

Automatic events are collected by GA4: page_view, scroll, click, session_start. Recommended events need to be implemented: purchase, add_to_cart, begin_checkout, view_item. Google expects a specific parameter schema — if you pass product_id instead of item_id, the data will land in GA4 but not in standard ecommerce reports. Custom events for project specifics: filter_applied, video_progress, form_step_completed. Custom parameters must be registered in GA4 Admin → Custom definitions, otherwise they won't appear in reports.

A common mistake is the purchase event being duplicated. Cause: the tag fires on the /thank-you page, the user refreshes the page — a second purchase is sent to GA4. Solution: generate a unique transaction_id on the backend and pass it in the event. In our experience, 80% of e-commerce stores have this issue. GA4 deduplicates based on it (in theory — verify with DebugView). Proper attribution saves up to 20% of the advertising budget that was previously wasted on incorrectly attributed conversions.

How to set up the data layer to avoid data loss?

GTM is a tool for managing tags without code deployment. But "no code" doesn't mean "no architecture." The data layer is the foundation. We pass data from the application to GTM via dataLayer.push(). Structure: event + contextual data. For e-commerce: before opening a product page — push with product data. GTM tag reads from the data layer, not from the DOM.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    items: [{
      item_id: 'SKU-12345',
      item_name: 'Product name',
      price: 1990.00,
      currency: 'USD'
    }]
  }
});

Bad practice: GTM tag parses the DOM — looks for the price in span.price, the name in h1. This breaks with any layout change. Good practice: always use the data layer. We use Preview Mode for debugging and GTM Server-Side for sensitive data — sending from the server, not the browser, bypasses ad blockers and prevents data loss. A properly implemented data layer reduces tracking errors by 95%.

How does Yandex.Metrica complement web analytics?

For a Russian audience, Metrica is a must — especially Webvisor. Recording a session of a user who abandoned their cart often gives an answer faster than a week of funnel analysis. Goals in Metrica: event-based (via ym(COUNTER_ID, 'reachGoal', 'GOAL_NAME')) or automatic (button click, page visit). Integration with CRM via Metrica Plus — passing offline conversions. Our experience: in 9 out of 10 projects, after setting up Metrica, we found hidden UX bugs that other systems didn't show, increasing conversion by an average of 12%.

What does product analytics give in Amplitude?

Amplitude is a product tool, unlike marketing-oriented GA4 and Metrica. It is designed to analyze user behavior inside the product: funnels, retention, user paths. Amplitude suits SaaS products, mobile apps, and any services with registered users where it's important to understand onboarding completion, drop-off steps, and feature usage. Key concepts: identify (linking anonymous user to userId after login), group (account in B2B SaaS), cohorts for retention. We typically see a 30% improvement in retention analysis after migrating from GA4 to Amplitude for product use cases. Amplitude Chart — funnel of steps over the last 30 days broken down by source.

Monitoring Data Quality

Analytics without monitoring is a black box. We set up:

• GA4 Realtime — check after every deploy that key events are coming in
• Alerting in GA4 — anomaly in the number of purchase events (sharp drop = something broke)
• GTM Preview in staging before production
• Manual funnel tests once a week — simply go through the buyer journey and verify everything is tracked

What the work includes

Process and timeline

1. Audit of existing tags and data (2 days)
2. Event schema design (2 days)
3. Data layer development and tag setup (3–5 days)
4. QA in Preview Mode and staging (2 days)
5. Deploy and dashboard setup (1 day)

Cost is calculated individually. Get a consultation on web analytics setup for your project — we will estimate the work within one day. Contact us to get started with a free audit of your current tracking.