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.

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:

• Setting Up the Base Meta Pixel Tag
• Setting Up a Scroll Trigger
• Creating a Custom Event Tag
• Setting Firing Sequence
• Testing and Debugging
• Creating Facebook Custom Audiences Using Scroll Events

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. 

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. 

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

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. 

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

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

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.

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. 

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. 

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. 

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. 

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

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>

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

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. 

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.

Similarly, if we scroll down, even more, the next Scroll Depth trigger fires, and the Scroll Depth Threshold variable will be 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.

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. 

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. 

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. 

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. 

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.

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. 

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

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. 

Creating Facebook Custom Audiences Using Scroll Events

Next, we’ll create custom audiences in Meta 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. 

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 Meta pixel scroll tracking really with Google Tag Manager and the Meta Pixel.

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

Did you know that you can track interactions with your popups? Check out our detailed guide on popup tracking with GTM.

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