Facebook Pixel Scroll Tracking with GTM

Do you want to track the user engagement and quality of traffic on your web pages?

Using the Facebook Pixel’s scroll tracking, you can learn how far down visitors have scrolled on your page. Based on this, you can also create custom audiences for retargeting or segmenting.

In this guide, we’ll set up a scroll depth trigger with Google Tag Manager and send this data over to the Facebook Pixel

An overview of what we’ll cover:

So let’s dive in!

Setting Up Base Facebook Pixel Tag

First, we’ll set up our base Facebook Pixel Tag. 

Let’s go to our Facebook Ads Manager → All Tools → Pixels

Opening the Pixel from Facebook Ads Manager

Next, click on the Pixel we want to report to and choose Set Up. Next, click on Install Pixel and select Manually install pixel code yourself

Selecting the Manually install pixel code yourself option

This will take us to the pixel code screen. Scroll down and click to copy the code to the clipboard. 

Copying the Pixel code from Facebook Ads Manager

We’ll need this code to create a base Tag for the Facebook Pixel. You need to initiate the base Tag before firing any custom events, so this step is necessary for any Facebook-related tracking in Google Tag Manager

In Google Tag Manager, we’ll create a new Custom HTML Tag for this base Pixel code. 

Creating a new Custom HTML Tag in Google Tag Manager

We’ll paste the Pixel code that we copied from Facebook Ads Manager in this Tag’s HTML field. 

Pasting the Pixel code in Custom HTML Tag in Google Tag Manager

Next, we’ll click under Triggering and select All Pages so that this Tag fires across our whole website.

Selecting All Pages under Triggering to fire the Tag on all pages

Click on the Save button to save the Tag.

Setting Up Scroll Trigger

Next, we need to set up our scroll trigger. To do this, we’ll create a New trigger. 

Then, click under Trigger Configuration and select the Scroll Depth trigger.

Creating a new Scroll Depth trigger in Google Tag Manager

Scroll Depth

There are two options to track scrolling — Vertical Scroll Depths and Horizontal Scroll Depths. In this case, we’ll just select Vertical Scroll Depths. 

Scroll Percentage

Next, we’ll need to decide on what percentages of the page we want to fire the trigger. 

Let’s put 25, 50, and 75. This means that our scroll trigger will fire whenever someone scrolls past 25% of the page, 50% of the page, and 75% of the length of the page. We can use this information later to segment retargeting audiences.

Lastly, we want the trigger to fire on All Pages

Configuring the Scroll Depth trigger in Google Tag Manager for Vertical Scrolls, Percentages and to fire it on All Pages

And Save the trigger. 

Our trigger is thus configured and should fire whenever a user scrolls past those particular percentages of the page. Let’s go to the Preview mode to verify if it fires correctly. 

Open the website and refresh the web page. This should fire the Facebook Base Pixel Tag. 

Facebook Base Pixel fires in Preview mode

We can also double-check this with the Facebook Pixel Helper Google Chrome plugin. It will show the Facebook Pixel Tag that fires along with the Pixel ID. 

Facebook Pixel Helper shows the fired base Tag

Next, let’s scroll down the page to see if our scroll depth trigger fires. If the configuration is correct, the trigger will fire as soon as we pass the 25% mark of the page. 

Scroll Depth trigger fires in the Preview mode of Google Tag Manager when we scroll past the 25% mark

Similarly, we should also be able to see the scroll depth trigger for 50% and 75% marks of the page.

Multiple scroll depth triggers fire in the Preview mode of Google Tag Manager 

Creating Custom Event Tag

The next step is to create a Tag to report these scroll depths to the base Facebook Pixel Tag. We’ll do this using a custom event. 

So let’s go back to our Google Tag Manager account and create a new Custom HTML Tag.

To configure this Tag, we’ll need JavaScript code that sends scroll depths to our base Tag. We’ll also need to give a name to the custom event in our code. Copy and paste the following script into your HTML field:

<script>
  fbq(‘trackCustom’, ‘Scroll’, {depth: {{Scroll Depth Threshold}}})
</script>
JavaScript code to send Scroll Depth Threshold variable to Facebook Pixel base Tag

Then, attach your Scroll Depth trigger to this Tag and Save it.

Attaching the Scroll Depth trigger to custom event Tag

However, this Tag won’t work just yet! First, you need to enable the variable that it calls in the script, Scroll Depth Threshold. This is a built-in variable in GTM that we’ll use to dynamically pull the user’s scroll depth whenever the Tag fires.

So let’s go to Variables → Configure and select Scroll Depth Threshold. 

Enabling the Scroll Depth Threshold variable in Google Tag Manager

Before we use this built-in variable in our Tag, let’s see how our current configuration works. Refresh the web page in Preview mode and scroll down the page. 

This will fire a Scroll Depth trigger. If we click on it and go to the Variables tab, we’ll see the Scroll Depth Threshold variable. And its value will be 25.

Scroll Depth Threshold variable under the Variables tab of Preview mode in Google Tag Manager

Similarly, if we scroll down, even more, the next Scroll Depth trigger fires, and the Scroll Depth Threshold variable will be 50. 

Scroll Depth trigger fires in the Preview mode of Google Tag Manager and the Scroll Depth Threshold variable is 50

We can verify the same for 75% scroll depth.

As long as our variable is reflecting the correct values, our Tag should return the correct scroll depths. 

But there’s one more detail that we need to take care of before we save this Tag!

Setting Firing Sequence

