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.