Meta Facebook Pixel Tracking with Google Tag Manager [Complete Training]

The Facebook Pixel is a multi-purpose tool that helps you optimize your campaigns and analyze your audience data. You can enhance the Facebook Pixel by integrating it with Google Tag Manager, which makes tracking easy, consistent, and powerful.

There are three ways to install the Facebook Pixel tracking with Google Tag Manager, which we demonstrate in this complete training guide.

🚨 Note: If you’re new to Google Tag Manager, take a peek at our Google Tag Manager tutorial and cover the basics.

An overview of what we’ll cover:

• Tracking with Facebook Pixel
• Automated Facebook Pixel Installation
• Manual Facebook Pixel Installation
• Custom Tag Template
• Creating FB Custom Conversion Using Events

Intro

If you use the Facebook Pixel and haven’t integrated Google Tag Manager yet, it’s time to streamline your workflow and maximize your marketing power.

Using Google Tag Manager with the Facebook Pixel tracking will help you measure and optimize your advertising even more effectively. There are a few different setup methods and lots of specialized features, but we’ve made a complete training tutorial to guide you through the process.

In this post, we will show you three different methods: automatic installation; advanced manual installation; and a Facebook Pixel Custom Tag Template. We’ll also teach you how to set up events and utilize the new Custom Templates that are available in Google Tag Manager to deploy your Facebook Pixel.

This tutorial will use a demo store running on WordPress and WooCommerce. We also use an almost-empty GTM Container, which is already implemented on this store using the free Google Tag Manager for WordPress plugin by Thomas Geiger.

Let’s dive in.

Tracking with Facebook Pixel (3 Methods)

In this post, we will cover three different methods to install the Facebook Pixel with Google Tag Manager. You can skip to the most relevant method if you know what you’re looking for, or you can read through to figure out which method will best suit your tracking needs.

The first method is automatic installation using the Facebook integration. It is the simplest and fastest, but it is quite limited in functionality: you can track pageviews, but not other types of events.

The second method is manual installation directly through Google Tag Manager. This is much more flexible and powerful, so we recommend it if you feel comfortable working with a little bit of code.

The final method uses Custom Tag Templates through Google Tag Manager’s Template Gallery. It is fast and easy, but still very customizable. Custom Templates are an incredibly user-friendly way to track all kinds of events.

1. Automated Facebook Pixel Installation

Pros and Cons of Automated Installation

Before moving forward, let me tell you why I usually avoid this method.

When you authorize Google Tag Manager and verify it for Facebook, Facebook goes into Google Tag Manager and creates Tags and triggers on its own. It assigns triggers to the Tags and publishes your Container immediately.

If you have any changes or works-in-progress in your Container, or if someone else is already working in your Container, then you don’t want to publish it immediately to a website. Doing so can make things complicated, and possibly even break things that you already had in place.

If you already have Tags or triggers in your Container, you should skip ahead to a different method. I’d also recommend either of the other two methods for anyone who wants more customization and control.

But if you have an empty Container, this shouldn’t affect you. This method is still a great option if you don’t have a lot of time and you only want to track pageviews instead of events.

Install Facebook Pixel with Google Tag Manager

We’ll start with the quick and dirty method. First, let’s navigate to the Facebook Events Manager and find our pixel. Click the business tools menu icon, then select Events Manager.

On our data sources page, we’ll select the pixel that we want to install.

And in the top-right corner, under the Set Up dropdown menu, we’ll click Install Pixel.

This first installation method is the most automatic one: partner integration. Click on the first option, Add code using a partner integration.

Connect and Verify Google Tag Manager Account

Now, we will see a list of icons for different platforms and tools that already integrate with Facebook. Among these is Google Tag Manager.

We can click on Google Tag Manager, connect and verify our Google Tag Manager account, and let Facebook do the rest for us.

To carry on with automatic installation, click Continue.

You will get another popup to choose the Google account that you want to authorize and connect to your pixel. Allow Facebook the prompted permissions, and on the next page click Finish Setup.

Next, Facebook will try to help us set up some extra events, which we won’t worry about at the moment. For now, we just want to go back to Google Tag Manager and refresh our page so we can review the tags and see what Facebook has done.

And here in Google Tag Manager, we’ll see that the Facebook Pixel tag has already been created. The Workspace Changes in the upper-right corner are zero, which means the workspace has already been published.

