Facebook Pixel Scroll Tracking with GTM

Google Tag Managers Scroll depth tracking is great for discovering how much of your page is viewed by the user. To make this information actionable we can send this information to the Facebook Pixel too. In this video Ahmad (from Siavak.com) is going to show us how.

? Links:

Facebook Pixel Doc: https://developers.facebook.com/docs/facebook-pixel/

Scroll Depth Trigger: https://www.youtube.com/watch?v=mcQdCl-B3lw

Combine Scroll + Timer Trigger: https://youtu.be/71pCKRouabc

? Learn more from Measureschool: https://measureschool.com/products

? GTM Copy Paste Extention https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

?Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

? Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

? Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

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.


Leave a Comment