How to Scroll Tracking with Google Tag Manager and Google Analytics 4

How to Scroll Tracking with Google Tag Manager and Google Analytics 4

google analytics 4 offers automatic event tracking capabilities for things like file downloads outbound clicks or scroll tracking but did you know that the automatic Scroll Tracking with Google Tag Manager and Google Analytics 4 tracks only when a visitor scrolls down below the 90 mark in this post i will show you how to implement scroll tracking in google analytics 4 not only for 90 but for other thresholds as well for example 25 50 or 75 percent.

Scroll Tracking

helo fams and welcome to another mania blog channel where you can learn google tag manager and google analytics and if you want to stay up to date with google analytics 4 consider subscribing speaking of Scroll Tracking with Google Tag Manager and Google Analytics 4 there are two approaches that you can choose from in this blog post article i will explain both of them so make sure you stick around till the end of this article post make an informed decision as such without further ado let’s take a look in this post i presume two things the first one is that you already have created a google analytics four property and the second thing is that you have already installed it in google tag manager by using the ga4 configuration tag that will look something like this and in this measurement id field you have entered the id of your website data stream if you don’t know what I’m saying then i recommend checking the description of this video where i will post a link to another tutorial on how to install google analytics 4. so since we are going to implement scroll tracking with google tag manager the first thing we have to do is we have to go to google analytics for then go to admin data streams and click on your website data stream then click this gear icon right here and disable scroll tracking then click save now let’s go to google tag manager and let’s create a scroll trigger because by default scroll tracking in google tag manager is disabled so let’s go to triggers new trigger configuration and then click scroll depth here you should select vertical scroll depth and then you can enter various thresholds that you want to track usually people choose 25 50 75 and 90.

Scroll tracking google analytics

then leave all other settings as they are are and name this trigger simply scroll or anything else you want click save and now we can check whether this trigger is working properly so click the preview button then you must enter your URL website where you’re going to test this scroll tracking trigger and once you see the debugger connected here and here now you can scroll down and then after you scroll let’s say below 50 of the page height then let’s go to the preview mode and see what we see there and here you should start seeing some scroll depth events right here now if you click on it you can see here that there’s some data about the scroll in the data layer however if you plan to use some of these data points in your setup for example the percentage of how much did the visitor scroll down you will not be able to do that because if you go to the variables section you will see that you have no variables related to scroll unless of course you have enabled them at some point in the past but if you haven’t done that yet you should go to google tag manager variables configure and then enable all scroll related variables right here actually in this video we’re going to use just scroll down threshold but maybe in the future you will need this one and this one so you can enable all of them they will not have much impact on your page performance so once you do that then let’s click the preview button once again and when you refresh the page let’s scroll down again for at least 50 and then you will see that we have several scroll depth events you can click on one of them then go to variables and here you will see that we have some variables related to scrolling for example this one is definitely useful and we plan to use this in our setup of Scroll Tracking with Google Tag Manager and Google Analytics 4 now it’s time for us to create a google analytics for tag because we want to send scroll events to ga4 and to do that you should go to tags in google tag manager

click new

then click tag configuration and

select ga4 event

in this tag you should select your existing g4 configuration tag and then you have to enter the event name that you’re going to use and here there are two approaches and you can choose one of them

scroll depth google analytics

the first one is based on the built-in Scroll Tracking with Google Tag Manager and Google Analytics 4 of enhanced measurement within google analytics four so in that case all scroll events are named scroll just like this all lowercase and then you can send an event parameter that is named percent scrolled exactly like this and then as a value we can send the value of this

scroll-depth-tracking-google-tag-manager
Scroll Tracking with Google Tag Manager and Google Analytics 4

