PREVIOUS

Chapter 1 - Time on Page

NEXT

Chapter 3 - Page Depth

Chapter 2 – Scroll depth

Intro

Scroll depth is a powerful metric. It allows you to track how much of your page a visitor scrolled through, helping gauge how involved a user was with a specific page. This metric is especially powerful when used in tandem with other metrics like time on page (more on this below).

Use Case – Product Page Interaction

In many cases, companies have a very lengthy product page, introducing various aspects of their product: Introduction, image gallery, demo video, testimonial, shipping details and more.

Understanding where users drop off on the page is important for several reasons: Analyzing where your page suffers from poor content that loses the user’s interest, but also being able to identify which users have expressed enough interest for the product so that they are eligible for remarketing.

Being able to exclude such audiences, and focus your media on more valuable ones, is a proven tactic to drive significant improvement in both remarketing and lookalike campaigns.

How To Setup

This short guide will help you set up the trigger. If you’d like a shortcut, we’ve created a simple tool that will prepare a downloadable Google Tag Manager container -> Click here

1

Make sure your page is deep enough

For a page to be relevant for scroll depth tracking, it should surely be longer than single “fold”, which is generally considered to be a height of 600px. We recommend measuring only pages with a length of over 2-3 “folds”, approximately 1200-1800px or more.

2

Set up a Scroll Depth trigger in Google Tag Manager

Open GTM and go to the Triggers screen

Click on NEW

Give your trigger a name – “Scroll Depth” for example

Click on the pen to choose trigger

Choose Scroll Depth

Tick the ‘Vertical scroll Depths‘ check box. 

Select the scroll depth at which the event will be fired. A value of 50 percent would mean a user has scrolled 50 percent of the page or more. 

We’ve found the most common and effective tiers to be  25%, 50%, 75% and 90%.
You can add multiple values separated by comma.

Pro tip: You can also set a similar trigger for Element Visibility, to identify users that viewed a specific element on the page, e.g. a video or scrolled all the way down to the footer

Click Save.

3

Enable the Scroll Depth Threshold variable

Go to the Variables screen

In the Built-In Variables section, click on Configure

Scroll all the way down and check the ‘Scroll Depth Threshold’ checkbox

4

Create a Tag to fire the event to Facebook

Go to GTM Click on Tags

Click on NEW

Give your Tag a name, “Facebook Scroll Depth”

In Tag configuration select Custom HTML 

Paste this code into the tag:
<script>fbq(‘trackCustom’, ‘scroll depth {{Scroll Depth Threshold}}%’)</script>

Click on Triggering

Select your previously created trigger, “Scroll Depth”

Click on Save

5

Create a Tag to fire the event to Google Analytics

Go to GTM Click on Tags

Click on NEW

Give your Tag a name, “Google Analytics Scroll Depth”

In Tag configuration select Google Analytics

In Track Type select, “Event”.

In Category enter “scroll depth”

In Action value enter {{Scroll Depth Threshold}}%

In Google Analytics Settings, Use your Google Analytics Settings Variable. If you don’t have one, simply click on Create Variable and enter your Google Analytics ID.

Set the Non-Interaction Hit field to TRUE to avoid a negative impact on Bounce Rate

Click on Triggering

Select your previously created trigger, “Scroll Depth”

Click on Save

5

Publish your container

Click on Submit

Click on Publish

Under name enter ‘Scroll Depth Trigger and Tag’ 

Click ‘Continue’

Done! 

Downloadable GTM container

Here’s your shortcut to glory!

Ready made GTM container fully set up with tags for Google Analytics and Facebook. You can easily customize the settings such as the timer’s interval and limit.

Just download this GTM import file below, unzip it, and follow the instructions.

Log into your GTM account

Choose to the Account and Container in which you want to install Fixel

Navigate to the Admin section

Choose ‘Import Container’

Click ‘Choose container file’ and select the JSON file downloaded

Select the ‘Existing’ workspace option

Change the radio button to ‘Merge’

This is very important so that all your existing configuration carries over to the merged container.

Keep the ‘Overwrite conflicting tags, triggers and variables’ selection

Click ‘Confirm’

Publish the container by clicking ‘Submit’ on the workspace’s main screen