So Facebook has come into Tag Manager, created the Tag, assigned a trigger, published a Container, and created a new version all in one step. We can see this new version by clicking the Versions tab in the topbar. Facebook has created a version two, although you’ll notice that it has no name.

This is another reason that I don’t really like the automatic installation method. It doesn’t give you much control or flexibility, and it auto-publishes a work-in-progress Container. This can cause confusion or complications later down the road, so be aware of it if you use this method.

So that’s it—although the automatic installation method can be limiting, it’s definitely quick and easy.  By all means, if you’re short on time or if you only have a few tracking requirements, take advantage of how short and simple this process is.

In short: go to the Facebook Events Manager, click setup, and authorize Facebook to access your GTM Container. Click “continue” a few times and BAM, installation is done for you. It’s finished, and you can go on with the rest of your day.

2. Manual Facebook Pixel Installation

If you want more flexibility and more analytical power using your Facebook Pixel and Google Tag Manager, the manual installation method is the way to go.

Like the first method, we’ll start in the Facebook Events Manager’s view of our pixel. In the Set Up dropdown, click Install Pixel.

When prompted, we’ll choose the second option in the popup: Manually add pixel code to website. 

Adding Pixel Code to All Pages

Once you select the manual option, Facebook instructs us to add this base code on every page of our website. We’ll get to that in a moment. For now, we’re going to click on the code to copy it to the clipboard.

Back in Google Tag Manager, we need to create a new Tag. Under the Workspace tab, click the Tags header and click the New button.

Because Google Tag Manager doesn’t already have any built-in Tags for Facebook, we need to build our own Custom Tag that can use our JavaScript code from Facebook.

Give your new Tag an informative name. Here, I’ve used FB – Base Pixel. Select the Custom HTML Tag type, then paste your copied code into the HTML field. We want this Tag to fire on our whole website, so add a trigger for All Pages and click Save.

Advanced Tip: Pixel Components

If you know JavaScript, you should always look over someone else’s code before you put it on your website. You might not change anything, but it’s good to know exactly what your code is doing. Most importantly, you may notice that Facebook’s code may break in certain cases.

To find out why, let’s take a closer look at the Facebook Pixel code.

We have two main parts to this code. The first part is the <script> segment from line 2 to line 13, and the second part is the <noscript> segment from line 14 to line 16.

Let’s start with the first part of the script segment,  from lines 3 to 10. We have a function, !function(f,b,e,v,n,t,s), for Facebook events. This will load a JavaScript library from Facebook’s servers.

Once the library is loaded, we have the pixel initiation code on line 11. fbq(‘init’ initiates the code, and the following number is your Facebook Pixel ID. This line of code uses the loaded library to activate your specific pixel on your page. When the Facebook Pixel is activated, it will listen to events, collect them, and report them to the Facebook Events Manager.

Line 12 is an event. It tells Facebook to track a pageview and send it to your activated pixel.

So the script portion is quite simple and should work just fine. It loads a library, initiates your pixel, and tracks the first event to that pixel, which is a pageview event.

Since that looks good and we understand the code, we’ll check out the noscript portion next.

The noscript code is expressly for browsers that have JavaScript disabled. So if a page loads in a browser that doesn’t support JavaScript, this is usually the portion of the code that will be executed.

But the Google Tag Manager Container is made of JavaScript, and it executes Custom HTML when JavaScript is supported. So if you think you may have a lot of users whose browsers don’t support JavaScript,  you’ll want to take this piece of code out and put it in an image Tag instead.

So in this case, we’ll delete the noscript portion, which is lines 14 through 16 of the original HTML code. Our code should end up looking like this:

To be honest, this isn’t a super critical step. Most browsers support JavaScript, and for those that don’t, your website probably won’t function correctly anyway. However, it’s certainly something to be aware of so that you can support users when they encounter problems.

Testing

Testing with Preview & Debug Mode

To test our new Tag, let’s preview our Container to verify our setup. Click on Preview and we will see a new dashboard.

Remember: while in Preview mode, click the orange Refresh button to see any new changes you make.

Let’s go to our website and refresh the page there to preview the Container. If everything is working, you will see that the Tags fired both in your Google Tag Manager bar and in the Facebook Pixel Helper. (If you don’t have the Facebook Pixel Helper Chrome extension, we recommend it! Get it here.)

Testing with Facebook Pixel Helper Extension

If we investigate the Facebook Pixel Helper, we can see that a pageview event has been fired and that some microdata has been automatically detected.

Under the pageview dropdown, there’s some information about the pageview. You’ll find information like the recorded URL, the pixel code, and pixel location.

Top Tip: How “Microdata Automatically Detected” Works

When we install Facebook Pixel on the page, it seeks out context for the page and user interactions. It can find and track things even without us asking it to, such as button clicks or what users viewed on the page.

The blue lightning icon identifies automatically-detected events in Facebook Pixel Helper. The green checkmark icon identifies events that we set up and fire ourselves using Google Tag Manager.

Testing with Facebook Test Events

We should also test our Tags using Facebook’s Test Events function, which will verify that Facebook is actually receiving the events that were recorded. In the Facebook Events Manager, click the Test Events header. It will show us all recent activity for that pixel in real time.

To make sure we are looking at the right events, empty the activity list by clicking Clear Activity.

Refresh your shop page, then come back to the Facebook Events Manager. If events are being properly recorded and sent to Facebook, you’ll see a pageview with the URL of the page you just refreshed.

Event Debugging

Things are looking good so far, but you should test multiple functions on your site to make sure you’re not missing any events. For example, let’s go back to the website shop and click the Quickview button for a product.

We can see that the Facebook Pixel Helper detected the button click. But if you go back to your Test Events page on the Facebook Events Manager, we won’t see that automatically detected button click in the list of events. That’s some important data that we’re missing out on.

We definitely want to see those activities. The solution is pretty simple, but it takes a bit of navigating to find. To get to your debugging tool, open the business tools menu and click the Expand Menu icon.

In the expanded menu, click on Analytics.

Select the pixel that you’re currently using.

Click the Activity dropdown in the sidebar, then click Event debugging. On this page, hit the Refresh button.

After the list is refreshed, you’ll be able to see all events, even those that are automatically detected like microdata and button clicks.

Once you’ve found this solution, it may be tempting to just rely on Facebook’s automatic microdata detection for all of your event tracking instead of manually setting up a bunch of events through Google Tag Manager. This is a really bad idea for your analytics.

Although Facebook can detect microdata including some events like button clicks, its detections are not always completely accurate. Facebook will try its best to pick up user interactions and the context around it, it has its limitations.

It’s always better to manually set up tracking for events that are important to us. If you want to use events data to set up conversion tracking or to create Custom Audiences, you need your data to be as reliable as possible. The best way to make sure that information is being recorded the way you want is to set it up yourself.

Custom Event Pixel Installation

Now, if you only want pageviews to be tracked to your Facebook Pixel, you can stop here. You can use pageviews in the Facebook Events Manager to create a few Custom Conversions, create Custom Audiences, and run Remarketing Ads.

But the Facebook Pixel can do so much more for you beyond tracking pageviews.

In the second part of this tutorial, I’m going to show you how to get the most out of the Facebook Pixel by setting up event tracking. Pageviews don’t tell anything about a user’s interactions with a page. These missed interactions include button clicks, watching a video, adding something to a cart, or purchasing a product.

Event tracking is a game-changer if you have only been tracking pageviews. We can see how many times an event has been fired and create Custom Audiences based on that event. We can also define an event as a click conversion, which we can use to optimize our Facebook campaigns for.

Basically, the possibilities are endless when you include events in your Facebook Pixel tracking. Let’s learn how to implement this valuable tool.

What Kind of Events Can You Track on Your Website?

There are two types of events that we can track to a Facebook Pixel: Standard Events and Custom Events.

Standard Events popular user interactions that are recognized by Facebook. These include leads, viewing content, adding a product to cart, initiating the checkout process, purchasing a product, and more. Standard Events probably cover most of the things that you want to track.

We can also still track other events even if Facebook doesn’t recognize them as Standard Events. For example, if we want to track users that spend five seconds on our landing page, we can configure a custom user interaction event.

Some possibilities for creating Custom Facebook Events include:

• Time on Site
• Button Clicks
• Outbound Link Clicks
• Internal Link Clicks
• File Downloads
• Scroll Tracking
• Element Visibility

We can create these kinds of Custom Events and more. And if you used manual installation or Custom Tag Templates to implement your Facebook Pixel, it’s not as hard as you might think. Let’s learn how.

Step-by-Step: Setup Event Tracking

Separate the Facebook Base Pixel and Pageview Event into Two Tags

To track events, we’ll start in Google Tag Manager. Remember that we can’t set up event tracking this way if you used the automated installation process, but it’s pretty easy if you used either manual installation or Custom Templates.

The first thing we need to do is split our Facebook Base Pixel code into two parts. Our goal is to  separate the initiation part of this pixel from the first event, which is the pageview.

This is because we want to track more events different from the pageview. Those events will also require the Base Pixel to be initiated; otherwise, they won’t function correctly.

So the sequence is like this: the Facebook Pixel must be initiated before an event can fire in order to pick up that event and report it to Facebook. We only need execute the Base Pixel once, but as long as it initiates first, it will record every other event that fires on a page.

To accomplish this, click on your Base Pixel Tag in Google Tag Manager.

When you open the Tag configuration settings, you’ll be able to directly edit the HTML code. We need to take out the Facebook pageview tracking code and add it to its own Tag.

Highlight the segment fbq(‘track’, ‘PageView’); and use either Ctrl+X or right-click and select Cut to remove it from this code.

With that pageview section removed, the Base Pixel Tag looks exactly how we want it. Click Save and close the Tag configuration.

Next, we’ll create a new Tag to host the pageview section that we just cut out of the Base Pixel code. Name it something like FB – Pageview and choose Custom HTML as the Tag type. 

In the HTML field, add the opening and closing script Tags <script> and </script>, then paste our pageview segment fbq(‘track’, ‘PageView’); between them. Assign All Pages as the trigger and click Save.

Assign Firing Order to Your Tags

Now we have both the Facebook Base Pixel and the pageview event firing separately on all pages. However, we have to find a way to ensure that Facebook’s Base Pixel always fires before the pageview event.

When we see our Tags in the dashboard like this, we have no way of knowing this because Google Tag Manager fires Tags asynchronously. It is not possible to tell which one fires first and which one fires second on the default settings.

So our next order of business is assigning an order of firing to these two Tags. We have two possible solutions to this problem.

Method 1: Firing Priority

The first way is called Tag firing priority. By default, the firing priority of each Tag is zero. We can assign a priority using any integer, with the highest value firing first and the lowest value firing last.

This works for some situations, but we’re not going to use it in this tutorial. Tag firing priority ensures that Tags fire in a certain order, but it doesn’t guarantee that a Tag will finish its execution before the next Tag is initiated.

This means that it is possible for your pageview Tag to fire before your Base Pixel Tag has finished executing. If this happens, the pageview Tag won’t be picked up or reported to the Facebook Pixel, and you will lose tracking data.

Method 2 (Recommended): Tag Sequencing

So we will use the second method, which is Tag sequencing. With Tag sequencing, we can assign an order to Tag firing, and Google Tag Manager will ensure that the first Tag has been fired and executed completely before it fires the next Tag.

To set up Tag sequencing, let’s open our pageview Tag. In the Tag configuration settings, open Advanced Settings and then Tag Sequencing. Check the box next to Fire a tag before FB – Pageview Fires, then select your Base Pixel Tag as the Set-up Tag. Finally, check the box next to Don’t fire FB- Pageview if FB – Base Pixel fails or is paused and click Save.

These settings allow you to choose Tags that either must precede or must follow your Tag. Since the Base Pixel must be initiated before the pageview Tag, the Base Pixel is called a set-up Tag. You will need the Base Pixel to be selected as a set-up Tag for any events that you want tracked by the Facebook Pixel.

In this case, I recommend checking the box to not fire your current Tag if the set-up Tag fails. If the Facebook Base Pixel fails to execute, there is no way the pageview Tag’s HTML code will work on its own. It doesn’t know where to send data, and there is no base Tag to listen for this event.

Okay, so that’s it. So we’ve set up Tag sequencing to ensure that Facebook Base Pixel always fires and finishes execution before the Facebook pageview Tag.

Set Base Pixel Tag to Fire Once per Page

Your Base Pixel and pageview Tags are now ready to support other event Tags. You can add new Tags for events like add to cart, initiate checkout, and leads using Tag sequencing.

For all of those events, we also need to set our Facebook Base Pixel as the set-up Tag. If we change nothing else, then our Base Pixel Tag will fire multiple times—once for each event that uses it as a set-up Tag.

This is inefficient. If the pixel is initiated already, it should pick up all following event Tags, and we don’t want it to fire extra times.

So now we need to set up just one more configuration. This time, we’ll open Tag configuration for our Facebook Base Pixel Tag. Click Advanced Settings, and under the Tag firing options select Once per page. That’s it! Click Save and you’re done.

Now Facebook Base Pixel will fire just once per each page, and it will finish executing before any other event Tag fires on that page. Even if another event has defined the Base Pixel Tag as its set-up Tag, Base Pixel will fire just once per page.

Set Up Facebook Standard Event Tag

Let’s set up a new Standard Event to go with our fully-functional Base Pixel and pageview Tags. Since our demo page is a shop, let’s use Facebook’s Add To Cart Standard Event for our Tag.

Create Add-to-Cart Button Trigger

The Facebook Pixel interface recognizes add-to-cart events as Standard Events, but we need to help Google Tag Manager identify which button click we want to track. A temporary trigger will help us find the correct Click ID; then we’ll edit the trigger to record only that button click.

We’ll start in the Google Tag Manager Container. Click the Triggers menu item, then click New to create a new trigger.

For now, we’ll temporarily name this Tag All Clicks and set its trigger to Click – All Elements, which should record All Clicks. Click Save.

Enable Click Variables

Next, we need to make sure that Google Tag Manager will record the identifying variables when our trigger fires. These variables will help us tell Google Tag Manager to record only add-to-cart clicks instead of all clicks.

In the Variables section, click Configure to decide what variables will appear when the trigger fires.

Scroll through the built-in variables until you find the section called Clicks. Check the boxes for all of these variables: Click Element, Click Classes, Click ID, Click Target, Click URL, and Click Text.

Inspect Add-to-Cart Click Variables

Refresh the Google Tag Manager Container and your website page. Now it’s time to identify our add-to-cart button click.

Click on Add to cart, then examine the Click action recorded in Google Tag Manager. Under the Variables tab, we’ll see all the click variables that we just enabled.

In the case of our demo shop, you will notice that most of our click variables have empty values. However, there are two variables whose data values identify an add-to-cart button click: Click Classes and Click Text. 

For this tutorial, we’re going to use the Click Text value ‘Add to cart’ instead of the Click Class value. This is because our shop probably has multiple add-to-cart buttons for different products, but they might not have this exact button class.

This ‘Add to cart’ value seems a bit more universal across all add-to-cart buttons. You can test this by clicking other add-to-cart buttons across your own site to make sure they return the same value for your Click Text variable.

Define New Trigger for Add-to-Cart Clicks

With this variable in hand, let’s go back to Google Tag Manager. Under Triggers, click our All Clicks trigger to edit it.

We can change the name of this trigger now that it will track just add-to-cart clicks instead of all clicks. To specify these clicks, select Some Clicks and configure the trigger so that Click Class equals Add to cart.

Make sure that you type the value exactly as it appears inside the single quotes in Google Tag Manager—it is also case-sensitive. Click Save.

Refresh your Container so that your trigger is live. Now, we can make a Tag for this trigger that will be reported to the Facebook Pixel.

Create Add-to-Cart Click Tag

In the Container under Tags, click your FB – Pageview Tag to open it. Click the options button and select Copy like we did earlier.

Let’s name this FB – Add To Cart. Since add to cart is a Standard Facebook Event, we only have to edit the HTML code by replacing  PageView with AddToCart (again, these are case-sensitive).

Our Base Pixel is already assigned as our set-up Tag, so now just change the trigger to our new Add To Cart – Clicks trigger and click Save.

Testing

To test this new Tag, refresh your Container and your web page. Let’s see what shows up in our tracking  when we click Add to cart on our product page.

If the Tag and trigger are configured correctly, a click trigger will be displayed and you will see a new Tag has been fired both in Google Tag Manager and the Facebook Pixel Helper.

We should also be able to see our add-to-cart Tag in the Facebook Events Manager. We can tell that Facebook has recognized the Tag as a Standard Event because of the shopping cart icon next to the name instead of a Custom Event icon. 

Set Up Facebook Custom Event Tag

Now that we can add a Standard Facebook Event, let’s set up a Custom Event for the Facebook Pixel to track. This time, we’re going to add an event that tracks when a user spends at least five seconds on a page, which can be more informative than a pageview.

Create New Tag

Under the Tags header, click New to create a new Tag, then click on Tag Configuration. We’ll call it FB – 5 Seconds.

Again, we want to use the Custom HTML Tag type for this event. However, because this isn’t a Standard Facebook Event, we need to replace ‘track’ in the code with ‘trackCustom’. Then we’ll name our event in the code ‘5-Seconds’.

We also need to make sure our Tag sequencing is set up properly. Assign your Base Pixel Tag to execute as a set-up Tag before our timer Tag. Remember that we don’t want to fire this Tag if the Base Pixel set-up Tag fails, since this Tag will function incorrectly without the Base Pixel.

Create and Apply Timer Trigger

Like our add-to-cart button click, a five-second timer isn’t a built-in Tag. That’s ok, though, because it is easy enough to customize one ourselves.

In the Tag configuration settings, click Triggering to see available triggers. Then, click the “add” icon to create a new trigger.

Let’s name our trigger Timer – 5 Seconds and select Timer for the trigger type. For the timer to count down five seconds, enter 5000 in the Interval field since it asks for milliseconds.

We only need this trigger to fire once per page, so set the Limit to 1. I want this trigger to fire in all pages and situations, so we will write this as Event matches RegEx .*

Click Save to attach this trigger to our Tag.

Now, we can click Save on our Tag configuration and refresh our Container to implement our new Tag.

Testing

Okay, let’s go back to the website, refresh the page, and see what happens.

In Google Tag Manager, we have our five seconds event, our Base Pixel, and our Facebook pageview. The Facebook Pixel Helper shows the pageview, the five seconds, and some microdata.

Next, we’ll want to make sure that Facebook is receiving the data that’s recorded here. Let’s go to the Facebook Events Manager and select this pixel. Go to Test Events and click Clear Activity. 

Refresh your website page, then wait for the Tag to fire and appear here in Facebook Events Manager. If everything is debugged and working properly, you will see your five seconds Custom Event here.

Top Tip: The Multi-Pixel Problem

Before we wrap up the manual installation portion of this tutorial, I want to show you an advanced trick. This solution will help you achieve accurate event tracking when using multiple pixels.

So far, we have only used one Facebook Base Pixel. But sometimes you might need more than one Base Pixel to fire on a single page.

This could happen if you have multiple stakeholders or agencies involved with a website. Some of them might be doing brand advertising while the other is doing performance marketing. This means that they’ll each want to track different data with their own Facebook Pixels.

But each of these pixels accounts should initiate their own Base Pixel for the events they track to function properly.

To simulate this situation, let’s copy this Base Pixel. We’ll call the copy FB- Base Pixel 02 and change the pixel ID code. Click Save.

Now, if we preview the Container and refresh the page, you’ll see in the Facebook Pixel Helper that we have two pixels initiated on this page. Each pixel detected the pageview and five second timer, but it seems that the pageview fired before the second Base Pixel finished executing.

Facebook will say here that they detected the pageview event code, but no pixel was activated for it. This data gets especially confusing because the five second timer was still recorded by the second Base Pixel, since it had time to finish executing before the event fired.

So you can already see that lots of things can go wrong when we have multiple pixels. Some Tags may fire before the Base Pixel finishes loading, some Tags might fire to all pixels instead of just one, or some of Tags could fail to fire to the pixel that they were supposed to find.

The Solution

Okay, so what’s the solution? We’ll have to rely on the code ‘trackSingle’.

If you take another look at our event tracking code, the piece from Facebook starts with fbq(‘track’,. We can change this to fbq(‘trackSingle’, which tells this event to find a single, specific pixel.

We will include this specified pixel’s ID number inside single quotes and followed by a comma, then click Save.

Now the page view event will only fire to our first Base Pixel. You can make this same modification to most other event Tags using whatever Pixel ID you need.

There is a slight modification for Custom Events. For Custom Events like our five-second timer, we need to use the code ‘trackSingleCustom’, to send the event to a single pixel.

To demonstrate how to test this, I have modified the pageview, add to cart, and five-second timer to track exclusively to our first Base Pixel, even though we will have both Base Pixels initiated.

Let’s refresh the Container, go back to our website, and refresh the page. All three Tags have been recorded to just the first pixel. You can change the HTML code for your Tags to send any event to different pixels without doubling them up or losing data.

3. Custom Tag Template

Our third method of installing the Facebook Pixel with Google Tag Manager uses Custom Tag Templates. This is a newer but incredibly useful technique that combines flexibility, power, and ease of use.

What Are Custom Tag Templates?

In 2019, Google Tag Manager introduced a new feature called Custom Templates. Custom Templates function for users basically the same as built-in Tags from Google Tag Manager.

But the difference is that anyone can create a Tag Template and share it with others via the Community Template Gallery. This means that you have access to a huge pool of experts who are solving current problems in real time.

Why Use Them?

No Base Pixel Needed

The beauty of Custom Tag Templates is that they can automate Tag firing priorities, sequencing, and frequency. Manual installation requires setting each of these up yourself for every individual Tag, and in the case of the Facebook Pixel, this includes an additional Base Pixel Tag.

A Template simplifies this process and eliminates the need for a Base Pixel Tag. The Template we use in this tutorial ensures that the Facebook Base Pixel initiates before each event that you want to record. It also won’t fire extra times or before any other events. 

In other words, you just have to create Tags for the specific events you want to track. Everything else is configured automatically to make sure that the Facebook Pixel and Google Tag Manager work together.

Easy Multiple Pixel Set Up

The other nice feature of the Custom Template we use in this tutorial is that the default setting is to track single. The Tag configuration includes your Facebook Pixel ID as part of the setup, so it only fires the event to that specific ID. You can easily include multiple IDs to receive tracking data from a single Tag, or you can send different Tags to different pixel IDs.

This is super useful and important if you have different audiences that you want to target. If you manage multiple sites, you don’t want to mix up the audiences and misdirect your advertisements.

Add Tag Template to Your Account

Now, let’s go to Google Tag Manager and start using Custom Templates.

If you go into Google Tag Manager and create a new Tag, you will see an option to Discover more tag types in the Community Template Gallery. Click on this to view and search through community-sourced Tag Templates.

In this tutorial, we’ll be using Simo Ahava’s Facebook Pixel Tag Template, which quickly and easily implements the Facebook Pixel using Google Tag Manager. Simo Ahava contributes a lot of high-quality Templates to the community library, and he shares a lot of knowledge about Google Tag Manager and Google Analytics on his blog. Check out his work if you’re interested in more creative solutions!

To find this Template, you can search for it by name: Facebook Pixel. The creator will be listed as gtm-templates-simo-ahava.

When you click on it, you’ll be able to see all kinds of details about the Template, including a description, recent updates, and permissions that the Tag will need to function.

This is also where you can investigate who built the Template you want to make sure that you trust it. Google is pretty good about vetting Community Template Gallery submissions, but always do your reading just in case.

To add this Custom Template to our Container, click the Add to workspace button.

Google Tag Manager will give you a popup just to make sure you know that the Template comes from a third party. Click Add to confirm that you want to add this Template to your Container. 

Set Up Facebook Pageview Tag

Working with this Custom Tag Template is really easy. Let’s create a new Tag and see just how simple it is.

First, let’s give our new Tag a name. I use “CT” here for “Custom Template.” Select the Custom Template that we just added, and enter your Facebook Pixel ID. For now, select Standard for our event and choose PageView from the dropdown (we’ll look at Custom Events in a moment).

Since we want to see all pageviews, we’ll set the firing trigger to All Pages. Click Save and we’re done!

Now that we have a pageview Tag set up with our Custom Template, let’s test it on our website. Refresh the Container, then go to your website and refresh the page.

If everything is configured correctly, Google Tag Manager and the Facebook Pixel Helper will show that our Facebook Pixel Custom Template Tag has fired. Just like that, we have a fully-functioning Tag using a Custom Template.

Set Up Other Facebook Event Tags

To demonstrate how easy it is to expand your setup, let’s make two more Tags: one Standard Event and one Custom Event.

In Google Tag Manager, open your newly-minted pageview Tag. Click the three-dot options menu icon and select Copy.

This will make a new Tag that is configured exactly the same as our pageview Tag. Let’s rename this copy so that we know it records add-to-cart events, then choose AddToCart from the Standard Event dropdown. Change our trigger to fire on Add To Cart – Clicks and click Save.

Next, we’ll copy this Tag again to set up a Custom Event. Let’s make a Tag that records when a user has been on a page for at least five seconds.

Name your new Tag, select Custom for the event name, and type in a unique name for this event. For the triggering, we can use a timer trigger that fires after five seconds. Click Save and you’ll have a Custom Event.

Now that we have three Tags using the Custom Template, let’s refresh the Container and refresh the website page. Click a product’s add-to-cart button to make sure you fire that Tag.

In Google Tag Manager and the Facebook Pixel Helper, we should see our Tags recorded for the pageview, five seconds of viewing, and add to cart.

Extra Features

Now before we wrap up this tutorial, I want to show you two other features that this particular Custom Tag Template has that are difficult to accomplish through manual tracking.

Disable Automatic Configuration

Under More Settings in our Tag configuration, we can disable the automatic configuration. This disables the Facebook Pixel’s ability to automatically collect metadata, which you saw labeled as microdata in the Facebook Pixel Helper.

Disabling automatic configuration will stop all of your Facebook Pixel’s attempts to detect button clicks and other page context, which we mentioned earlier can be unreliable. If you check this box, it will disable that functionality. 

Wait for GDPR Consent Option

This Custom Template also has a setting that allows you to hold an event from being fired until the user gives tracking consent. You will notice that the initial setting for this field is True.

If you set it to False, it means that by default, we do not assume that the user has consented to be tracked by Facebook. In this case, the Tag will fire but it will not be executed; it will wait until another Tag with consent granted (set to True) fires.

When set to False, the Tag will queue and wait until the user gives consent either by clicking “I accept” or “I agree” or whatever consent button you have on your site. Then, when the user consents to tracking, all the queued events will fire and be recorded to Facebook.

This is really good for compliance purposes, especially with GDPR when you need to get users’ explicit consent before doing any marketing tracking.

🚨 Note: If besides Facebook you’re also running ads on TikTok, be sure to learn how to set up TikTok event tracking with GTM.

Creating FB Custom Conversion Using Events

Let’s take a quick look on how we can use the events you’ve tracked in the Facebook Events Manager to create Custom Conversions.

To create a Custom Conversion, we can click on Custom Conversions in the sidebar, then click the Create Custom Conversion button.

In the configuration settings, select which event you would like to use for your conversion. In this case, I’m going to choose add to cart as my Custom Conversion. For a Rule, we’ll record this conversion whenever the URL contains demo-shop. I’ll name it Add To Cart and click Create.

Once you’re done, you can click on the conversion and take a look at how many times the conversion has occurred. You can use this data to optimize your campaigns like you would with any other conversion data.

Summary

In this tutorial, we covered three different methods of Facebook Pixel tracking via Google Tag Manager.

The first one was automatic installation. This is remarkably quick and easy to set up. It’s limited in its tracking capabilities and can disrupt a Container-in-progress, but it’s great for pageview tracking if you have an empty Container.

The second one was manual installation. This method is the most powerful and customizable, but it can be challenging to execute. There are a lot of small, detailed steps to set up and test things like Tag sequencing and tracking with multiple pixels. It may not be for the faint of heart, but if you’re comfortable working with Google Tag Manager, you can customize it exactly how you want.

The third and final method was using Simo Ahava’s Custom Tag Template. It grants just as much flexibility and power as manual installation, but it is much quicker and easier to set up. Custom Templates are the most user-friendly way to track all kinds of events with the Facebook Pixel.

If you pick one method and stick to it, then you’re in great shape when it comes to using the Facebook Pixel with Google Tag Manager. You should be able to accomplish all of your website tracking needs. If you learn all three methods, you’ll be an expert on using the Facebook Pixel with Google Tag Manager. You’ll be able to customize your own solutions and advise others, and you’ll always feel confident that you’re using the best possible approach for each job.

There’s always more to learn with the Facebook Pixel! If you want to learn a few more tricks, check out these tutorial posts:

• How to Set Up Meta Pixel (Facebook Pixel) with Google Tag Manager
• How to Fire Multiple Facebook Pixels on the Same Page with Google Tag Manager
• Facebook Pixel Scroll Tracking with GTM
• Facebook Pixel Conversion Tracking with GTM

Do you have other recommendations for installing the Facebook Pixel with Google Tag Manager? Have you encountered other challenges without a solution yet? Let us know in the comments!