MeasureSchool logo
Search
Close this search box.
Search
Close this search box.

How to Set Up Meta Pixel (Facebook Pixel) with Google Tag Manager

Last Modified on January 3, 2024

Would you like to track user activity on your website?

Getting the Meta Pixel (previously Facebook Pixel) installed on your website is an essential part of running Facebook Ads. But what is a Meta Pixel? It is a piece of code that loads a small library of functions whenever a visitor takes an action you want to track (called conversions).

GTM For Beginners

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

Tracked conversions can then be used to measure the effectiveness of your ads. With Pixels installed, you can also define custom audiences, set up dynamic ad campaigns, and more.

In this post, we’ll show you how to set up Meta Pixel with Google Tag Manager.

Here is an overview of what we’ll cover in this guide:

Setting Up Google Tag Manager

Let’s first put your Google Tag Manager account into preview mode.

On your homepage, click on Preview.

Preview mode on Google Tag Manager

If you don’t have a version published yet, it will ask you to publish an empty version first.

Click on Publish empty version.

Publishing an empty version of a GTM container

Then, click on Preview.

Preview prompt for empty container version

This opens Google Tag Assistant on another tab. Here, you will connect the Tag Assistant to your site.

Enter your site URL in the space provided, then click on Connect.

Connecting Google Tag Assistant to the demo site

Your site should open on another tab, and the debug information in Tag Assistant will come from this page.

We can confirm that the tab is connected to Tag Assistant if there is a popup at the bottom-right corner of the page.

Confirmation window of demo site being connected to Tag Assistant

Since we don’t have any tags or variables yet, nothing will fire, and Tag Assistant will be empty. Going back to our Tag Manager, we are notified that a new container version is available.

Click on Update Workspace at the bottom-left corner of the page.

New container version available prompt

Then, click on Update.

Updating workspace for new container version

Creating a PageView Tag

There are different types of Pixels you can deploy on your website. In this guide, we’ll teach you how to set up Meta Pixel for PageView event tracking.

For eCommerce sites, you might want to utilize Meta Pixel’s purchase tracking. To not miss out on important conversion data, check out our guide on Meta Pixel Purchase & Conversion Tracking with GTM.

Go to Tags New.

Creating a new tag in GTM

Next, we’ll configure our tag. An official Meta Pixel template is absent from the list of templates provided by Google, but there is one from the community gallery.

Click on Tag Configuration Discover more tag types in the Community Template Gallery.

Creating a tag configuration from the community template gallery

From here, search for “Facebook” in the search bar and select the Facebook Pixel template.

Selecting the Facebook Pixel template from the community template gallery

You can see that the community gallery provides multiple templates that we can use. We have templates for the conversions API, customer support, and the Meta Pixel. These can be helpful to you in the future, but for now, let’s select the Pixel template by Facebook Incubator.

Selecting any template opens a window where you can see details such as a brief description of the template, recent changes, and the specific actions the template wants to perform while executing.

Click on the Add to workspace button.

Adding the Facebook Pixel template to the workspace

A popup will appear, asking if you want to give the template permission to perform a list of specific actions.

We’ll accept this by clicking on Add.

Granting permissions to template

The Facebook Pixel template is now installed on our page, and any time we go back to our tag configurations list, we should find this template under the custom tag templates.

Next, we need to provide our Meta Pixel ID.

To find our Pixel ID, go to the Events Manager in our Meta Business Suite. In our Pixel’s overview tab, the Pixel ID can be located on the right side. You can conveniently copy this value by clicking on it.

Location of the Meta Pixel ID in the events manager

Go back to Tag Manager and paste our Pixel ID in the space provided.

Placing the Pixel ID in the tag configuration

Creating a Variable for your Pixel ID

Before proceeding to our other tag configurations, I recommend saving the Pixel ID in a variable.

A variable is a placeholder we can reuse so that we don’t have to remember the Pixel ID value or keep going back to our events manager to copy it.

First, click on the brick icon beside the text box.

Choosing a variable for the Pixel ID

A new window will open. Click on the plus (+) sign in the upper-right corner to create a new variable.

Creating a new variable in GTM

The next step is to name our variable. To make it easier to know what variable we have, I’ll have the variable typed first in the name, followed by what variable this is. Since our Pixel ID has a constant value, we will have a constant variable type.

I’ll also put the value at the end to know which specific Pixel ID this is, in case I choose to create more Pixels. Feel free also to follow this naming convention.

Type the name on the space provided, then click on Variable Configuration.

Naming the variable and selecting the variable configuration

Scroll through the list and select Constant.

Selecting a constant variable type configuration

Input the Pixel ID in the value, then click Save.

Inserting a value and saving the new variable

The two curly brackets enclosing the variable name indicate that we are using a variable.

Using a variable for the Pixel ID

Next time you create a new Meta Pixel or tag that requires your Pixel ID, you can simply select this variable.

We can now proceed to the remaining configurations. Since the PageView option is selected by default, we won’t have to change anything in the event name. Let’s learn how to apply a trigger.

Applying a Trigger

Scroll to the bottom and click on Triggering.

Applying a trigger for the new tag

Since we are making a PageView tag, we need this tag to fire on all pages when they are opened. There are a few pre-configured options, and the trigger for all pages is one of them.

Simply click on All Pages to select this configuration.

Creating a trigger on all pages

Now, all we have to do is name our tag. Like before, the tag name should start with the tool, in this case, Facebook, then event, and lastly the type of event, which is PageView.

