Creating Custom Facebook Events with Google Tag Manager

Creating Custom Facebook Events with Google Tag Manager


There are many ways marketers can use Facebook as an advertising platform. It can drive new users with interest based audiences and it can recapture users who have interacted with their site already, among others. For Facebook to be able to pull in the actions of the users, however, you need to track them, which is what implementing custom Facebook events with Google Tag Manager can do.

Facebook Pixel

The first thing you need is the Facebook pixel installed on your site. This can be accomplished hardcoding it or implementing through Google Tag Manager, depending on your access level and preference. The pixel is a small bit of code that allows Facebook to track site visitors when it fires, letting marketers target users who are familiar with the brand since you know they have visited the site.

Beyond site visitors, Facebook has different events you can track that can be set up in Google Tag Manager once the Facebook pixel is installed, including purchase/conversion tracking and initiated checkouts, among others. For instance, if we’re looking at a site-wide remarketing pixel for Facebook, we’d want that code to fire on every page when it loads, and Google Tag Manager can help us accomplish that.

Google Tag Manager Basics

The purpose of Google Tag Manager event tracking is to provide one place for your event tags and triggers to live. Besides the convenience of having all your tags together and easily accessible, once the original code is in place, marketers who don’t have a ton of coding experience have a very user friendly platform that allows them to update current tags as well as add new ones.

If you’ve chosen to hardcode the Facebook pixel, the next step toward event tracking is to add it to Tag Manager. Here is where you can instruct it to fire on the event you choose, giving you the ability to customize when the code is fired, allowing marketers a lot of creativity when setting up their tracking.

Setting Up Facebook Custom Events

While some events that you want to track with Facebook are standard events that are available in Facebook’s Events Manager, custom events allow you to track nearly anything you want. To set up custom events in Facebook all you need is a small amount of code and a few minutes in Google Tag Manager.

An example of a custom event that is easy to set up with Tag Manager that can be helpful if you have long vertical websites is scroll depth events. To show how easy it is to set up, we’ll walk through how to set up a Facebook custom event that will fire when a user scrolls 50% down a web page.

First, we’ll need to grab the generic code that Facebook uses as the basis for its standard events. It will look something like this:

<script>

 fbq(‘track’, ‘xxx’);

</script>

We are then able to name the custom event anything we want that will make recognizing the event in Facebook easy. For the scroll depth example we’ll replace the ‘xxx’ with ‘Scroll_Depth_50’

<script>

 fbq(‘track’, ‘Scroll_Depth_50’);

</script>

The next step is to set up a trigger in Google Tag Manager. The trigger is the action that tells the tag when to fire. After selecting to create a new trigger, the scroll depth preset option is available to select. Now, all we need to do is choose what percentage to track. In this example we selected 50%.

Once the trigger is set up, we’ll go back to the tag window to set up the custom event. Once we have a new tag open, the first thing to select is the tag configuration, where we’ll drop in that custom Facebook code we mentioned earlier. With Facebook giving us the HTML code, the tag type you want to select is the “Custom HTML.” Once that is selected all we need to do is paste in the code.

After the tag configuration is set up, the next step is to add in the trigger that we set up earlier. Under the tag configuration, there will be a “triggering” box where we’ll be able to add in the trigger that was just set up.

Once that is all set up, the final steps are testing the trigger in preview mode before saving and publishing the tag. Saving and publishing will push the custom Facebook event tracking code onto the site.

There are many different ways a marketer can be creative with their custom event tracking when pairing Facebook and Google Tag Manager. If you think that your Facebook campaign could benefit from more event tracking we’d be more than happy to help. Just fill out a contact form below and we’ll be in touch!

Cass Gibbon

Cass has worked in Paid Search since he graduated the University of Whitewater in 2015 with a BBA in Marketing, and a BA in Graphic Design. When he’s not optimizing his client’s online campaigns you can find him at a golf course or hanging out with his dog.