Scroll Depth Tracking is commonly used nowadays. Business owners want to know about the user who is coming to the website, how he/she is interacting with the page even if it is a single-page website.
Google Tag Manager has new in-build Variables and Triggers functionality to track scroll depth. We have covered every step which will need to follow to implement it.
4 Simple Steps To Implementing Scroll Depth Tracking in GTM
Step 1: Enable the Scrolling Data Layer Variables
In GTM > Variables > Click on Configure in Built-In Variables > Scrolling Label and Enables all the options
What does these 3 Variables mean:
- Scroll Depth Threshold: this is the scroll depth of a user. This is a numeric value (0-100). You can define value like (25,50,80 Percent).
Suppose You have set the trigger point on 25% and 75%. When users scroll down to the bottom of the page, Tag with the trigger will be fired 2 times one at 25% scroll and second on 75%. - Scroll Depth Units: This is a pixel or percentage setting of the scroll.
- Scroll Direction: In which direction you want to track ‘Vertical‘ Or ‘Horizontal‘.
Learn more about Scroll Depth trigger on Tag Manager Help.
Step 2: Enable Scroll Depth Trigger
In this you have to Click on the Trigger > Click on New > Tap of Tag Configuration > Scroll Depth
You will get two options “Vertical Scroll Depth” and “Horizontal Scroll Depth.”
I have selected the Vertical Scroll Depth and given the value 25,50,75 Percent and I have set trigger fire on All Pages.
If you want to track for a particular page then click on Some Pages and Select Page URL from the drop-down and enter the Exact URL you want to track and save the trigger.
Sometimes you have to analyze a particular page and then you can decide according to the data you have.
If users are not scrolling 50% of the page then there is a problem with the page, either content is not appealing or the site loading time is an issue or it can be any other issue.
When to Enable this trigger on, you have to select according to your need
1. Container Load – This enables after the page begins to load.
2. DOM Ready – Enable after the DOM is ready (container loads)
3. Window Load – this is default selected. This enables when all content of the page is loaded.
Step 3: Create Tag to Track Custom Event
Your variables and trigger is setup, now you have to push data to Google Analytics.
In GTM > Click on Tag > Click on New Tag > Tag Configuration > Google Analytics: Universal Analytics
You have to set Track Type as Event.
Category: you can define Name which will visible in Google Analytics. In Action, you have to select Scroll Depth Threshold.
Non-Interaction Hit: I have set this as True. If you don’t want the event to count towards a Bounce rate.
Let understand Non-Interaction Hit – Some times you want to track passive event and it should be excluded from bounce rate calculation then you can make those event as non-interaction events.
If the Interaction is True and a user has visited a page for 10 minutes and leaves a page after doing some activity this will count in the calculation on metrics in Google Analytics whereas non-interaction will not be considered while calculation.
Google Analytics Settings: You have to set your Google Analytics Tracking ID
In Trigger, you have to set the variable which we have made earlier for Scroll Depth.
Save the Tag.
Learn: How to Setup Google Analytics with Google Tag Manager
Step 4: Confirm Tag is Firing
Confirming the tag is firing before publishing to live is Good Practice.
Once everything is working fine you can Publish it and you can see the event tracing in Google Analytics
That’s it! You have successfully implemented Scroll Depth Tracking in GTM.