Type this name, then click on Save.

Applying a name and saving the new tag

We’ll have to go into preview mode again. We already were in preview mode, but we always need to click on it again after we make changes so that it updates.

Click on Preview.

Entering preview mode

We’ll be redirected to the Tag Assistant. When our site is connected, click on Continue to view our debug information.

Continuing to the Tag Assistant

Here, we can see that our PageView event has fired successfully.

Successful firing of PageView event tag

Great, our Meta Pixel seems to be deploying properly while in preview mode.

Now, the final step on how to set up Meta Pixel is to test and debug it to ensure it is deployed successfully.

Testing

A helpful tool that can aid us in testing our Meta Pixel is the Facebook Pixel Helper extension. Installing this extension on Google Chrome can provide information about your Pixel, what events are sent to it, and if something went wrong or was not deployed correctly.

We can find these details by clicking on an event. To illustrate, let’s look at our PageView event.

Click on the extension, then on the PageView event.

PageView event in Facebook Pixel Helper extension

Here, we’ll see details like the setup method, URL called, load time, and Pixel location. We can also see that it has a green check mark, which indicates that the PageView event has been fired correctly.

You will also see that microdata was automatically detected. Meta Pixel has the functionality to go onto the page, scan it, and find any kind of special information on the page itself. This data is not something we can manipulate, but something that Meta tracks automatically.

 So, our Facebook Pixel Helper shows us that we have fired our tag correctly and everything should be working. However, we still need to verify if it sends data to Meta.

Testing Browser Events

We should look at our events manager and test our browser events.

Go to the Test Events tab. Scroll down and paste our URL in the space provided for testing browser events. Finally, click on Open Website.

Testing browser events in the events manager

This will set a cookie to your website that lets it send data over to Meta. Our site will also open in another tab. However, this tab will not be connected to our Tag Assistant. Since our tag is not yet published, the PageView event will not show in the events manager.

If we open the Facebook Pixel Helper extension in this tab, we can also see that there is no Pixel being deployed and nothing could be tracked.

No Pixels found in the demo site opened

Since the cookie is now set on our browser, we can close this tab and go back to the tab connected to our Tag Assistant.

After refreshing the page, we can see that the Facebook Pixel Helper extension detects Pixels being deployed, as indicated by our extension being colored and a green box showing the number of events detected.

Facebook Pixel Helper detects Pixels being deployed successfully

If we go back to our events manager, we can see that the PageView event is now being sent over to Meta.

PageView event successfully sent to the events manager

Great; everything works properly! Let’s submit a live version to deploy this Pixel on all the browsers and all the users coming live to our website.

Publishing

Let’s go back to Tag Manager and click Submit.

Submitting the changes made in GTM

This action opens a new window where we can configure our submission. We can provide a name for this version as well as a description.

For now, let’s just provide a name and click Publish.

Publishing the changes made to the site

Now, our PageView tag should be live on our website. We can now exit ourTag Assistant so that our site will no longer be connected to it.

Reload our website on a tab and open our Facebook Pixel Helper extension to see if the PageView event is sending properly.

Successful detection of PageView event in the Facebook Pixel Helper extension

Great, our Pixel is being deployed. If you’re not getting the same results, you might need to do a hard refresh by clicking on Cmd+Shift+R on Mac or Ctrl+Shift+R on Windows. This action removes the cache on your browser, which should fix the problem.

Now, for our final check, go back to our events manager where we should see another PageView event.

Successful detection of PageView event in the events manager

We have now successfully deployed our PageView event tracking for our Meta Pixel.

FAQ

How do I publish the Meta Pixel changes made in Google Tag Manager?

To publish the changes made in Google Tag Manager, follow these steps:

1. Click on Submit in Tag Manager.
2. Provide a name and description for the version.
3. Click Publish to make the changes live on your website.

How can I verify if the Meta Pixel is successfully deployed?

You can verify if the Meta Pixel is successfully deployed by using the Facebook Pixel Helper extension. It will show if the Pixel is firing correctly and sending events. Additionally, you can check the Events Manager to ensure that the events are being tracked and received by Meta.

What should I do if the Meta Pixel is not working correctly?

If the Meta Pixel is not working correctly, you can try a hard refresh of your browser by pressing Cmd+Shift+R on Mac or Ctrl+Shift+R on Windows. This action clears the cache and reloads the page, which can resolve any caching issues. You can also double-check your configurations in Google Tag Manager and ensure that the Pixel ID and triggers are set up correctly.

Summary

Those are the steps on how to set up Meta Pixel using Google Tag Manager. We went through creating a PageView tag, creating a variable for the Pixel ID, and testing our tag using the Facebook Pixel Helper extension and the events manager.

This guide is part of our Meta Pixel Tracking course over at MeasureMasters. If you want to do more with your Meta Pixel, such as how to set up custom events, attach dynamic data to your events, and more, then check out the membership.

Not ready to invest in the membership yet? Check out our complete training guide for Meta Pixel Tracking with Google Tag Manager. Here, you’ll learn three ways of installing Meta Pixels.

What other Pixels will you install on your website? What types of conversions do you want to track? Let us know in the comments below!

MeasureMasters

REOPENED!

Master Data & Analytics with MeasureMasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
MeasureSchool Locker

Unlock our Free Tools, Templates and Resources

now it's time to

Start measuring like a master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.

Ready to take your digital marketing to the next level?

Subscribe to our newsletter and stay ahead with our latest tips and strategies.