Use scroll depth as trigger in Google Tag Manager

Google+Tweet about this on TwitterShare on FacebookShare on LinkedIn

Before we delve into details on how to use Google Tag Manager for scroll tracking, let me share some interesting facts concerning the subject matter.

According to SumoMe research based on more than 650 000 visits, only 20% of all users reach the bottom of the viewed page. Not only that, the in-depth analysis showed that the majority of visitors would only read about 25% of the article. Even without getting into specifics behind these figures it is reasonably safe to suggest that you might be blundering away an advantage to reach more than 80% of your site’s audience because of that.

Google Tag Manager for scroll tracking: chart pie

The problem can be partially solved by implementing scroll depth tracking. In this case, you will have a clear understanding of where exactly users would stop reading. But the main challenge here is to figure out how we can use this information to make visitors convert into customers.

One of the possible solutions here is to use custom triggers based on the scroll depth tracking data for getting in front of the potential audience at the right time and place. For example, you can address those readers who are about to leave after reading just 25% of the article by showing an additional promo-banner. Or you can try to collect their email so you can contact them later. But what if you want to show your promo only to those readers who scrolled, say, 600px down the page? Or those who reached a certain paragraph?

In this article I will describe possible ways you can use Google Tag Manager to create scroll depth data-based triggers.

The content below is divided into the following chapters:

  1. Simple way of using Google Tag Manager for scroll tracking
  2. Advanced scroll depth tracking
  1. Things to consider
  2. Summary
Before reading further please mind that any of the below solutions requires at least basic knowledge of JavaScript/jQuery.

Simple way of using Google Tag Manager for scroll tracking

Now that we are done with the introductory part, let’s have a closer look at the possible solutions for creating simple triggers.

Ex. #1: check the scrolled distance

Let’s say you want to fire a tag whenever a user scrolls 600px down the page. Using the following function, you can easily push a specific event into dataLayer, and then use it as a trigger for your tag.

Here are some additional notes for better understanding of the script’s logic. First, let’s look at the variable named scrolled that is used to define the scrolled distance. Some browsers work fine with documentElement.scrollLeft/Top query, but browsers like Safari/Chrome/Opera have issues with that so you have to use document.body instead.

But in order to avoid any possible issues we would use window.pageXOffset/pageYOffset property. Since IE8 (and earlier) does not support this, the cross-browser solution would look like this:

Next, let’s take a closer look at the checkScroll variable. Just because we want to fire a certain tag only when users scroll down the page we need to check the scroll direction. We can do that quite easily by checking the current top distance against the previous top distance (lastScrollTop).

Finally, we need the state variable to avoid multiple pushes of the same event into dataLayer. So this function will push one ‘scrolled600px’ event each time a user scrolls 600 or more pixels down the page.

Use Custom HTML tag to add this script to your site. After that you can create a trigger that uses the ‘scrolled600px’ event like this:

Google Tag Manager for scroll tracking: my-trigger

Ex. #2: check page scroll to a certain point

Here’s an example. Suppose you have a paragrapth that looks like this:

You want to know how many users have actually scrolled down to this paragraph. Using the above function you can easily do that. One thing you’ll have to change is the check variable.

Now this function will push a specific event into dataLayer each time a user scrolls down to the ‘offer’ paragraph. Again, to get the most of the solution we would use window.innerHeight and document.documentElement.clientHeight since IE8 (and earlier) does not support the innerHeight property. Don’t forget to rename your dataLayer event (it could be something like ‘scrolledToOffer’).

Now all you have to do is to create a Custom HTML tag like this…

Google Tag Manager for scroll tracking: script

… and let it fire on all pages where you want to track users’ scroll depth. After that you can use the dataLayer event to fire your UA Event tag.

Advanced scroll depth tracking

As most of you probably know, there are excellent scroll depth tracking solutions offered by Justin Cutroni and Rob Flaherty. There are also lots of guides on how to implement them via Google Tag Manager, so I presume there is no need in detailed implementation instructions here.

But since those new to GTM still experience some problems while implementing these solutions (esp. Rob’s script) in GTM V2, I guess a quick guide would not be out of place. Let’s take Rob’s script as an example.

Installing Rob’s Flaherty scroll depth plugin via Google Tag Manager V2

So here is how you can implement Rob’s scroll depth plugin via Google Tag Manager.

  1. Since Rob’s script uses jQuery, make sure the library has been installed/is loading on your website.
  2. Create four dataLayer variables: eventCategory, eventAction, eventLabel and eventValue. Here’s an example of the eventLabel variable.

Google Tag Manager for scroll tracking: eventLabel

  1. Create a Custom HTML tag and copy-paste the JS code from here. Make the tag fire on all pages where you want to track users’ scroll depth. Please note that this script slightly differs from the original one. See details in the ‘Things to consider’ chapter.
  2. Preview the container. If you’ve gone through the previous steps correctly, you will see ScrollDistance and ScrollTiming events appearing in the “Summary” section as you scroll down the page.

Google Tag Manager for scroll tracking: scrolldistance

So now you can create a trigger that will fire the UA tag each time a user scrolls 25% of the page like this:

google-tag-manager-scroll-depth-rob-trigger-min

Things to consider

As you can see, some solutions here are DOM-dependent. This means if you or someone else change, say, the class or the id of the element that is used to check users’ scroll depth, the scroll tracking may either just stop working or start producing incorrect data.

When using a Custom HTML tag you should always double-check each line of the code before publishing the container. In order to avoid any issues it would be better to show all third-party scripts to your site developers prior to using them.

In this article I decided to hold up as an example a slightly modified version of Rob’s script like it has been offered by Himanshu Sharma in his blog. In this version the function ties scroll events to a certain page. Besides, you could probably notice that it is the 4th version of his script (not the 6th) that has been modified. That’s because we want to stay within the GA Collection Limits.

Certainly, I don’t claim that my JS code here is 100% impeccable. All suggestions and/or comments on this are welcome and appreciated.

Summary

Going back to the very start of this article, I would like to point up the huge necessity for having a properly working content analytics on your website. With this kind of information you can not only improve your content’s read rates but also tailor your marketing strategy according to users’ behavior on each page that influences your business results.

Once you have the scroll depth tracking installed, you will receive all information you need to start addressing your potential audience just at the right time and place.

Google+Tweet about this on TwitterShare on FacebookShare on LinkedIn

Tag Manager ,
  • Omniaural

    Thanks Dmitri!

    Very simple setup!