×

Meta Pixel Scroll Tracking with GTM (Facebook Pixel)

Julian Juenemann

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:

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. 

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

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. 

Creating a custom audience based on Scroll Depth Threshold in Meta 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 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!

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

[wpforms id="9076262" title="false" description="false"]

Julian Juenemann

Julian is the web analytics instructor and the owner of MeasureSchool. He has 10+ years of experience in teaching analytics tools such as Google Analytics, Google Tag Manager and Looker Studio. He founded MeasureSchool to help marketers with the data-driven way of digital marketing.

Related Posts

Subscribe
Notify of
guest
7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jacopo
Jacopo
3 years 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
3 years 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
3 years ago

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

david
david
3 years ago

hi Julian, quick questions. I did exactly what you said. I created a scrolling tag, I checked the debug mode and it shows that the scrolling function is working, checked Facebook pixel helper and in the event manager test, also i saw that the scrolling event is receiving. in the audience creation , I also see an option like you said to create an audience based on scrolling action. which is great. so my question is, 1. do I need to do something else? I tried adding the scrolling event to aggregated events to prioritize the scrolling event. but well.… Read more »

Nirmalkumar S
Nirmalkumar S
2 years ago

This is amazing information man, I really loved it. I have a doubt, which method is preferable or good for installing FB pixel to the Shopify store? either installing It via the FB app inside Shopify or using a google tag manager, hope you understand my query, and looking forward to your reply. Thanks.

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.

Ready to take your digital marketing to the next level?

Subscribe to our newsletter and stay ahead with our latest tips and strategies.