In this post I’ll cover one of the recent releases for Google Tag Manager, which is setting trigger based on Scroll Depth. I will also provide step by step explanation on how you can implement various tags based on how deep the users usually navigate through your various web pages
Combining scroll depth trigger with Google Analytics can help you analyse till what point are the users usually interacting with content on your website.
It helps you in making some useful decisions for your web page and increase the user interaction by optimizing the content placement, layout and volume.
So, without wasting much of your time in introduction, let’s look at the steps to set a scroll depth based trigger on GTM:
- Click Triggers -> New
- Click Trigger configuration and choose scroll depth trigger type.
3. After selecting scroll depth trigger type, you’ll see two scroll depth options:
- Vertical Scroll Depths
- Horizontal Scroll Depths
You can select both Vertical and Horizontal scroll depth values in same trigger or any one of them as per your requirements.
After selecting the option, you’re required to set the scroll depth values as either percentage of the page height and width, or as Pixels. You can enter more than one values in both the conditions, but values should be positive integer separated by commas.
For example: 10,20,30, etc.
The “Enable this trigger on”option specifies when this trigger should start listening for relevant interactions. Following are the three options available:
- Container Load (gtm.js) when the page loads, this one occurs the earliest among the three options
- DOM Ready (gtm.dom) occurs after DOM is ready to be parsed. 2nd in order
- Window Load (gtm.load) (default): after all initial content on the page has loaded, it occurs. This is last in order
You can select any one from the options as per your requirement or keep it on default, which is window load, if you aren’t sure which one to use for your web page from the options available.
4. Save the trigger.
Next, lets use the sensational GTM debugger and check in Preview & Debug mode if trigger is firing on set thresholds.
Now, lets setup a Google Analytics tag to record the scroll depth in your Analytics account.
Following are the steps to create a new tag for it and get this information in Google Analytics:
- Click Tags -> New
- Click Tags configuration and select Universal Analytics tag type.
3. Select track type as “Event”.
4. Following image shows a good way to record the scroll depth. Here I have used category as ‘Scroll Tracking’, Action would report the direction of scroll – horizontal/vertical and finally label would report the threshold value resulting in firing of this tag
5. Set non-interaction hit as true. This will affect your bounce rate calculations. Its up to you whether you wish to consider the scrolling a user interaction on the site or not
6. Select Google analytics settings variable as per your property UA – ID
7. Select the firing trigger for it, which was created earlier – the scroll depth trigger.
8. Save the tag and check in Preview & Debug mode, if tag is firing or not.
9. If tag is firing, you can check in GA under real time events report and check if category and actions values are coming properly as you have set them.
Like this you can set various other tags as well apart from Analytics that can change the user experience based on their scrolling depth, like introducing a pop up form etc
If you need help with this, then we are a crazy team of Google and Adobe Certified Analytics Experts who eat, breathe, sleep and dream Analytics. And we’ve made it our purpose and passion to electrify your business’s potential through Analytics.
Contact us here.
Found it informative? Leave a comment! You can also give us a thumbs up by sharing it with your community. Also did you know that you can light up our day by subscribing to our blog? Subscribe here –