One of the most interesting things you can track in Google Analytics is scroll depth. It allows you to track the different scroll levels as someone is moving down your website. It could provide you with some insights as to how your website is attracting (or not attracting) users to stay to the end and where people might have dropped off and use this information to improve your website's UI/UX. This guide will show you how to set up Scroll Depth Event Tracking in Google Analytics 4 (GA4) via Google Tag Manager (GTM)!
---
Looking for help or support on Google Analytics 4?
---
In case you prefer watching a video tutorial, here's a tutorial from XYZ Lab's Youtube Channel. Enjoy!
Topics Covered:
Step 1: Ensure your Google Tag Manager is installed on all website pages
Step 2: Navigate to Google Tag Manager > Variables and click on "Configure"
Step 4: Create a new trigger, choose the trigger type as "Scroll Depth"
Step 5: Check "Vertical Scroll Depths" and type "10, 25, 50, 75, 90" in the percentage field
Step 1: Ensure your Google Tag Manager is installed on all website pages
Step 2: Navigate to Google Tag Manager > Variables and click on "Configure"
Step 3: Toggle on all "Scrolling"
The variable we will need to set up with the event is the "Scroll Depth Threshold".
Step 4: Create a new trigger, choose the trigger type as "Scroll Depth"
Step 5: Check "Vertical Scroll Depths" and type "10, 25, 50, 75, 90" in the percentage field
Step 6: Save the Trigger
Step 7: Create a new Tag, choose the tag type as "Google Analytics: GA4 Event" and select "GA4" under Configuration
If this is the first time you're setting up a tag, you need to input your Measurement ID which you can find in Google Analytics under Admin > Data Streams. If this is the second time you're setting up events, the system will record your Measurement ID.
Step 8: Name the event "scroll_{{Scroll Depth Threshold}}"
We want to create multiple events for the different thresholds. We will track each event that is relevant to users who scroll 10%, 25%, 50%, 75%, and 90% on the website.
1. Type in "scroll_"
2. Press the button
3. Click on "Built-ins"
4. Select "Scroll Depth Threshold"
As this event is going to fire, there will be different events created in GA4 for every scroll depth threshold. As an additional note, you can also create an event on just one scroll depth threshold (e.g. 50%). In this case, you would not need to input the Event Name and the percentages under the trigger.
Step 9: Attach the Scroll Threshold Trigger
Step 10: Save, Submit, and Publish your container
Step 11: Preview to verify the Tag is working
1. Click on Preview in Google Tag Manager
2. Connect your website
Two tabs will automatically open: your website with the debugger connected and Google Tag Assistant.
3. Scroll on your website with the tag assistant connected until the bottom
4. Navigate back to Tag Assistant and find the Scroll Depth events
You'll see that there are multiple Scroll Depth events, this is because we gave different scroll thresholds to the system. In each, you'll be able to see the tags fired for "GA4 Event | Scroll Threshold".
Comments