Google Analytics Tracking Scroll Depth The Easy Way

Recently I wrote up some ad serving code that only shows ads to users when they are actually ‘inview’. In plain english if the ads can not be seen they do not get loaded until you are on a portion of the page where you can actually see the advertisement.

Why do this? This greatly increases the value to the advertisors as they are no longer showing ads that nobody can see and completely eliminates ‘below the fold’ ads.

This also happens to increase a blogger / publishers monthly revenue and bottom line.

The second part of this upgrade was to track and determine which of the posts were the most engaging which I have done by integrating scroll depth.

Currently time on page and pageviews is the engagement metric but moving forward scroll depth will be the holy grail because we can now  see what readers are truly engaging with.

Why do you want to know scroll depth?

Scroll depth will help you to tell which of your articles are the most engaging and help you to build better long form editorials. If you write an article that has 5,000 page views is it a good article?

Depends, did they actually read the article? Did the reader skim the article and bugger off to never return?

If you had 5,000 pageviews and only 15% read the entire article I would suggest that it is not the best content engagement. If the same 5,000 pageviews resulted in 80% of people reading it completely then you have clearly got an engaged audience and now know which of your content is the most valuable to you and your readers.

In developing my scroll depth code I saw alot of ways to do it but most of them quite frankly used far to much code for me. I am all about simplicity and I looked at 4 or 5 really polished examples before I settled on my method.

What the Scroll Depth Code Must Do

  1. Track how far down the user scrolls and record it in Google Analytics
  2. Code must work in Google Classic Analytics as well as the new Universal Analytics
  3. It must only record the LAST scroll depth in the simplest way possible.

The biggest challenge on that list was making it work for Google Classic and Universal but in the end I think I came up with a very simple and lightweight way to track it that requires a very small snippet of code.

In half a dozen lines of code we can track scrolldepth as follows;

window.onbeforeunload = scrollExit;
function scrollExit()
{
    bottom = $(window).height() + $(window).scrollTop();
    _gaq.push(['_trackEvent', 'Scroll Depth', 'Pixel Depth', '', bottom]);
}
});

What This Scroll Depth Code Does

I saw many examples where people used a variable to store the last scroll position but for me that seemed like overkill. Instead I am capturing their last point as they exit the page. The first line simply fires my function when the user goes to leave the page.

window.onbeforeunload = scrollExit;

The next line is my variable that tracks where the user is on the page, or their ‘scroll depth’

bottom = $(window).height() + $(window).scrollTop();

Lastly is the part where we tell Google Analytics to record the value before leaving the page.

_gaq.push(['_trackEvent', 'Scroll Depth', 'Pixel Depth', '', bottom]);

This is clearly very basic scroll depth tracking but its also easily expanded upon. If I run into any snags with this code in the wild I will be sure to note it here.

 

Advertisements

5 Comments

  1. I copy pasted youre code and put universal analytics code but it dosent want to show any data. Do i maybe have to include some jquery? This code goes to head or body?

    1. Hey Dex this code is not designed to just be cut and paste. If I have time at some point I will do a step by step of each bit.

      1. Copy pasting is exactly what i did 😀

        Ive seen a lot of codes but this one provides reports exactly how i need it. And the code is so small, usually codes for scroll depth are huge and complicated.

        Plz if u find some time update this post with step by step instructions

      2. I like to go with the KISS method when I write code.

        I ended up using a different method which was the same amount of code because I found as much as I loved this idea it was not at all reliable.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s