, ,

How to Track Mouse Scrolls with Google Tag Manager 

Interested in tracking user’s mouse scrolls on your site? This is easier than ever now with Google Tag Manager.

While Google Analytics can give you a details such as time spent on a page, there isn’t anything that shows you how far user’s have scrolled through your landing page, blog post, etc. If you’re interested to know how far down the page users have scrolled, which usually indicates how much they have read, simply follow this guide.

If you’re like me, you have more than just one script you apply for various types of tracking and monitoring, and the best to do this is definitely with the use of Google Tag Manager. Recently they added a new feature that tracks page scrolls. I’m going to assume you have already implemented GTM as well as Analytics.

First Enable the Scroll Depth Trigger

Navigate to triggers, click on new and select scroll depth from the options:

From here you’ll need to choose between two options;

  Vertical scroll depths = track vertical scroll (most likely to matter)

  Horizontal scroll depths = track horizontal scroll

Once you choose one of these options you’ll have to methods to measure the scroll:

  Percentages: track scroll depth by percentage (this is my preferred method, I normally set increments of 25%)

  Pixels: track scroll by pixels

The next important setting is to determine when to fire this trigger. You can configure the trigger to fire on a blog page, or on multiple pages. Once you set this, hit save before moving to the next step.

Enable Native Scroll Variables

The new feature on GTM also allows adding datalayer variables for scroll depth. Enabling this allows capturing data from the datalayer of your choosing:

Create a Scroll Tracking Tag

last not least, you’ll need to send the scroll data to Google Analytics. Navigate to tags, click new, click tag configuration, and select universal analytics as tag type.

Select the track type as event

Enter the event parameters as displayed:

While adding event tag parameters, you will have to be careful about the Non-Interaction Hit field.

You can configure the non-interaction field to be true for 0% threshold. This will make sure your site bounce rate isn’t affected even when the page isn’t scrolled. To do this you can create a lookup variable that will output true when the scroll depth threshold equals to 0%.

Configure the trigger as displayed in the below image.

You can also set this up for 25% if you have a small page and threshold value changes to 25% on page load.

Rename this variable and hit save.

Navigate back to the scroll depth tag and select the lookup table variable from the non-interaction hit drop-down. Your new tag configuration should look similar to the below image.

Click on the triggering option and select the scroll depth trigger we created in the first step.

Save the tag.

Preview and Debug Changes

Before publishing the changes the changes in your container, it is necessary to review and debug changes. Click on the preview button within the GTM container, once the preview mode loads, open your website in a new tab.

When your website fully loads, scroll down to see if the scroll depth tag is firing. If it fires, you have setup successfully, otherwise go to step one and look if you have missed anything.

If you want to verify data in Google Analytics, open GA account in a new tab and navigate to real time >> events.

After setting this up, you’ll get a better idea how engaging your content really is!

Enjoyed my blog? Come join us for more on my Facebook Group

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *