If you’re reading this post you’re already familiar with the metrics like bounce rate, average page visit duration, and others.

These metrics are very much essential to know how good is the user engagement on your site.

However, in order to know how long the people have read the content on your page, scroll depth analysis is very important.

For example, if Google reports that people stayed for 2 minutes on average on a page, you can’t effectively determine whether people actually read the content or just had the browser window open.

That’s where scroll depth tracking comes into play.

Scroll depth analysis benefits

  1. It helps you a lot to formulate your marketing strategies, especially in determining your content marketing strategies. If you are having lots of long articles on your blog, scroll depth tracking is very important to know whether people are really engaged in your content or not.
  2. It also helps you know where exactly people stopped scrolling your page, and helps you analyze why they do so.
  3. It gives you actionable strategies to improve your content structure, implement story-telling, and cliffhangers to keep people hooked in and make them scroll more rather than bounce back.
  4. It helps you determine where you need to include the CTA buttons in your content for maximum impressions and clicks.
  5. It helps you come up with a right scroll percentage for popup triggers.

And many more.

If you are driving paid traffic to your landing page and are not analyzing the scroll depth, you may be missing out on some of the simple optimizations that would otherwise have boosted your conversions.

Perhaps you can consider reordering the presentation of your product’s features on your landing page by analyzing the scroll depth – to grab more eyeballs.

I would say that scroll depth should be the crucial metric you need to track when doing conversion rate optimization on your website too.

Tracking scroll depth

There are various tools for you to analyze the scroll depth.

You can do this with the help of Google Analytics, Hotjar, VWO and also Optimizely. With tools like Hotjar, VWO, and Optimizely the analysis will be visual and setup is straightforward.

However, with Google Analytics the setup is quite difficult and is a non-visual way to analyze. But as it’s a free way, let’s discuss about how to setup scroll depth analysis with Google Tag Manager and Google Analytics.

Previously, in order to track scroll depth with Google Analytics, you need to to have Javascript knowledge or you need to make use of plugins from Github and other developers.

But now, it’s simple as GTM recently introduced Element Visibility and Scroll Depth along with variables.

So here’s the procedure.

First, you need to headover to Google Tag Manager.

Google Tag Manager

Here you need to create a new account under your domain name, if you’ve not setup Google Tag Manager for your site already.

Installing Google Tag Manager Code

After this, GTM will give you two pieces of code you need to install in the <head> and <body> of your site.

Creating trigger

Create trigger

Now you need to head over to the “Triggers” section of your account, and click on to create a trigger.

Select trigger

As you can see quite recently Google Tag Manager has included this trigger in their platform.

There are mainly three variables that this trigger has:

  1. Scroll Depth Threshold: A numeric value that caused the scroll depth trigger to fire.
  2. Scroll Depth Units: The unit of scroll depth – pixels or in most cases percentage.
  3. Scroll Direction: The direction of the scroll – vertical or horizontal.
GTM scroll percentage

You can see, I’ve selected the vertical scroll I need to track and also the unit I chose is percentage as it’s straightforward.

Depending upon the length of your content/landing page you can enter in the percentage value I’ve marked in the above screenshot. It means, the trigger will fire every time a user scrolls past these specified thresholds. I’ve set the thresholds as 10, 25, 50, 75, 100.

If for any user, the scroll depth is only 10% I can perhaps reconsider the introduction of the blog post.

Select trigger pages

If you have specific pages for which you need to track scroll depth, you can enter in the URL(s) under “some pages”.

After setting up this, I’ll save the trigger.

Setting variables to store data

Now, you need to head over to the variables section of Google Tag Manager.

Enable GTM variables

Here, you need to scroll down a bit and tick the three variables related to “Scrolling” as shown in the screenshot.

GTM variables enabled

Now, you need to see these variables under the built-in variable section of your GTM account.

Create an event tag

Now in order to link and wrap the triggers and variables together you need to create an event. The event you create in this step will pass data to Google Analytics.

New GTM Tag

Now in here, you need to enter in the below settings.

Scroll Depth GTM

In the tag configuration the Track type as Event, Category as Scroll Depth, Action as Page Path and Label as Scroll Depth Threshold.

Also you need to consider setting Non-Interaction Hit to True to make sure that you are not affecting the bounce rate of your site.

In the Google Analytics settings you need to enter in the tracking ID of the site.

After the tag configuration, you need to select the trigger you created in the step 1.

Now save the tag.

Preview the tag

Now in order to see if the tag is working as intended, you need to click on the preview button in your workspace.

Preview GTM

This is to enable the preview mode so that when you open any webpage in the browser, Google Tag Console will show up for debugging and verification.

Now, open any page on your site, where scroll depth event should be triggered.

Verify event firing

In the data layer of the tag manager console you can see the values as I scroll down to the footer of the site.

Reporting

The data will be sent to Google Analytics and you can view the scroll depth data under GA > Behaviors > Events > Top Events.

It may take some time to populate the data under Events. If it’s showing in real time events section, it should be up in under 24 hrs.

There you can filter in the pages with low scroll depth and optimize them for good engagement.

Scroll depth analysis in Hotjar

Hotjar is one of the most popular tools out there when it comes to user analytics, recordings, heatmaps, and also surveys.

Their heatmaps feature comes with scroll depth feature.

When you record the heatmap of any webpage, you get sufficient data for analysis, you need to go to view heatmap. Here you can notice that you have “scroll” option.

Hotjar Scroll Heatmap

Here, when you select this, It’ll display you the scroll map and enable you to discover what percentage of people scrolled to what percentage of your site.

The content and the elements that are placed above the fold gets more eyeballs.

In Hotjar if the area is red, orange and yellow, it means that the areas are hot and more viewed and scrolled past by the visitors.

If you are running an affiliate site, you need to consider moving the product comparison table at the top of the page preferably above the fold to get more impressions and clicks.

Wrapping up

You can make use of Google Analytics. If you want a more visual representation of scroll depth you can make use of tools like HotJar, VWO, Optimizely, and others.

Tracking scroll depth is very important when it comes to optimizing your site for more conversions.

It’s also essential to know at what point of time people are dropping off from reading your content and lets you make the necessary changes to increase the engagement.

Hope you found this tutorial on scroll depth or scroll map analysis helpful. If you have any doubts make sure you leave them in the comments section below.