Track page scroll with Google Tag Manager

Updated: Sep 17, 2018

Page scroll is one of those metrics you need to track. Your career depends on it. The web is full of content and your website is too. You spend hours writing excellent content, researching the topic, editing it and when you finally publish it, you wait for people to read it.

So what do you do? Share it, market it, link to it, you name it...You check your bounce rate, it's probably good, let's say 30%. Well done.

Then you check average time on page, 03:00, this the norm, people are reading your piece of blog.


But here comes the bad news. Those 2 metrics, bounce rate and avg. time on page, say almost nothing about how engaged your users are with your content. Yes, users spend on average 03:00 on that page, but are you sure they are not just checking their Facebook and doing something completely different in the meantime?


This is why you need a more accurate metric and page scroll-rate gives you the answer.


Luckily, Google Tag Manager added recently an add-on that simplifies a lot tracking this metric. In this post I will show you how.



STEP 1: SET UP THE TRIGGER


  1. Go to your container

  2. Click to Triggers > Add new

  3. Select the trigger type called Scroll Depth

  4. Give it a name: I would call it Scroll rate - and below I tell you why.


As you can see, there are different types of Scrolls you can choose from, Tag Manager is asking you which one do you need: Vertical or Horizontal?

Pick the Vertical scroll, as in the image below and then add the scroll percentage you want to track, as for example 10%, 25%, 50%, 75% and 100%.


Select All Pages, unless you want to track scroll rate on selected pages only.


What's the difference between Horizontal and Vertical depth?


Horizontal: you track all movements and scrolling horizontally on a page and decide whether you need percentages or pixels. This can comes useful when your page is very large or you have side bars you want people to scroll to.


Vertical: same things as horizontal, only you track scrolling form top of the page to bottom.



STEP 2: ACTIVATE YOUR VARIABLES

Here you need to activate your variables that you will need later on. This variable is called "Scroll Depth Threshold".


Follow these steps:

1- Go to Variables > Integrated variables > Configure

2- Tick all the boxes within the Scrolling category


STEP 3: CREATE THE EVENT TAG


If you want to see this tag in your Google Analytics, you need to create an event tag, which allows you to see the percentage of scrolling as you previously set up.


  1. Go to Tags > New> Tag Configuration > Universal Analytics

  2. Track type: Event

  3. Category: Page scroll

  4. Action: {{Page Path}}

  5. Label: {{Scroll Depth Threshold}}%

  6. Non-interaction hit: false

  7. Select the GA variable or select the "Override Settings Variable" which should show your GA monitoring code

  8. Trigger: select Scroll rate - which we have just set up above.



© 2020 by Luca Tagliaferro. All rights reserved.