April 1, 2020
Facebook Pixel Scroll Tracking with GTM

Facebook Pixel Scroll Tracking with GTM


Scrolling down the page can tell us a lot
about our website visitors behavior. In today’s video, Ahmad is going to show you how you
can utilize the scroll depth trigger of Google Tag Manager to capture the value of how far
a user went down your page, then send this data over to the Facebook Pixel. So you’ll
be able to create an audience of that of users, for example, who only saw 50% of the page
or scrolled further than 75% of your website. Sounds like a plan. Well, we’ve got lots to
cover, so Ahmad take it away. Thanks, Julian. Ahmad here with another Google Tag Manager
tutorial. And in this video, I’m going to show you how to set up a scroll tracking on
this page, I reported to Facebook Ads for your Facebook pixels custom events. We’re
going to use Google Tag Manager. So let’s head over to Google Tag Manager and set up
the tags and triggers necessary for this. So first, we need to set up our base Facebook
Pixel tag. For this purpose. Let’s head over to our Facebook Ad manager. Open this menu,
go to all tools, pixels. And find a pixel we’re going to report to. Then click on the
pixels name and choose set up. Here in install pixel, we need to choose manually install
pixel code yourself, scroll down and click to copy the code to the clipboard. That’s
it here. Now let’s head back to Google Tag Manager,
tags and create a new tag. Because before we fire any custom event to a facebook pixel,
we need to have the base pixel already initiated. Let’s give it a name. Click on tag configuration
and choose custom HTML. Now we can paste the pixel code here. We want this tag to fire
on all pages. So we need to click here. Choose all pages and save the tag. Next, we need
to set up our scroll trigger. Let’s navigate to triggers and create a new trigger. Let’s
give it a name. And click on trigger configuration and choose a scroll depth. Here we need to
choose what kind of scroll do we want to track, vertical scrolling or horizontal scrolling.
In this case, we want where to go. And then we have to decide on what percentages do we
want our school trigger to fire. Let’s put 25, 50 and 75 here. This means that our scroll
trigger will fire whenever someone scrolls pass 25% of the page, 50% of the page, and
75% off the length of the page. Finally, we want the trigger to fire on all pages. So
we don’t need to touch anything down here. And we can save our trigger. Let’s preview
the container to verify that our scroll depth trigger and facebook pixel are firing properly.
Now that our container is in preview mode, let’s go to our website and refresh the page.
So far, so good, the page has loaded and we can see that our Facebook base pixel has fired
once. We can also double-check with facebook pixel helper Chrome plugin and verify that
the pixel has been fired. We can click on this and we can see that the facebook pixel
with this pixel ID has actually been fired. Okay, now let’s close this and see what happens
when we scroll down the page. We need to keep our eyes at this pace. Because when a trigger
fires, we should be able to see the triggers title here. Let’s scroll down. Okay, so as
soon as we pass 25% mark of the page, we can see here that our first school depth trigger
has fired. Now let’s continue scrolling down and we should be able to see the scroll depth
trigger for 50% and 75% also being fired. So far, so good, our scroll depth trigger
and Facebook base pixels are firing properly. Next step would be to create a tag to report
this scroll depth triggers to this facebook pixel through a custom event. Let’s head over
to Google Tag Manager again, click on tags and create a new tag. Let’s give our tag a title. And for this one,
we also need to use a custom HTML tag. To report custom events to the Facebook pixel,
we need to use some JavaScript here. We start with FBQ and then track custom. And then we
need to define a name for our event. And this is something that we need to decide because
this is not one of the Facebook pixels standard events. I’m going to name it to scroll. And
then we need to use curly brackets to pass the actual scroll depth. For example, 25.
But the problem of using a static value here is that it will always be the same, it will
always be 25%. But what we actually want is to send the exact percentage of the scroll
depth to Facebook each time the scroll depth trigger fires. And for this, we need to use
one of the Google Tag Manager variables. So let’s keep the tag like this for now. And
just apply the trigger, which is our scroll depth. And save our tag while it’s in progress.
And create a variable that we can use to pass on the actual scroll depth to the tech. Luckily,
for in Google Tag Manager, there is a built-in variable that is towards the actual is called
depth threshold, we just need to click Configure, find it and enable it. That’s it. Now before
we move to the next step, and use this call depth threshold in our tag, let’s refresh
the preview and see how it works. You can refresh the page. Start from above the fold,
and slowly scroll down. So here is our first scroll depth tracker. If we click on it and
go to variables tab, we can see the actual value for school depth threshold, which is
here. And as we expected, it is set to 25. Now if we scroll down even more, and the next
call depth trigger fires, we can see that this scroll depth threshold for this trigger
is 50%. And the same goes for the last one which is 75%. Now that we verified that our
scroll depth threshold variable is holding proper values, let’s go back to Google Tag
Manager and finish setting up our tag. Now here, instead of using a static value of 25,
we can use this scroll depth threshold variable that we just enabled. So let’s review one
more time. When a scroll depth trigger fires. Google Tag Manager fires this tag, and it
will automatically replace this value with the actual value of the variable and that’s
exactly what we want. Now before we save our tag and see how it works, we need to take
care of a finer detail. And that is we need to make sure that our Facebook base pixel
always fires before our Facebook scroll depth tag. Because that one is the tag that initializes
the facebook pixel and will enable us to send custom events to Facebook just with a single
line of code like this. For this purpose, use advanced settings and use a feature called
tag sequencing. In this case, I’m going to configure Google Tag Manager to fire a tag
before Facebook scroll depth fires. And that tag would be our Facebook base pixel tag.
And we also want to ask Google Tag Manager not to fire this tag if the Facebook base
pixel tag fails or its past because if this tag fails this scroll depth tag which is dependent
on this tag will not do anything anyway. Okay, so let’s save this and take care of
one final detail. And that is to ensure that Facebook base pixel only fires one time per
page. Because otherwise, it would fire once when the page loads. And also, every time
that a Facebook scroll depth trigger is going to fire. To do this we need to facebook pixel
tag. Click on Add on setting and under tag firing
options instead of once per event which means once on page load and once before every Facebook
scroll tag that is going to fire, we need to change it to once per page. So in this
case, if our Facebook base pixel has already fired on page load, which is like 99% of the
time, then it would not fire again before any Facebook scroll depths tag. Now it’s time
to preview the container again and see everything in action. Okay, let’s head over to the website. Scroll up. Refresh the page. Let’s verify
every single step by step. So first of all, our Facebook base pixel has fired once but
our Facebook scroll depth tag has not fired yet, which is expected. Now let’s scroll down.
Okay, so we’ve already passed 25 and 50%. And we can see that Facebook scroll depth
tag has fired two times. If we click on the trigger events, we can see that the tag has
fired once in this trigger, and again in this trigger. It has not fired on page view, not
fired or dom ready, not fired, or Windows. It only fires in scroll depth and scroll depth.
And if we click on summary, we can verify that it’s been fired two times. And because
we’ve set our Facebook base pixel to fire just once per page, it has fired just one
time. Otherwise, it would fire three times already. Let’s also verify why our facebook
pixel helper. And we can see the to scroll events have been fired. We can click here
to see the details. This one has fired. This one is the one that’s been fired under depths
of 50. This one is the one that’s been fired under the 50%. And this one has been fired
and 25%. If we close them and scroll down, even more, we should have another one again,
and another one here which shows the scroll depth of 75%. Another way to verify the actual
values that have been using the tags is to click on the trigger and then click on the
tag itself to view the tag properties. Okay, so now that we have created these tags, and
verify that they’re firing properly, let’s head over to Facebook ads interface and verify
that these events are being received by Facebook as well. Okay, so let’s click on test events.
And here, we can see the events that are coming and being received by Facebook in real-time.
So let’s refresh the page. Scroll down to the bottom of the page. And see if the events that we are sending
from here are being received by Facebook properly. So here we can see the three events have been
fired. Three have been received by Facebook, as we see in facebook pixel helper anyway.
And now let’s head over facebook pixel. And here we can see these events in real-time.
One page view and three custom events. If we click on any of these events, we can see
some more info, like the URL of this event. We can see the event parameters as well. Now
that Facebook is receiving these events, we can use them to create custom audiences. We
can do it by clicking custom audience, create a new custom audience. And instead of all
website visitors, you’re going to use our new event scroll which is already appearing
here. Set how many days do we want people to remain in our audience and even refine
it by the actual scroll depth threshold. We can set the depths to be greater than 49 which
includes all the people have a scroll down either 50% or 75%, and will ignore those who
just scroll down 25% or less than 45% down the page. Then we just need to give our audience
a name. And created it. In this video, we’ve seen how to track scroll
depth on a page through Google Tag Manager and report it to facebook pixel to a custom
events and then create a custom audience from people who are scrolling down more than a
threshold that we defined. So we can use an audience for retargeting or segmentation purposes.
This is Ahmad and thank you for watching. Bye. All right, so there you have it. This is how
you can create full scroll depth tracking really with the facebook pixel. A little bit
help of Google Tag Manager and then you will be able to create your audience based on this
dynamic data that we now fed into the Facebook pixel. Isn’t great? Well, if you have any
questions then please let us know in the comments down below. We also have some links that could
be helpful to you in the description. So check them out as well. And if you haven’t yet,
then please consider subscribing to our channel because we bring you new videos just like
this one every week. Now my name is Julian. see on the next one.

15 thoughts on “Facebook Pixel Scroll Tracking with GTM

  1. Do you still need to create the base tag if we already installed the pixel previously in our website?

    If so, why? Wouldn't this cause conflict between the two? 🤔

  2. Hi

    great vidéo

    when I run ads from different platforms, how GTM can know from which source came this traffic and base on that it fires the right tag

    let's assume I running ads from facebook, GTM could recognize is this traffic came from facebook and fire the pixel same things with google ads and Pinterest…ect.if it couldn't what I should do..

  3. I’m a new subscriber, which videos of yours would you say are relevant to product management? There might be a lot of overlap with marketing but which would you say at more PM focused?

  4. What do you see the most important tags for business to have setup on there website to get the best information?

  5. Hi
    We build an application on Mean stack and wanted to implement login with Facebook option on the platform.
    So we found the code snippet in the facebook developers' account and they are suggesting to paste the code in each and every page.
    Please suggest if we can do this through google tag manager as we already have GTM installed in all the pages.

  6. I prefer to set the % direct on the tag (not via parameters). This way you can create an Custom Conversion and see on you Ads Manager reports how many times this event triggered for each ad.

    Great video tought.

Leave a Reply

Your email address will not be published. Required fields are marked *