Scroll depth tracking

Understanding the way users scroll pages on your site is important to measure the engagement. Being ensembled with metrics like “time on page”, it will get you valuable information about people’s interest in your content.

I know, I know.. If you google something like “scroll depth tracking”, you’ll get ready-for-use Google Analytics plugin, which is apparently quite good. But what if you don’t want to involve jQuery or you wish to tune every subtle detail, or you have another reason to reject ready-made solution? Also I don’t really like the idea of sending some scroll stats (e.g. “50% achieved”) to GA before user finished working with the page.

Here is my approach.

First of all, a little chunk of theory.

We should take into account the obvious fact that a part of the page is visible on the first screen right away, i.e. without scroll at all. So we make one metric ‘basescroll’ for that page part, in percent. Apparently, this parameter may be different even for the same page because of different screen resolutions. The second metric that we make is the ‘maxscroll’ which is the furthest scroll depth during the user’s interaction with the page. The range of ‘maxscroll’ is from ‘basescroll’ (the user hasn’t scrolled) to 100 percent (the user has scrolled to the end of the page).

Both metrics will be tracked under our custom event ‘pageexit’ which is being fired by browser event ‘onbeforeunload’, when user leaves the page. This event is a very convenient tool for analysts, but spammers use it too, unfortunately. That’s why some devices (e.g. Ipad) and browsers occasionally block this event. As far as I have seen, event works good in Chrome and IE, works moderately good in Opera (in some versions), and almost doesn’t work in Firefox. So be cautious.

When dealing with the number of hits in reports, GA sums up metrics through all these interactions by default. Thus, in the report of pages and their scroll stats, we will see ‘basescroll’ and ‘maxscroll’ summed up through all visits on a particular page. This doesn't make much sense. To fix this, we use a ‘Calculated Metric’, a relatively new GA feature.

Let’s call it ‘AvgScroll’. We will use it to estimate the average scrolling behavior of the users.

So here is the formula: AvgScroll = (maxscroll - basescroll) / (100*hits - basescroll).

This metric ranges from 0% (maxscroll = basescroll, so the users didn’t scroll the page at all) to 100% (maxscroll = 100%, all users have scrolled the full page). 50% means that the users have scrolled halfway from the first screen to the footer on average.

Now back to GTM and GA. Here is the plan.

1. First off we need to make two custom metrics in GA admin: ‘basescroll’ and ‘maxscroll’. Their scope is obviously hit level. The variables’ type is integer, but we consider them as a percentage.
2. Now a handful of tasks in GTM:
1. Make a trigger which is being fired on every page after DOM is loaded. I called it “DOM Ready”.
2. Make a Custom HTML Tag. Put into it the following code:
   https://github.com/Oleg-Davydov/scroll_tracking_javascript/blob/master/script.js
   It should be fired on “DOM Ready” trigger we just made. The code contains dataLayer.push() call with our ‘basescroll’ and ‘maxscroll’ variables and “pageexit” event.
3. Now we need a Custom Event trigger for that “pageexit” event. I named it “Exit from page”.
4. And finally, we make a Tag, which is being fired on “Exit from page” trigger and sends ‘basescroll’ and ‘maxscroll’ variables to GA.
5. Don’t forget to publish all changes you’ve done in GTM.
3. Almost there!
   Data is already being collected. We can make a custom report with the pages and their scrolling statistics. But to see the average scroll on every page, we should implement the AvgScroll metric mentioned earlier as a Calculated Metric in GA Admin panel.

If everything is done correctly, you should see something like this in your new custom report:

There are lots of ways to use this information. Suppose, you work with an e-commerce project. And you see that some goods don’t get any user’s attention. This may happen because nobody scrolls down to these goods on the category page. This report is a good way to find out.