Tracking Scroll Depth on Pages with Google Analytics 4 via Google Tag Manager

Objective

Track how far users scroll on a page (e.g. 25%, 50%, 75%, 90%) and send that data as scroll events to Google Analytics 4, using Google Tag Manager.

Step 1: Enable Scroll Variables in GTM

1. Go to Google Tag Manager
2. Click Variables in the left menu
3. Click “Configure” (top right)
4. Under the Scroll section, enable:

✅ Scroll Depth Threshold

✅ Scroll Depth Units

✅ Scroll Direction

Step 2: Create a Scroll Trigger

1. Go to Triggers → Click “New”
2. Name the trigger: Scroll – Depth % Tracking
3. Trigger Configuration → Select Trigger Type: Scroll Depth
4. Scroll Depth Type:

✅ Vertical Scroll Depth

     5. Set thresholds: 25, 50, 75, 90

     6. Fire this trigger on:

✅ All Pages (or choose specific ones if needed)

     7. Click Save

Step 3: Create GA4 Event Tag for Scroll

1. Go to Tags → Click New
2. Name it: GA4 – scroll_depth
3. Choose Tag Type → Google Analytics: GA4 Event
4. Under Configuration Tag, select your existing GA4 config
5. Event Name: scroll_depth
6. Add Event Parameters:

Parameter Name   Value

scroll_percentage {{Scroll Depth Threshold}}

scroll_direction {{Scroll Direction}}

page_path             {{Page Path}}

     7. Scroll to Triggering → Select the trigger: Scroll – Depth % Tracking

     8. Click Save

Step 4: Preview and Test

1. Click Preview in GTM
2. Enter your website URL → Connect
3. On your website:

• Scroll down slowly
• Observe events in Tag Assistant

4. Confirm that:

• A scroll event appears when you reach 25%, 50%, 75%, or 90%
• The GA4 event fires correctly
• Parameters like scroll_percentage are sent

Step 5: Publish Your Tag

1. In GTM, click Submit → Publish
2. Name your version: GA4 Scroll Depth Tracking – v1

Note

• You can track horizontal scrolling too — just enable it in the trigger.
• Combine with Page Title, Page Type, or Device Category for richer GA4 reporting.
• Want cleaner naming? Use a Lookup Table to convert 25 → 25%, etc.