How to measure Page Scrolling in Google Data Studio

How to measure page scrolling in google data studio

In this post I’ll show you how to measure Page Scrolling in Google Data Studio. I’ll also show how you can set up the correct tracking in Google Tag Manager so you can see how far along your page users scroll.

Setting up Scroll Tracking in Google Tag Manager

Before you start setting up the tags, click on Variables and make sure all the Scrolling variables are added on your workspace.

Next, click to add a new tag.

Google Tag Manager - Add a New Tag

Choose a Google Analytics – Universal Analytics tag type.

Google Analytics tag type in Google Tag Manager

You can then set up the tag as shown below.

Track Type = Event
Category = Scrolling
Action = {{Scroll Depth Threshold}}
Label = {{Scroll Depth Units}}
Non-Interaction Hit = True
Google Analytics settings = Your GA tracking code variable

Make sure to set Non-Interaction Hit to True

Important Note on Non-Interaction Hit

In the first version of this post I did not include making sure that the Non-Interaction Hit is set to “True”.

That resulted in my Bounce Rate dropping because it was registering the Scrolling Events as hits. However, someone arriving on your page, scrolling 10% of the way down should still be considered a bounce. Therefore make sure to adjust the Non-Interaction Hit from the default false to True.

Now, we need to create our trigger. Click to add a new Trigger.

Google Tag Manager create a trigger

Choose the Scroll Depth trigger type from the User Engagement trigger category.

Choosing the Scroll Depth trigger type

Name it ‘Scroll Depth Trigger’.

Make sure ‘Vertical Scroll Depths’ is ticked and Percentages is chosen. Then added the following percentages: 10,25,50,75,90. You’re obviously able to choose your own percentage values if you want.

Creating a Scroll Depth trigger in Google Tag Manager so we can measure Page Scrolling in Google Data Studio

Now we can test out the tag using Google Tag Manager preview mode.

In GTM preview mode, you can see if the tag is working correctly, as shown below.

Scroll Depth in the Google Tag Manager Data Layer

We can also take a look in Google Analytics to see if the Events are registering.

Google Analytics - Real Time - Events. Check if we can measure Page Scrolling in Google Data Studio

We can see if the Scrolling events are appearing properly in Google Analytics.

Scrolling events in Google Analytics

Measuring Page Scrolling in Google Data Studio

The next step is to create a report in Data Studio to measure and monitor how far down the page our website visitors are scrolling.

First we can create a bar chart that has the following dimension and metric;
Dimension = Event Action
Metric = Total Events

We also need to create a table filter set up like below:

Include > Event Category > Equal to (=) > Scrolling

Creating a bar chart to measure Page Scrolling in Google Data Studio

Update to displaying the number of Scrolling Events

So since I wrote this post, Data Studio has been updated with some new features! One of the new features is to display metrics as a Percentage of the Total.

So below I show how you can get the number of events to display as a percent of the total, which makes it easier to understand in my opinion.

Percent of total events in data studio

Percentage of scrolls for each page

To make sure we can see the percentage of scrolls for each page we can add another table showing a list of pages by page views.

Dimension = Page Title
Metric = Page views

Make sure to enable filtering by ticking the box next to “Apply Filter” (not shown below).

Creating a table to measure Page Scrolling in Google Data Studio

And with the page table and the scrolling bar chart set up, you can now see how far down the page most users get.

Hope you found this article about how to measure page scrolling in Google Data Studio useful.

My Other Blog Posts

If you liked this article you might like my other blog posts.

Purchase Google Data Studio Templates

If you’d like to download one of my Google Data Studio reports as a template to use for your own data, you can visit Data Studio Templates and purchase one.

I’m Michael

I’m a digital analyst with seven years experience in digital marketing. I’m skilled in web analytics, tag management and data visualization.

Get in touch with me!

I'm Michael

Author Michael

More posts by Michael

Join the discussion 17 Comments

  • dongwoo says:

    At the end of the article, page table and the scrolling bar chart set up and work together. How did you set them?

    • Michael says:

      Hi – you make sure “Apply Filter” is ticked for the Page Title table. You can tick Apply filter in the Data tab for the Page table. Then when you click any Page Title, it will only include Events that happened on that page. So then the chart on the right will change based on what page you choose. Hope that makes sense?

  • Lee Hurst says:

    Hey Michael! Great focused post as always! Someone had asked me about how to do this and I had a variation in mind that you might want to try (maybe you already did ). Could you do a vertical bar chart, flip the Y axis, color code the buckets and stack? I think this would mimic things like hotjar showing a visual layering for the depth buckets. Let me know if your interested – Also , just catching up on post backlock and this is going into the resource finder with 5 Stars. Nice job!

  • Jan says:

    Hi Michael,
    Perfect article, thank you! It helped me a lot.
    There is a graph in your template that shows the number of events. I think it’s better to switch to a percentage of the total.
    I am sorry for my bad English πŸ™‚

  • Hi, Michael. I like your design! I’m trying to change my scrolling calculation to delete repetitions. For example, if John scrolled to 100% and Mary scrolled to 80%, the total for 80% would be 2 and the total for 100% would be 1. I don’t want John to show up in both 80% and 100%; I only want him to show up at his maximum scroll (100%). I know what I need to doβ€”subtract the total number of events in the 100% column from the total number of events in the 80% column (then I’d have one event in each column)β€”but I don’t know how to accomplish that. Any ideas?

    • Michael says:

      Hi Laura,
      That’s a good question. I don’t know the answer to that off the top of my head… You’d probably need to play around. Maybe try making a CASE statement in Data Studio. Or do some custom calculations like you mention. Let me know if you manage to figure something out?
      PS – are you on Twitter? There’s a small Data Studio community and someone might be able to answer that question a lot better than me!

  • Lauren says:

    Hi Michael,

    First, off. Thank you!! In your first image and live data studio dashboard it shows percent of total, not total events. How did you do % of total? Would you be willing to add this to your post πŸ™‚

    Also, is there a way to filter on the page title and a given date? or does the filtering functionality out-rule the date range filter.

    • Michael says:

      Hi Lauren, glad you enjoyed! Any shares on social media always welcome! So since I wrote this post, Data Studio introduced a percent of total option. I’ve added in some info in the article. And you can definitely filter using both the Date Range selector and by clicking on the Page title at the same time. Hope it’s been useful for you!

  • Laurel says:

    πŸ’ƒπŸ’ƒπŸ’ƒπŸ’ƒ Thank you for this!

  • Laurel Natale says:

    What if the event is not showing up in realtime, active users but is showing up under realtime, events?

  • Thank you very much, super useful!
    I can now show my content writers the performances of their work πŸ™‚

  • Laurel Walker Natale says:

    Is it possible to show in google data studio only how many times a specific page achieved a specific scroll depth? Such as the homepage was scrolled 100% 4 times.

Leave a Reply