Tracking Scrolldepth using GTM - Facebook Pixel

Scroll depth has been around for some time now. A lot of analysts have been using the fantastic luna-scroll-tracking.json container developed by the amazing folks back at LunaMetrics for some time. Google Tag Manager (GTM) just recently came up with their own trigger called Scroll Depth. This allows anyone to easily send scroll tracking data to the marketing vendor of your choice (Google Analytics, Facebook etc).

In general, collecting data about users scrolling behavior is very powerful. This data is commonly sent to Google Analytics however with Facebook being more and more of an important player and as marketing spending is increasing towards the Facebook platform it would make practical sense to have that data available within the Facebook interface as well.

Due to the newly released scroll Tracking functionality embedded into the Google Tag Manager framework, I have come up with a simple way of sending relevant Scrolling data to Facebook.

Since you are reading this article, I take into account that you already have GTM installed on your website, as well as your Facebook Pixel set up.

Let's begin!

First of all, for this to work you have to check scrolling to "on". This can be done under the variables section, then "configure" and then under "scrolling"

After you have enabled scrolling in GTM, navigate to triggers and create a new trigger. Scroll down and select "scroll depth". Before saving the scroll depth trigger there is a couple of things to be aware of - let's elaborate:

Vertical/Horizontal scrolling: You would most likely choose vertical in this case since most websites are built on the functionality that the end-user will scroll downwards.

Percentage /pixels: Here you can set when you want your tag to fire. Fire on a set percentage of the total screen or a set pixel amount? Most likely you would choose percentage due to that this works best across platforms - Mobile/desktop etc.

All Pages/ Some pages: This is what is called the filter part of a trigger. When deploying scroll tracking you should be careful not deploying it on all pages. Deploying tags with an intent in mind is a good rule of thumb. Why are you deploying Scroll Tracking? What are you going to use the scroll data for? Which pages should scroll tracking be deployed on? These are questions that should be asked before deploying. I often recommend having the Scroll Tracking on the landing page if it is a typical UX/UI design page like for instance: Teamtreehouse or Grammarly. Blog posts or the blog section of your site is a must. If your page is really short, I would maybe only set a 90% or a 100% (ScrollToButtom) trigger. To track people that actually scrolled to the buttom of the page.

I have chosen to set 25, 50, 75, 100 percent and fire on all pages for the sake of this example.

Furthermore, enable the debug and preview mode (preview) in GTM. Then navigate to your website. Scroll carefully down and wait for the first event to fire. Inspect the event, by clicking it and then inspect dataLayer.

The variable called gtm.scrollThreshold is what you would want to pull out of the dataLayer and into your tag. This contains the percentage scrolled by the end user.

These are key value pairs. So to pull the value out of the key you would have to make a data layer variable in GTM. So let's do this.

When in GTM click variables and then scroll all the way down to user-defined variables. Click new, then name your variable appropriately.

Enter your key name: gtm.scrollThreshold into the DataLayer Variable field. Remember to keep in mind that keys are case sensitive so it is important to use capital letters appropriately.

Moreover, navigate to tags. Create a new tag and choose custom HTML. Paste the following code into the custom HTML:

<script>
fbq('track', 'ScrollTracking{{dlv-ScrollTracking}}', {
	scrollThreshold: '{{dlv-ScrollTracking}}',
	
});
</script>

Let's very quickly break down what this script is doing: It is sending the event called ScrollTracking (You can call this whatever you want) to Facebook. This event consists of pulling out the dataLayer variable containing the value of the scroll percentage. The reason I have set 'ScrollTracking{{dlv-ScrollThreshold}}' is so that the event key (name) is containing the value of that event. So in Facebook, each event will be showing the percentage scrolled as well as the event name. Like: ScrollTracking75 for example. This is actually not the way I prefer to do it, I will show the way I prefer to do it at the end of this blog post. But I want to illustrate both ways, so you can decide what works best for your cooperations needs.

When everything looks like the screenshot below, save the tag:

Refresh the preview and debug and head to your website. Scroll down to the buttom of your site and see what happens:

We can see that there have been four events firing, each firing at the 25, 50, 75, 100 percent mark. The parameter value sent with the Facebook tag will be equal to the percentage scrolled: Let's check and see if Facebook is retrieving and sending the right parameter value

It for sure is! That's great. Now, how do utilize the parameter data within the Facebook Business Manager?

Go to Facebook Business Manager, under audiences, you can create a custom audience. Select one of the events if you wanted to target for instance anyone who scrolled 100% or you can pick all four to target everyone that did some scroll action on your site.

The other way of doing it. Grouping it and using parameters to craft your preferred audience.

In addition to the method illustrated above, you can send everything with the same event name and work with parameters to filter out your preferred audience.

If you want to send everything with the same event name and use parameters to create audiences you can use this script instead:

<script>
fbq('track', 'ScrollTracking', {
	scrollThreshold: '{{dlv-ScrollTracking}}',
	
});
</script>

Then each event won't be named with the percentage scrolled as we did above. In the Facebook Business Manager, they will all be grouped and you can set a certain parameter to create your audience.

let's look at how you can set a parameter on your scroll tracking audience. First, navigate to pixels in your Facebook Business Manager. Then click "create custom audience"

Choose ScrollTracking as an event, set the decided time frame. Instead of an URL, choose ScrollThreshold ad a parameter, choose is greater than or equal to and pick for instance 50 (percent) if you want to make an audience of everyone who scrolled 50, 75 and 100 percent of your site.

This is indeed a strong audience, who has a genuine interest in your brand or product.

I hope this article helped you to enable Scroll Depth Tracking on your site (because that's probably why you're reading this). But I also hope it really opened your eyes to the Facebook audience section and the endless opportunities with Google Tag Manager.