Chapter 06

How to Measure Page Scrolling

By Anna Tomalik

So far, you’ve learned how to track a click on a button, menu with logo, and footer items. Now is a good moment to shed some light on how much content visitors consume. One of the metrics that will help you with that is scroll depth.

Scroll depth lets you measure how far visitors are scrolling. Usually, it’s set up to record the moment when a person reaches the 25%, 50%, 75%, and 100% scroll marks. For example, a visitor starts reading a blog post, skims through a few paragraphs passing the 25% scroll mark, and closes the browser window. When that happens, a tag sends information to Analytics about that event. Then, the event appears in an event report.

In this chapter we’ll show you how to set up page scroll tracking and how to analyze the collected data.

Choosing pages for scroll depth measure

Before you begin, it’s good to think of pages for which you want to measure the page scroll depth. One approach is to collect data from all pages; another is to pick pages or groups of pages and gather the data separately. We like the second approach because it makes more sense for us to look at pages with different goals and structures individually.

For example, on Clear Bank’s website we could measure scroll depth for blog posts to understand how far down people are reading. Additionally, we could look at scroll depth for the home page and pages with our offer to learn which information is the most visible to visitors. For the purposes of this chapter, we’ll show you the setup for the first case — blog posts. Here’s how you do it.

For page scroll tracking, we’ll use a custom event tag and a page scroll trigger. We’ll create four tags with 25%, 50%, 75%, and 100% scroll marks. We’ll also organize data according to the framework we used in previous chapters. That is:

  • Category: Content blog.
  • Action: 25%, 50%, 75%, and 100%.
  • Name: {{ Page Path }} (A variable that pulls out the page path where an event occurred).

Setting up page scroll tracking in Tag Manager

First, we’ll define a custom event tag for the 25% mark. After that, we’ll create a trigger.

To set up the 25% page scroll tracking tag, follow these steps:

  1. Go to Menu > Tag Manager.
  2. In the left-side menu click Create new tag.
  3. Name the tag.
  4. Select Piwik PRO Custom Event tag and click Save.
  5. Set category as Content blog. You can use another name depending on the framework you use for organizing events in your reports.
  6. Set action as 25%.
  7. Set name as a {{ Page Path }} or {{ Page URL }} variable. This way Tag Manager will pull out information about the page where the scroll depth was measured.
  8. When done, click Save.

To set up a trigger for tracking the 25% scroll mark, follow these steps:

  1. Open a created tag for tracking scroll depth and scroll down until you see Tag triggers.
  2. Click New trigger.
  3. Name the trigger.
  4. Select the Page Scroll event type for the trigger (on small-size screens click the drop-down menu).
  5. In Amount of page scrolled, set the percentage as 25%.
  6. Tip: Percentage depth is the relative measure most commonly used for understanding the scroll depth. But if you want to use an absolute measure, you can change the percentage to pixels and record the scroll distance in pixels. This can be useful for comparing across devices where the relative percentage heights vary greatly.

  7. In Trigger conditions, set the condition for the tag to fire. For our example, we’ll use the condition Page URL contains https://clearbank/blog/ because we want to track scrolls on blog posts.
  8. Lastly, click the radio button next to Fire tag once per page view. This is the best option to see how far people are scrolling on a page.
  9. When done, click Save for the trigger and click Save for the tag.

We’ll repeat these steps to set up the 50%, 75%, and 100% marks. We’ll just change the action to the 50%, 75%, and 100% and percentages in the trigger setup.

Tip: When setting up the 100% mark, you might need to use a bit lower mark to capture the end of the page. For example, 98% or 96%.

Checking the setup in debug mode

Once we have tags and triggers ready, we can test if they work in debug mode in Tag Manager.

To use debug mode, follow these steps:

  1. Go to Menu > Tag Manager.
  2. In the top-right corner click Debug.
  3. Your website will open in a new tab with debug mode running.
  4. Open a page on which you have the scroll depth tracking set up.
  5. When you’re happy with how the tag works, go back to Tag Manager and publish the tag.

Viewing page scroll tracking in a report

Just after publishing, tags will start recording and sending data to Analytics. In a little while, you will be able to see the data in the event report (Menu > Analytics > Actions > Events). In our case, the report will look like this:

At this point, we need to explain how to read the data. As you can see in our report, there were:

  • 70 events of 25% scroll
  • 53 events of 50% scroll
  • 37 events of 75% scroll 
  • 26 events of 100% scroll

However, when a visitor reads through a page and scrolls down 25%, 50%, 75%, and 100% the tag will capture all these scrolls and include them in the stats. You will see the number of all events that happened for each scroll mark, but you won’t know how many pageviews were scrolled at each scroll mark. Therefore, you might need to run these numbers through a calculator to get more accurate data.

Here’s an example of how you can calculate that. Let’s say a visitor opens the first page, doesn’t scroll, moves to the second page, scrolls below the 25% mark, moves to the third page, scrolls below the 75% mark, and exits our website.

Here are the numbers that Piwik PRO will record:

Pageviews 3
25% scroll events 2
50% scroll events 1
75% scroll events 1
100% scroll events 0

Now, if we want to know how many pageviews were scrolled to the 25%, 50%, 75%, and 100% marks, we will need to do the following calculations:

25% scroll events A A-B
50% scroll events B B-C
75% scroll events C C-D
100% scroll events D D

The results are:

25% scroll events 2 1
50% scroll events 1 0
75% scroll events 1 1
100% scroll events 0 0

As we can see, we had one pageview with a 25% scroll event and one pageview with a 75% scroll event. Now, if we take the number of all pageviews and subtract the sum of pageviews with events, we’ll get the number of pageviews without an event.

Pageviews without an event = All pageviews - Sum of pageviews with events

Having these data at hand, we can count the percentage of pageviews that reached any scroll mark.

25% scroll events 1 33%
50% scroll events 0 0%
75% scroll events 1 33%
100% scroll events 0 0%
No events 1 33%

Coming back to the Clear Bank example, if we do the math for scroll depth events we will see that for blog content:

  • 17 visitors reached the 25% scroll mark
  • 16 visitors reached the 50% scroll mark
  • 11 visitors reached the 75% scroll mark
  • 26 visitors reached the 100% scroll mark

Now if we take the number of all pageviews and count the percentage for scroll marks, we’ll have:

  • 18% of visitors reached the 25% scroll mark
  • 17% of visitors reached the 50% scroll mark
  • 12% of visitors reached the 75% scroll mark
  • 27% of visitors reached the 100% scroll mark
  • 26% of visitors didn’t scroll below the 25% mark

When we have scroll depth data ready, we can compare it to a few metrics calculated for the page we’re tracking: average time on page and bounce rate (Menu > Analytics > Actions > Pages). These two are the best indicators of how our content is performing. When beefed up with the scroll depth metric they work even better.