Loading tutorials…
Loading tutorials…
Scroll tracking is one of the highest-ROI tags you can ship — it's how you tell whether visitors actually engage with long-form pages or bounce before the hero animation finishes. Setup is short. The discipline is picking thresholds that mean something.
Who this is forSite owners with long-form pages (blog posts, landing pages, services pages) who want to measure engagement beyond pageview. Especially useful for SEO content strategy and landing page CRO.
What you'll need
Step 1
GTM has built-in variables for scroll percentage and direction. Enable them so triggers and tags can reference scroll values.
GTM → Variables → Configure (in the Built-in Variables section).
Toggle ON: Scroll Depth Threshold, Scroll Depth Units, Scroll Direction.
These variables get populated automatically when the Scroll Depth trigger fires.
Save.
Step 2
Triggers → New → Scroll Depth. Set vertical thresholds at 25%, 50%, 75%, 90% (standard engagement milestones).
Triggers → New → Trigger Configuration → Choose Trigger Type → Scroll Depth.
Enable 'Vertical Scroll Depths.' Units: Percentages. Thresholds: 25,50,75,90 (comma-separated, no spaces).
Why these numbers: 25% = past the hero, 50% = mid-content, 75% = past most of the body, 90% = read to end. Skip 100% — viewport math makes it unreliable on long pages.
Trigger fires on: 'Some Pages' if you only want long-form pages tracked. Use Page Path matches RegEx '^/blog/|^/services/' (or your URL patterns).
Or 'All Pages' if you're okay with scroll events on short pages too (more noise, full coverage).
Trigger name: "Scroll Depth — Content Pages." Save.
Step 3
One GA4 Event tag with scroll_threshold as a parameter — not four separate tags for each threshold.
Tags → New → Tag Configuration → Google Analytics: GA4 Event.
Measurement ID: G-XXXXX.
Event Name: 'scroll' (GA4 has a recommended event with this exact name).
Event Parameters: 'scroll_threshold' → {{Scroll Depth Threshold}}, 'page_path' → {{Page Path}}.
Trigger: the Scroll Depth trigger from step 2.
Tag name: "GA4 — Scroll Depth." Save.
DO NOT create four tags for each threshold — one tag with the parameter pulling Scroll Depth Threshold gives you the same data with cleaner reports.
Step 4
If you keep Enhanced Measurement Scrolls ON AND fire your own GTM scroll event, you'll have two 'scroll' events. Disable one.
If your GTM scroll event name is 'scroll' (same as GA4's built-in), the events will mix in reports.
Option A: disable GA4 Enhanced Measurement Scrolls (GA4 → Admin → Data Streams → Web → Enhanced Measurement → Scrolls toggle OFF). Your GTM tag is now the only source.
Option B: rename your GTM event to 'scroll_custom' or 'scroll_depth' so they don't collide.
Most operators pick Option A: GTM gives you finer control over thresholds and conditions.
Step 5
Click Preview, navigate to a long-form page, scroll slowly through each threshold, and verify the tag fires at each.
GTM → Preview → Tag Assistant opens.
Open a long blog post or landing page in the connected tab.
Scroll slowly. Watch the Tags column.
GA4 — Scroll Depth should fire at 25%, 50%, 75%, and 90% as you scroll past each.
In Variables, the Scroll Depth Threshold variable should reflect the current threshold (25, 50, 75, 90).
In GA4 → Configure → DebugView, the 'scroll' event should appear with scroll_threshold parameter values matching what you saw in Tag Assistant.
Step 6
Publish. Then in GA4, create an Exploration that segments scroll events by page and threshold to see which pages get engagement vs. which lose readers.
GTM → Submit → Version: 'v5 — Scroll depth tracking.' Publish.
GA4 → Explore → New Exploration.
Add dimensions: Page path, Event name. Add metric: Event count. Filter Event name = 'scroll.'
Add the scroll_threshold parameter as a custom dimension (Admin → Custom definitions → Create custom dimension → User-scoped → scroll_threshold).
Run the Exploration. You'll see, per page, how many users hit 25 / 50 / 75 / 90% scroll. The ratio of 90% to 25% is your 'read-through rate' — high signals strong content, low signals bounce risk after hero.
Use this monthly to prioritize which content needs CRO work.
Common mistakes
Creating 4 separate tags for 4 thresholds
What goes wrong: GTM container bloat. Every change has to be made in 4 places. Reports show 4 different event names ("scroll_25", "scroll_50", etc.) that can't be compared easily.
How to avoid: ONE tag with Event Name = "scroll" and scroll_threshold as a parameter pulling from {{Scroll Depth Threshold}}. The variable supplies the per-fire value.
Tracking scroll on every page
What goes wrong: GA4 event quota fills with scroll events from utility pages (login, checkout, thank-you) where scroll depth is meaningless. Reports drown in noise.
How to avoid: Limit the trigger to content pages: Page Path RegEx ^/blog/|^/services/|^/landing/. Skip transactional and utility pages.
Double-firing with GA4 Enhanced Measurement
What goes wrong: Both Enhanced Measurement Scrolls and your GTM tag fire 'scroll' events. Reports show 2x the scroll volume. Engagement metrics inflate.
How to avoid: Disable Enhanced Measurement Scrolls when you ship a GTM scroll tag — or rename the GTM event to avoid collision.
Including 100% threshold
What goes wrong: On long pages, viewport math means 100% scroll rarely fires reliably. Reports show 0% read-through rate, but it's a measurement artifact, not user behavior.
How to avoid: Use 90% as the highest threshold. It approximates "read to end" without the viewport-math issues at 100%.
Tracking scroll without acting on it
What goes wrong: You install scroll tracking, look at the numbers once, and never touch them again. The data is collected but provides no value. Effort wasted.
How to avoid: Add a monthly review: which pages have low read-through (90% / 25% ratio under 30%)? Those are CRO candidates — hero too long, value prop unclear, or content quality issue.
Recap
Done — what's next
How to fire GA4 through Google Tag Manager — without double-counting
Read the next tutorial
Hand it off
Installing scroll tracking is the easy part. Building the dashboard that ties scroll to conversion rate and prioritizes CRO work is where the value is. A GTM specialist will set up scroll + engagement events + the GA4 Exploration in one pass. Typically $200-400 one-time at $14-16/hr.
See specialist rates
Enhanced Measurement fires a single scroll event at 90% only. If you only need that one signal, it's enough. If you want to know how many users hit 25%, 50%, 75% (i.e., the funnel of engagement, not just the final read), you need GTM with custom thresholds.
Rarely useful. Unless you have a long horizontal carousel or sideways-scrolling layout (uncommon), vertical thresholds capture engagement. Skip horizontal unless your design specifically uses it.
Check that scroll_threshold is registered as a custom dimension in GA4 (Admin → Custom definitions). Without registration, GA4 receives the parameter but won't expose it in reports. Also confirm DebugView shows the parameter — if it does, the issue is dimension setup.
Only if the homepage is long-form. For typical landing-style homepages (hero + features + CTA), scroll signals aren't very meaningful — most users scroll once and leave. Better to track click-to-CTA events on those pages.
Minimally. The Scroll Depth trigger is debounced and only fires on threshold cross. Adds ~5-15ms to JS execution per page. Vastly less than the value of the engagement signal you capture.
Google Tag Manager
Firing GA4 through GTM is the foundation of every modern analytics stack. Done right, it's one tag and a clean event map. Done wrong, you double-count every event and pollute six months of reports. This is the right way.
Google Tag Manager
The default Form Submission trigger handles 70% of forms. The other 30% (AJAX forms, React forms, Webflow forms) need a custom pattern. This walks through both, and which one you need.
Google Tag Manager
Every GTM tutorial assumes you know what dataLayer is. Most don't actually explain it. This one does — in plain English, with examples you can copy. No JavaScript prerequisites.
Google Tag Manager
If a tag isn't firing — or worse, firing when it shouldn't — Tag Assistant is the only honest source of truth. Most operators use it wrong. This walks through the workflow specialists actually use.