Page Scroll Depth Tracking

Please note that this article about setting up page scroll depth tracking makes the assumption that you have a Google Tag Manager account that manages the deployment of your Google Analytics code from within a GTM container.

Google Analytics out-the-box functionality provides some great insights into the performance of your website. Time-on-page is a useful metric, but it doesn’t reveal if a user actually spent several minutes interacting with the content as intended or if they got up to make a cup of coffee for several minutes instead!

Do you have a lengthy article, videos, downloadable PDF documents or outbound links to other useful resources? The standard visit and engagement metrics can’t provide insight into whether these assets were interacted with.

Using Google Tag Manager you can implement a series of tracking tags that will pass user interaction variables to Google Analytics to provide rich insight into how consumers are using your content. This can help content managers and marketers use analytics to develop better content for visitors, so it is worth investing time setting them up.

One of the most popular interaction events to track is page scroll depth – how far down the page a user goes before moving to a new page or leaving the site. In order to have this functionality available in your Google Analytics account, you will need to follow these configuration steps.

Activate Scrolling Variables

The first action you will need to take to set-up page scroll depth tracking is to activate a set of scrolling variables. Log into your Google Tag Manager account and click on ‘Variables’ on the left side navigation bar and then click on the ‘Configure’ button in the top right corner of the ‘Built-In Variables’ table.

Towards the bottom of the list of variables is a section called ‘Scrolling’. Tick the three checkboxes for:

  • Scroll Depth Threshold
  • Scroll Depth Units
  • Scroll Direction

Confirm that you can see these in the list of variables being tracked.

Create a Trigger

Now you have activated the scrolling variables to be recorded, the second step in setting up page scroll depth tracking is to set a trigger. The trigger listens for the scrolling events to occur so it can approve the tag firing and sending the depth information for that page to Google Analytics.

In order to create the necessary trigger click ‘Triggers’ in the left side navigation and click the blue ‘New’ button in the upper right corner.

Name your trigger ‘Page Scroll Depth’ and click on ‘Trigger Configuration’. For ‘Trigger Type’ click on ‘Scroll Depth’ under the ‘User Engagement’ section. Check the box ‘Vertical Scroll Depth’ and click on the ‘Percentage’ radio button (not pixels).

In the text box you will need to define the thresholds for scrolling. We recommend 25,50,75,100 percent (don’t add a ‘%’ symbol). Leave the ‘Horizontal Scroll Depths’ box unchecked. On the ‘Enable this trigger on’ drop-down list select ‘Window Load (gtm.load)’. For ‘This trigger fires on’ select ‘All Pages’. Click save to complete the set-up of the trigger.

Page Scroll Depth trigger configuration

Create a Tag

The final step is to create a tag. The tag will capture the page scroll depth data from the event variables and pass them to your Google Analytics account. To set-up the tag click on the ‘Tags’ option on the left side navigation panel and click the ‘New’ button.

Name the tag (e.g. ‘Page Scroll Depth Tag’) and click into the ‘Tag Configuration’ area. Select the tag type as ‘Google Analytics – Universal Analytics’ and the track type should be selected as an ‘Event’.

The next set of inputs will be used by Google Analytics to categorise the event in their reports. For the first field ‘Category’ enter ‘Page Scroll Depth’ and in ‘Action’ box enter {{SCROLL DEPTH THRESHOLD}} then add % after the variable.

Ensure that the ‘Non-Interactive Hit’ dropdown is set to ‘TRUE’ then for ‘Google Analytics Settings’ enter your ID (or ID variable if you have one set-up) and click ‘Save’.

Page Scroll Depth tag configuration

Previewing the Tag

Before publishing the changes you have made to your Google Tag Manager account you need to preview the set-up and confirm that the configuration is correct. Do this by clicking on ‘Preview’ in the upper right corner.

Now open or refresh your website in a new browser tab and this will open a panel at the bottom of the browser window showing the events that have loaded in the ‘Summary’ list on the left side.

You can see the tags that have already fired and those that are dormant waiting to be authorised to fire if appropriate. The Page Scroll Depth tag might have already fired if the page is short – scroll down if not to make sure that it fires.

In the list of events on the left side look for the ‘Scroll Depth’ event and click on it and choose the ‘Variables’ tab at the top. Scrolling down the list of variables you should be able to see the ‘Scroll Depth Threshold’ data layer variable initially containing the number 25 – the first threshold we set in the trigger.

Page Scroll Depth variables

You can now publish the changes to you Google Tag Manager account and this will start capturing page scroll depth information from genuine user sessions.

Confirm in Google Analytics

Open Google Analytics and navigate to ‘Realtime’ and the sub-section ‘Events’. Change from ‘Active Users’ to ‘Events (Last 30 min). You should see the ‘Event Category’ showing ‘Page Scroll Depth’ and the ‘Event Action’ showing the first threshold ‘25%’. The following day you will see this information in the reports under ‘Behaviour’ and ‘Events’.

How to Use in Reports

Besides seeing the aggregate performance of scroll depth in the ‘Behaviour’ then ‘Events’ report – you can create custom segments to analyse performance against other segments or all users.

Creating a Page Scroll Depth Segment

Create the 25% scroll depth segment by clicking ‘+ Add Segment’ then click the red button ‘+ New Segment’ then under the ‘Advanced’ option on the left menu choose the ‘Conditions’ option. Name the segment ‘25% Scroll Depth’ and under the ‘Ad Content’ drop down select ‘Event Action’. Leave the middle drop down as ‘Contains’ and into the text box type 25% and click ‘Save’.

You have now created a 25% scroll depth segment that can be selected against all reports.