Search
Close this search box.

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

Last Modified on June 6, 2024

The Meta Pixel is a multi-purpose tool that helps you optimize your campaigns and analyze your audience data.

You can enhance the Meta Pixel by integrating it with Google Tag Manager, which makes tracking easy, consistent, and powerful.

GTM For Beginners

Sign up to the FREE GTM for Beginners Course...

There are three ways to install the Meta 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:

Meta Pixel tracking with Google Tag Manager 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.

🚨 Note: 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.

Benefits of Integrating Meta Pixel with GTM

  1. Gather Audience Insights: Even if you’re not running Meta ads yet, the Pixel can start collecting data on your website visitors. This data becomes invaluable when you decide to run ads in the future.
  2. Custom Audience Creation: The insights obtained from visitor activities can be used to create custom Meta audiences for retargeting. This allows advertisers to tailor ads based on specific actions users took on the website.
  3. Lookalike Audiences: Using the data from custom audiences, Meta can identify users with similar characteristics and behaviors. This lookalike audience can be targeted to expand your customer base.
  4. Conversion Tracking: To assess the effectiveness of Meta ads, it’s crucial to track conversions on your website. The Pixel provides detailed information about user actions, helping advertisers understand their return on ad spend.
  5. Optimization for Conversions: With the Pixel, you can optimize your ad campaigns to target audiences most likely to convert.
  6. Dynamic Product Ads: If a user shows interest in a product but doesn’t make a purchase, the Pixel can retarget them with dynamic product ads showcasing the same product.

Meta Pixel Tracking with Google Tag Manager (3 Methods)

In this post, we will cover three different methods to install the Meta 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 Meta integration. It is the simplest and fastest, but it is quite limited in functionality: you can track page views, 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 Meta 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 Meta, Meta 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 on 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 Meta Pixel with Google Tag Manager

We’ll start with the quick and dirty method.

1. First, let’s navigate to the Meta Events Manager and find our pixel.

2. Click the business tools menu icon, then select Events Manager.

Screenshot of Meta Ads Manager dashboard with Events Manager menu item highlighted

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

Screenshot of Pixel Events Manager data sources page with pixel data source highlighted

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

Screenshot of pixel overview in Meta Ads Manager with Set Up > Install Pixel highlighted

This first installation method is the most automatic one: partner integration.

5. Click on the first option, Add code using a partner integration.

Screenshot of pixel installation popup with Add code using a partner integration highlighted

Connect and Verify the Google Tag Manager Account

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

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

Screenshot of list of partners that connect with Meta Pixel

7. To carry on with automatic installation, click Continue.

Screenshot of first step in Google Tag Manager connection popup  with Continue highlighted

You will get another popup to choose the Google account that you want to authorize and connect to your pixel.

8. Allow Meta the prompted permissions, and on the next page click Finish Setup.

Screenshot of third step in Google Tag Manager connection popup with account, container, and Finish Setup button highlighted

Next, Meta 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 Meta has done.

And here in Google Tag Manager, we’ll see that the Meta Pixel tag has already been created.

9. The Workspace Changes in the upper-right corner are zero, which means the workspace has already been published.

Screenshot of Google Tag Manager dashboard with new Meta Pixel tag and zero workspace changes

So Meta has come into Tag Manager, created the Tag, assigned a trigger, published a Container, and created a new version all in one step.

10. We can see this new version by clicking the Versions tab in the top bar. Meta has created version two, although you’ll notice that it has no name.

Screenshot of versions in Google Tag Manager, with nameless version 2 highlighted

This is another reason that I don’t 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 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 Meta Events Manager, click setup, and authorize Meta 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 Meta Pixel Installation

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

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

Screenshot of manually installing Meta pixel with Google Tag Manager

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

Screenshot of pixel connection popup with manual installation option highlighted

Adding Pixel Code to All Pages

Once you select the manual option, Meta instructs us to add this base code on every page of our website. We’ll get to that in a moment.

3. For now, we’re going to click on the code to copy it to the clipboard.

Screenshot of pixel base code and Meta's installation instructions

Back in Google Tag Manager, we need to create a new Tag.

4. Under the Workspace tab, click the Tags header and click the New button.

Screenshot of GTM dashboard with Workspace, Tags, and New highlighted

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

5. Give your new Tag an informative name. Here, I’ve used FB – Base Pixel.

6. Select the Custom HTML Tag type, then paste your copied code into the HTML field.

7. We want this Tag to fire on our whole website, so add a trigger for All Pages and click Save.

Screenshot of tag configuration with name, type, HTML, and trigger highlighted

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 Meta’s code may break in certain cases.

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

Screenshot of close-up Meta Pixel JavaScript 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 Meta events. This will load a JavaScript library from Meta’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 Meta Pixel ID. This line of code uses the loaded library to activate your specific pixel on your page.

When the Meta Pixel is activated, it will listen to events, collect them, and report them to the Meta Events Manager. Line 12 is an event. It tells Meta 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:

Screenshot of Meta Pixel HTML code with noscript tag deleted

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.

Screenshot of Google Tag Manager dashboard with Preview button highlighted

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 Meta Pixel Helper.

💡 Top Tip: If you don’t have the Meta Pixel Helper Chrome extension, we recommend it! Get it here.

Screenshot of website shop page with pixel and pageview tags highlighted in Google Tag Manager and Meta Pixel Helper
Testing with Meta Pixel Helper Extension

If we investigate the Meta Pixel Helper, we can see that a pageview event has been fired and that some microdata have 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 the pixel location.

Top Tip: How “Microdata Automatically Detected” Works

When we install Meta 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 Meta Pixel Helper. The green checkmark icon identifies events that we set up and fire ourselves using Google Tag Manager.

Testing with Meta Test Events

We should also test our Tags using Meta’s Test Events function, which will verify that Meta is receiving the events that were recorded. In the Meta 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.