variable which is scroll depth threshold so we can click on this button and then select the scroll dab threshold right here then name the tag and finally we have to select the trigger and we have already created one so just select your existing scroll trigger right here then click save and now we are going to test it and once we test this i will show you an alternative option that you could implement instead so once you save the tag click preview then you can scroll down till the very bottom of the page and here you will see four scroll depth events for each threshold so this is for 25 50 75 and 90 and if you click one of them you can click on a tag you will probably see something like this but if you want to switch to the value mode you can click values right here and then you will see that with the scroll event we sent a parameter called percent scrolled and its value on this particular event was 25 Scroll Tracking with Google Tag Manager and Google Analytics 4

let’s say if i click this one and click on the tag i will see that the value of the parameter is different now let’s go to the debug view of google analytics 4 because we want to check whether that event was actually received by ga4 so go to google analytics 4 and then go to debug view at the bottom left corner of the interface and here eventually you should start seeing scroll events coming from your device so if i click this one i will see all the parameters that were sent together with this event i hope that google analytics will change this in the future and will handle this automatically but right now if you want to start using this parameter as a dimension in google analytics i mean glendale is four and in this case what i mean is that if you want to start seeing or using this parameter in your reports you have to register it as a custom dimension so to do that you should go to custom definitions click create custom dimensions and here you should enter something like percent scrolled you should keep the scope as event description can remain blank and then here you should enter percent rolled like this and then click save and within 24 hours you should start seeing this parameter in your reports and you will be able to use that in things

Scroll Tracking with Google Tag Manager and Google Analytics 4

average scroll depth google analytics

like analysis hub or some other standard reports but keep in mind that there are some limits for custom dimensions and as of the moment of recording this video you can have up to 50 custom dimensions that are text values so even though we are setting a number in this case it is a dimension and that is a text dimension so basically 50 custom dimensions and 50 custom metrics but in this case we are sending dimension not a metric so if you already have a lot of custom dimensions registered in your ga4 property and you don’t want to create another one because well maybe you have some plans to create more important ones in your property here’s another approach that you could take in this case we are not going to use a custom

dimension so to do that let’s go to google tag manager and let’s pretend that we have created a new g4 event tag but obviously in this case we will just be editing our existing scroll event because we will replace this setup with an alternative approach so here is what we are going to do first of all we should remove this parameter right here because we are not going to send it and instead of just the name scroll we could make it more specific and for each scroll threshold we could send a unique event name for example for 25 scroll threshold we could send an event which is scroll underscore 25 like that if the vistor scrolls down below the 50 of the page height then the event would be like this obviously we could create four different tags and four different triggers for this case but this is not very optimal instead we could replace that number with a scroll dab threshold variable which is like this so scroll underscore and then this variable and when this tag is fired google tag manager will replace this part with the actual value of the variable

google tag manager with google analytics

Scroll Tracking with Google Tag Manager and Google Analytics 4

hich is 25 50 75 or 90 then leave the trigger as it is and maybe we can rename this event to something like underscore xx click save now let’s click the preview button and test everything once again so now i have refreshed the page i will scroll down and i will see four scroll depth events in the preview mode i click any of these then i click on the tag and i see that there was just one thing that was sent which is event name there are no parameters now let’s go to the Scroll Tracking with Google Tag Manager and Google Analytics 4 again to debug view and here i should start seeing different events so instead of you know using the custom dimension for scroll threshold i am using this time for different event names but in this case there is another limit in google analytics for and that is 500 unique events per client id so in other words you can track no more than 500 unique event names per single user or per single visitor of your website

google tag manager analytics

so if you have a lot of unique event names for example click of one button click of another button and they all have different event names then maybe this approach is not the best for you and maybe the first option that i showed with the custom parameter maybe that will work better for you so this is up to you to decide which option do you choose and in both cases you will have to wait for up to 24 hours to start seeing that scroll event data and other reports for example in the events section right here or things like engagement and that is how you implement Scroll Tracking with Google Tag Manager and Google Analytics 4.

which option do you prefer more single event with a parameter or multiple event names why let me know in the comments if you found this article useful hit the thumbs up button below the article because it helps me continue working on this blog also if you want to learn more about google tag manager and google analytics 4 consider subscribing to this blog How to Scroll Tracking with Google Tag Manager and Google Analytics 4.