Understanding how far users saw your content, whether it'd be article depth read or product tiles seen, are critical information in knowing who was engaged and how much of the content was engaged.

This article will not go through the initial setup steps of Google Tag Manger (GTM) and Google Analytics (GA). The article on initial setup can be found here.

This Scroll Tracking article is a build-on after GTM and GA have already been setup on your site. The following 5 steps will show you how to setup the tracking in GTM and how the end result data will look like in GA.

1. Setup Variables in Google Tag Manager

In the "Variable" section of GTM, enable Scroll Depth Threshold, Scroll Depth Units, Scroll Direction within "Built-In Variables".

In a previous article posted, we talked about the setup of GTM and the creation of "Google Analytics Settings" Variable, we can reuse this variable for the scroll tracking tag.

2. Setup Trigger in Google Tag Manager

The next item we need is a scroll tracking trigger. Add in Trigger Type of "Scroll Depth" - in below screen capture the configuration is set to Vertical Scrolls, and we are firing the hits at 30%, 40%, 50%... to 100% of the page seen.

The trigger imaged below also has a configuration filter to only fire the hits on the Page Path that contains "journal" - as I am only interested in tracking articles read. However, you can leave this filter out and select "All Pages" - this will tracking scroll hits on all pages based on the scroll depths you set.

3. Create the Tag in Google Tag Manager

Create the tag by selecting Tag Type of "Google Analytics: Universal Analytics". Tracking Type of "Event" - the Event Category I have it named "Page Scroll" and the Event Action I have it set to capture the percent scroll hits on the journal pages (the data value will come back as 30, 40, 50, etc. You can use the Built-In Variable of "Scroll Depth Threshold" to capture this data under Event Action.

Add in the "Google Analytics Settings" Variable we created from the GTM initial setup - this will tell GTM which GA account/property to send the data to. Add the Trigger that we created in step 2 of this article - this will tell GTM when to fire the tag.

4. Quality Assurance (QA) Testing with Google Tag Manager Debugger

Save the Tag and click "Preview" at the top right of the GTM container, refresh your website's page. You should now be able to see the scroll tracking event firing under "Tags Fired On This Event".

The Scroll Tracking event fired in the image below is the 30% of page seen. If you scroll down on the page, the other event hits for 40%, 50%, etc. - will appear on the hit fired list.

Publish the GTM container if QA testing looks good.

5. Pulling the Data in Google Analytics

In your GA account, setup a Custom Report - navigate to "Customization" > "Custom Reports". Insert Dimensions of Event Category, Event Action, Page Path (or Page). Insert Metrics of Total Events (metrics of User or Session is also viable here to understand unique user impression or unique percent viewed per session).

Based on the data below, in a specified date range in our Google Analytics account, we are looking at 4 total hits of 30% read on the article, 3 hits on 40% read on the article. The maximum percent article read was 60%.