Page scroll tracking in Google Tag Manager
Recently there were a lot of requirements and discussions about page scroll tracking. It seems a bit trendy now.However, first of all there should be a question put into place. Does it bring any additional value to implement page scroll tracking on your page? It is good to collect data but collect data that makes sense and brings you some value, right? Let me bring you some ideas when it could be beneficial to get data for page scroll tracking:
CTA buttons (sing-up buttons etc.) in the middle or at the bottom of the page (undoubtedly, business owners could be interested in stats #users reached CTA buttons x #users clicked through)
web content - imagine, you have an article and you want to see how many people read it to the bottom (please be cautious here as page scrolling might be misleading, users could only scroll down without reading anything therefore it would make sense to invite to your analysis also GA metrics - avg. time on page
Feel free to add more examples, these two crossed my mind immediately.
What you need to have before you start:
Google Analytics account
Google Tag Manager
jQuery on your site
Alright folks, let’s start:
Variables: in total you will create 3 new variables
Go to your Google Tag Manager and choose Variables. Click on the button NEW to create a new variable. At first, name it - Event Category. Then choose Data Layer Variable. Give it a name eventCategory and keep Data Layer Version 2. You can just follow settings depicted on the picture below.
For new variables called Event Action (Data Layer Variable Name: eventAction) and Event Label (Data Layer Variable Name: eventLabel) follow the same approach as it was done for Event Category. I am posting pictures for both settings below so don’t hesitate to set both variables accordingly.
Event Action:
Event Label:
Triggers: one load rule needs to be created but you can specify more, it depends where you want to use this tracking
Firstly, go to Triggers and click on NEW. Name your new trigger (load rule) as Scroll. Set your new trigger as custom event, give it a name - ScrollDistance and select the rule Event Action contains Percentage. Finally, save your newly created trigger. Below find the picture with settings.
note: I found more approaches recommending e.g. set event contains ScrollDistance. I chose the one with Event Action.
Tags: in total there will be 2 new tags
Firstly, create new tag called Scroll tracking. Set this tag as CUSTOM HTML TAG and paste the code from the following link into the empty box. Credits goes to Rob Flaherty who developed this code. Lastly, set the condition where you want to trigger this code (for instance, you can set All Pages or specify some pages etc.)
Moreover, create another tag called Page Scroll Tracking (it is up to you how you name it). From the offer choose Google Analytics and set a tag type as Universal Analytics. Fill in your Tracking ID, set Track Type as Event and to Category choose Event Category, Action as Event Action and Label as Event Label. Below see the screenshots of settings.
Well, now I want to show you how it looks in a magnificent tool called Google Analytics. It is pretty straight. In Event Category you find the name of the page where page scrolling happened. Event Action is captured as “Percentage” and Event Label shows you if users scrolled 25, 50, 75 or 100% on your page.
That is it. Feel free to start tracking on your site too. In case you have some better options how to implement page scroll tracking, just comment and I will be happy to found a bit more.
And do not forget. Implement page scroll tracking only when it makes sense and your data provides useful insights to your business. As that is the main point of collecting data. Capture data that makes sense. Otherwise it is nice playing around and showing what cool stuff you can do with Google Tag Manager.