Scroll Tracking with Facebook Pixel in Google Tag Manager

Introduction

As a website owner, the data about how far your users scroll down your pages can tell you a lot about their behavior and also the efficiency of the website. Monitoring this data can help you with improving your content and as a result, increasing profits and attracting more customers.

In this tutorial, I am going to show you how to set up a scroll tracking using Google Tag Manager and Facebook Pixel to create audiences from users who have scrolled down our pages to various extents, such as below 50% or more than that.

1. Set Up the Necessary Tags and Triggers

The first element we need is the base Facebook Pixel ID. Head over to the Facebook Ads Manager and open the All Tools > Pixelsmenu as shown below.

In the new window, click on the pixels’ name.

Now click on Set Up, and then Install Pixel.

In the popped up menu, choose Manually install pixel code yourself.

Then, copy the Pixel code to the clipboard.

Now we need to open Google Tag Manager and create a new tag. Don’t forget that before firing any custom event to a Facebook Pixel, we need to have the Facebook Base Pixel already initiated.

First click Tags and then New.

Assign a name to the tag and then click on the Tag Configuration box.

Then, choose Custom HTML and paste the previously copied Pixel code in the window that appears.

Since we want this tag to be launched on all pages, we should select the All pages trigger from the Triggering box.

Now that we have successfully created our base tag, it’s time to make the trigger. 

Give the tag an optional name and then click on the Trigger Configuration box.

Since we need to measure the user’s scrolls, we should choose the Scroll Depth option.

This is going to be a vertical scroll, so we choose this option, and enter the percentages we

want the trigger to fire on (the numbers should be separated by commas). Here I have entered 25, 50, and 75, but you can choose other numbers as you prefer. We also want the trigger to fire on all pages. 

We can now enter the preview mode to verify that our scroll depth trigger and Facebook Pixel are firing properly.

Now let’s head over to the website and refresh the page to check the functionality of tags. As you can see below, the base Facebook tag is fired. You can even double-check this by using the Facebook Pixel Helper Chrome extension.

While keeping an eye on the Tag Manager Preview panel, we slowly scroll down the page to see how the created triggers perform. After passing 25%, 50%, and 75% of the page, we can see that the triggers have fired in turns.

2. Report the Scroll Activity to Facebook Pixel Through a Custom Event

Now let’s create a tag for reporting this scrolling activity to the Facebook Pixel through a custom event.

Get back to Google Tag Manager and create a new Custom HTML tag as described earlier. This time, we need to enter a custom code.

This is the code we need to fire our 5-second Facebook Pixel event for a 25% scroll.

<script>

 fbq(‘trackCustom’, ‘Scroll’,{depth: 25});

</script>

‍

Don’t forget that measuring the depth of scrolls is not one of the Facebook Pixel’s standard events, and therefore we should give it an optional name. Also, we should set the scroll depth to be populated dynamically.

The problem with using a static value is that it will always be the same, whereas we actually want it to send the exact percentage of the scroll depth to Facebook each time the scroll depth trigger fires. For this purpose, we need to use one of Google Tag Manager’s built-in variables.

 But first, click on the Triggering box and select Scroll Depth and save the tag.

Next, we need to create a variable that can be used to pass on the actual scroll depth to the tag. Luckily in Google Tag Manager, there is a built-in variable which is called Scroll Depth Threshold. You can find and activate it by simply clicking on the Configure button.

Before moving on to the next step and using the Scroll Depth Threshold variable in our tag, let’s refresh the page and enter the preview mode to see how it works.

Head back to your website, reload the page, and slowly scroll down the page to check the trigger. As you see below, after passing 25%, the first trigger appears. In order to see the variable’s actual value, click on the Variables tab.

You can likewise check the other triggers by scrolling down further and passing the depths we have already entered in our configurations. After verifying that the scroll depth threshold variable is holding proper values, we can finish setting up our tag within the Google Tag Manager interface.

In order to do so, we should change the static value in our code with the depth threshold variable we have just enabled.

3. Final Steps on Google Tag Manager

Before saving the tag and seeing how it functions, we should take care of some final details. We need to make sure that our Facebook Base Pixel always activates before the Facebook scroll depth tag. It is the tag that initializes the Facebook Pixel and enables us to send custom events to Facebook just with a single line of code.

For this purpose, we should click on the Advanced Settings and use a feature called Tag Sequencing.

First, enable Fire a tag before Facebook - Scroll Depth fires, and select the Facebook - Base Pixel tag by clicking on the Setup Tag.

Also, we want Google Tag Manager not to fire this tag if the Facebook Base Pixel tag fails or is paused. The reason behind that is because if the base Pixel tag fails, the scroll depth tag will not function properly anyway. 

Let’s check the box and click on the Save button.

Moreover, we need to make sure that the Facebook Base Pixel only fires one time per page. Otherwise, it would fire once when the page loads, and also every time that a Facebook scroll depth trigger activates.

To do so, first, select the Facebook Base Pixel tag and click on the Advanced Settings option.

Next, in Tag firing options, let’s change it to Once per page and save it.

Now let’s preview the container again and check everything in action. Head back to the website and refresh the page. As you can see below, the Facebook Base Pixel has fired once, but the Facebook scroll depth tag is not activated yet, which is expected. 

After scrolling down further and passing 50%, we can see that the Facebook scroll depth tags have been fired two times. Clicking on them will show us the details.

The results can also be verified using the Facebook Pixel Helper Chrome extension.

Another way of verification is to click on the trigger and then select the tag itself to view the properties. 

4. Verify Events on Facebook Ads Interface

To verify that Facebook is receiving the event fired through Google Tag Manager, first open Facebook Ads interface and click on Test events.

Here, you can see the incoming events received by Facebook in real-time.

Let’s refresh the website and scroll down to verify that the results appear here as well.

You can likewise see the details of each event by clicking on it.

5. Create Audiences

Now that we know Facebook is receiving these events, we can use them to create custom audiences. Click on Create Audience, and Custom Audience.

In the new window, instead of All website visitors, we need to use Scroll. 

You can  choose your preferred duration for someone to stay part of this audience and you can also refine it for more details.

Once you are finished setting the desired details and assigning a name to it, click on Create Audience to save the changes.

Now everything is set up. We can successfully use the newly created audiences for retargeting or segmentation purposes.