Step-by-Step: New Scroll Depth Trigger in Google Tag Manager

How far down my page did users go? Did they actually see the content below the fold? <— Said every executive ever to every analyst ever

Scroll depth tracking has always been somewhat of a pain to setup in Google Analytics. Sure, there are guides like this one from Justin Cutroni, and there are WordPress plugins, but let’s be honest, until now, there haven’t been any good solutions to easily do this in Google Analytics. It’s required a ton of code and a developer to implement. Until now being the important words in that sentence…

Google Tag Manager has just released a few new triggers, one of which is called “Scroll Depth” (and I can’t be more excited!!). This trigger allows you to easily setup a tag to track the scroll depth in Google Analytics (and in fact, in any tool you’re sending data to from GTM since it’s a trigger and not tied to a specific tag type).

I set this up on my site in about 5 min (ok, maybe 1 or 2 min longer because I stopped to take several screenshots to share below).

Step 1: Create a new Universal Analytics Event Tag (and name it something like GA – Event – Scroll Tracking)
Step 2: Set your Category, Action, and Label

For my site, I’ve chosen:
Category: ‘Scroll Tracking’ in order to roll it all into one category and not pollute other category sets with this data since it has the potential to be noisy
Action: {{Scroll Depth Tracking}} – this is a new variable available in the Built-In Variables settings, more on that below
Label: {{Page Path}} – this is also a built-in variable. I’ve chosen Page Path so that I can easily see which page a user was on when scrolling to then analyze engagement by page. Since my blog posts all have individual page URLs, this works well.

 

Step 3: Enable new Built-In Variables for Scrolling
You can configure the Variables you have available for use in the ‘Variables section by clicking ‘Configure’ and checking each Variable you want to be available for use within your tags. In this case, all three Variables related to Scrolling are new, and I’ve selected all of them to be available for use in my tags.


Step 4: Add the Scroll Depth Trigger
Now that I’ve configured my tag and my Scrolling Variables as part of my event tag setup, I need to add a trigger. This is where the magic really happens. Click to create a new trigger, and in the slide out, you’ll notice a new Trigger for ‘Scroll Depth’ (and also another new trigger for ‘Element Visibility – equally if not more exciting, more on that in a later post).


Step 5: Configure the Trigger for Percentage Scroll
Next you’ll need to configure this Trigger. I’ve named it ‘Scroll Depth’ to keep things simple (if this is specifically for GA, you may want to append a GA to the beginning of the Trigger name, but since this is my only Scroll Depth tag for now, I’ll leave it like this).

You’ll have a choice between Vertical Scroll Depth and Horizontal Scroll Depth and which pages to fire on:


In this case I’ve chosen ‘Vertical Scroll Depths’. By doing so, I have expanded choice to either name my percentages or pixels, or to use a Variable in this field. In this case, I’ve noted 25, 50, 75, and 100 percent as the depths I’d like this Trigger to fire:


After saving and applying the Trigger, my final event tag looks like so:


Step 6: Preview & Debug
Now it’s time to Preview & Debug! I’ve put GTM into Debug mode and gone out to my site. As you can see, I’ve got several tags that are firing on the page, one of which is the Scroll Tracking tag I just made (firing at the 25% scroll marker):

When I click into to that tag chip, I can see the details being passed to Google Analytics. In this case, I see my Category, Action, and Label firing just as intended, excellent!


I continued scrolling to ensure that all 4 events fired, and immediately check real time analytics in GA to see that those events did indeed fire and collect data as expected. In this case, all looks good!

 

Step 7: Launch!
The last step is just to save and publish the new tag. That’s it! It’s now super simple to setup Scroll Tracking on your websites with this new Trigger available now in Google Tag Manager.

Leave a Reply

Next ArticleStep-by-Step: New Element Visibility Trigger