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).
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.
If you don’t have a version published yet, it will ask you to publish an empty version first.
Click on Publish empty version.
Then, click on Preview.
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.
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.
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.
Then, click on Update.
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.
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.
From here, search for “Facebook” in the search bar and select the Facebook Pixel template.
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.
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.
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.
Go back to Tag Manager and paste our Pixel ID in the space provided.
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.
A new window will open. Click on the plus (+) sign in the upper-right corner to create a new variable.
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.
Scroll through the list and select Constant.
Input the Pixel ID in the value, then click Save.
The two curly brackets enclosing the variable name indicate that we are using a variable.
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.
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.
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.
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.
We’ll be redirected to the Tag Assistant. When our site is connected, click on Continue to view our debug information.
Here, we can see that our PageView event has fired successfully.
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.
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.
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.
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.
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.
If we go back to our events manager, we can see that the PageView event is now being sent over to Meta.
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.
Let’s go back to Tag Manager and click Submit.
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.
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.
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.
We have now successfully deployed our PageView event tracking for our Meta Pixel.
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!