It’s essential that the Facebook Pixel base Tag fires before the scroll depth Tag. This is because the base Tag initializes the Facebook Pixel code, which enables us to send custom events to Facebook. 

For this purpose, we’ll open our scroll depth Tag and go to Advanced Settings to use a feature called Tag Sequencing

Tag Sequencing directs Google Tag Manager to fire another Tag before firing the Facebook Scroll Depth Tag. So we will check the option to Fire a tag before Facebook – Scroll Depth fires.

Using the Tag Sequencing option under the Advanced Settings to Fire a tag before Facebook Scroll Depth Tag fires

The Tag that we want to fire first is the Facebook Pixel base Tag, so click on Select tag and select your base pixel Tag from the list. 

Selecting the Facebook base Pixel Tag to fire before the Facebook Scroll Depth Tag using Tag Sequencing in Google Tag Manager

We’ll also check the box – Don’t fire Facebook – Scroll Depth if Facebook – Base Pixel fails or is paused. The scroll depth Tag is dependent on the base Pixel Tag, so if the base Pixel Tag fails, we don’t want the scroll depth Tag to fire. 

Checking the option of Don’t fire Facebook - Scroll Depth if Facebook - Base Pixel fails or is paused in Google Tag Manager

Let’s Save this Tag. 

We’re almost done! But before we finish, we need to make sure that the Facebook Pixel base Tag only fires once per page. Otherwise, it would fire when the page loads and every time a Facebook scroll depth trigger fires. 

To do this, open the Facebook Pixel base Tag and click on Advanced Settings. Under Tag firing options, we’ll select Once per page

Setting the Tag Firing options to fire Once per page in Google Tag Manager

This way, Facebook Pixel base Tag will not fire again with the Facebook Scroll Depth Tag.

Testing and Debugging

To verify that our Facebook Pixel scroll tracking is working correctly, let’s go into the Preview mode and refresh our web page.

So first of all, our Facebook Pixel base Tag will fire with the page load. 

Facebook Base Pixel Tag fires with the page load in the preview mode of Google Tag Manager

Next, the Facebook Scroll Depth Tag will fire once we start scrolling. As we scroll down to 25% and 50% of the length of the page, the Tag will fire twice — once for each scroll depth.

Facebook Scroll Depth Tag fires twice when we reach 50% of the length of the page

We can also go to the Summary tab to see which Tags have fired and how many times. In this example, the Facebook Pixel base Tag should fire only once, even if the scroll depth Tag fires multiple times. 

Summary of all the Tags fired in the Preview mode of Google Tag Manager

Similarly, we can also verify using Facebook Pixel Helper. We’ll see two Scroll events fired at the depths of 50 and 25. 

Facebook Pixel Helper shows the Page View and Scroll events fired

Another way to look at the depth values is by clicking on the trigger in the debug console and clicking on the Tag to see the Tag properties. 

So with this, we know that our Tags are firing correctly. 

We should then go to the Facebook Ads interface to verify that these events are being received by Facebook. To do this, let’s go to Test Events.

This will show the events that are fired in real-time. You’ll need to refresh the page again and scroll down for the events to fire.

If you scroll down to the bottom of the page, you’ll see four events in the interface — one page view and three custom events. If we click on any of these events, we can see event parameters and the URL of the event. 

Real-time events received by Facebook Pixel

Creating Facebook Custom Audiences Using Scroll Events

Next, we’ll create custom audiences in Facebook Pixel using this event data. To do this, click on Create Audience → Custom Audience

On the panel, instead of All website visitors, we’ll select Scroll. We can also set the number of days for which we want people to remain in our audience. 

To refine it further, click on Refine by and select URL/Parameter. This way we can filter our custom audiences based on Scroll Depth Threshold. 

For our example, let’s set it to greater than 49 so that it includes all visitors who have scrolled to 50% of the page or below. 

Creating a custom audience based on Scroll Depth Threshold in Facebook Pixel

Lastly, give a name to the custom audience and click on Create Audience.

This will take your marketing efforts to the next level by retargeting audiences or by focused targeting using segmentation. 

Summary

So that’s it! This is how you can set up Facebook scroll depth tracking really with Google Tag Manager and the Facebook Pixel.

This is a great way to track user engagement with your website. And you can also use that data to retarget interested visitors or to segment them for other marketing campaigns.

You can also take this a step further by building a Scroll + Timer trigger with Google Tag Manager. This will track the time a user spends on your website along with the scroll depth tracking.

Have you set up scroll tracking on your website? What other tracking options do you use to measure user engagement? Let us know in the comments below!

JOIN US!

Master Data & Analytics with Measuremasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
guest
5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jacopo
Jacopo
1 year ago

Hi Julian. The tutorial was amazing, one of the most precious i can find on internet.
But i’ve got some issues, i don’t know why.

I’ve no problem til the end. I can configure custom audience with the depth parameters, but when i stop debuggin, trying re-opening the website, through the pixel helper i can see that the scroll event doesn’t trigger.

I don’t know if it’s working properly or not.

BIbek
BIbek
8 months ago

Hi Julian, this is the tag that I am using for depth scroll
<script>
 fbq(‘trackCustom’,’Scroll’,{{Scroll Depth Threshold}});
</script> 

The tag fires fine, but while using Pixel helper, I can’t see the scroll depth,
Nor can I create a custom event based on scroll depth.

BIbek
BIbek
8 months ago

Sorry man, I figured it out. Thanks for the valuable content.

Blog Categories

Join 30,000+ marketers getting exclusive resources and our latest content!

now it's time to

Start measuring like a master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.