Search
Close this search box.

Meta Pixel Scroll Tracking with GTM (Facebook Pixel)

Last Modified on April 22, 2024

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

Using Meta Pixel 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.

GTM For Beginners

Sign up to the FREE GTM for Beginners Course...

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

An overview of what we’ll cover:

So let’s dive in!

How to Set Up Meta Pixel Scroll Tracking

  1. Set up the base meta pixel tag
  2. Set up a scroll trigger
  3. Create a custom event tag
  4. Set up a firing sequence
  5. Create Facebook custom audiences using scroll events (optional)

Setting Up the Base Meta Pixel Tag

First, we’ll set up our base Meta 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 Meta 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. 

Meta Base Pixel fires in Preview mode

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

Meta Pixel Helper shows the fired base Tag

Next, let’s scroll down the page to see if our scroll depth triggers fires. If the configuration is correct, the trigger will fire as soon as we pass the 25% mark on 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 Meta 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 Meta 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 Meta Pixel base Tag fires before the scroll depth Tag. This is because the base Tag initializes the Meta 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 Meta Pixel base Tag, so click on Select tag and select your base pixel Tag from the list. 

Selecting the Meta 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 Meta - 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 Meta 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 Meta 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, the Meta Pixel base Tag will not fire again with the Facebook Scroll Depth Tag.

🚨 Note: You can also Delay Meta Pixel with GTM to eliminate bounced users and help you build a higher-quality audience in your Facebook Ads.

Testing and Debugging

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

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

Meta 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 Meta 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 Meta Pixel Helper. We’ll see two Scroll events fired at the depths of 50 and 25.