
December 6, 2022
How to Install Meta Pixel with Google Tag Manager (Facebook Pixel)
Updated: December 6th, 2022
Note: Facebook has rebranded itself to Meta, but many of its websites’ resources remain branded as Facebook resources. For this reason, we will use both names (Facebook pixel and Meta pixel) interchangeably.
If you use paid advertising to acquire new traffic, you are probably already running Facebook ads. However, if you don’t measure the effectiveness of your ad campaigns. you burn dollars hoping that maybe something is working.
If you use Facebook ads, you need to use Facebook Pixel to measure the success of your campaigns. Deploying the Pixel on your website helps Facebook understand your website and how users interact with it. By extension, Facebook will understand how conversions happen on your website.
A conversion could be a lead form submission, purchase event, or something else (we will cover these examples here).
Whenever a visitor converts, the pixel will track this and use this data to optimize your campaigns.
In this guide, I will show you how to install Meta Pixel with Google Tag Manager (not only basic pageviews but also other things, like events). The topic is quite extensive. Therefore, I recommend buckling up and diving into this. Also, consider subscribing to my newsletter to stay up-to-date with GTM.
This article will cover only the essential things to know when deploying the Facebook Pixel via Google Tag Manager. For a more detailed guide/tutorial, I have extensive lessons about FB Pixel + GTM in my GTM course for beginners.
And if you also want to implement Facebook tracking with server-side GTM (with Facebook Conversions API), I explain that in the intermediate/advanced GTM course.
Table of Contents
+ Show table of contents +
Before We Continue
If you are new to Google Tag Manager, I recommend that you read my free e-book “Google Tag Manager for Beginners” before you continue with this blog post about Meta Pixel.
Otherwise, you will feel too overwhelmed.

A Quick Introduction to Meta Pixel (Facebook Pixel)
Facebook Pixel is a solution created by Facebook that allows you to measure user/visitor behavior on your site. This information can further be used to track conversions, optimize campaigns or build audiences based on the data you send.
Once you place certain JavaScript code snippets on your site (and activate them based on user/visitor behavior), this data is sent back to Facebook. I will not dive deeper into the possibilities (because this blog post focuses more on the implementation). But if you are new to FB Pixel, you can get more information here.
In a nutshell, by using Facebook Pixel, you will be able to:
- Create custom audiences for remarketing purposes (e.g., retarget those who have scrolled at least 50% and spent at least a minute or those who added a product to a cart but did not purchase).
- Track conversions. Conversions are the actions you want your users to complete on the website because of their importance to your business. These could be signup, subscription, purchase, etc. By tracking conversions, you can tell Facebook that X visitor has completed specific actions that align with your business goals. With this information, you can also deduce which ads are more effective in reaching your goals and which ones aren’t.
- Additional targeting opportunities. By tracking certain interactions (like leads or purchases), you can instruct Facebook to find lookalike audiences (people with similar browsing behavior to your recorded audiences) and show your ads to them based on those who have already converted on your site.
Let’s put all the fluff aside and focus on the nitty-gritty side — technical implementation: how to add Facebook Pixel to your site with Google Tag Manager, how to send events, how to implement advanced matching, user properties, etc.
How to get the Meta Pixel code?
To get started, go to the Facebook Business manager and get the Pixel ID. We will need this Pixel ID in the following chapters of this blog post.
Disclaimer: Facebook is constantly changing the user interface here. Therefore, there is a high chance that my screenshots will not match what you see in the interface. Once I had a case where four people in my GTM workshop saw different versions of the interface simultaneously. So, if you don’t find a certain option, keep looking.
Click the Menu icon in the top right corner and go to Events Manager.
Then go to Data Sources and choose the Pixel you’re interested in deploying.
If you don’t have any Pixels yet, click the Set Up Pixel and follow all the necessary steps.
In one of the steps, Facebook will offer you several ways to add the pixel. Let’s look at this at a later time.
Your main goal, for now, is to get the Pixel ID that looks like this (of course, the value will be different):
The ID is just a combination of numbers. Once you get it, copy it (because we’ll need it in the next chapter of this blog post).
#1. How To Install Meta Pixel with Google Tag Manager: Pageview
Back in the older days (pre-2019), the only way to install Facebook Pixel via Google Tag Manager was by using the Custom HTML tag template. This meant working directly with JavaScript code, editing it a bit, etc.
These days, things are much simpler and more elegant because Simo Ahava created a Facebook Pixel Custom Template and shared it with everyone. It will make the entire Meta Pixel tag management process more convenient and less prone to errors.
Later, Facebook (facebookarchive) acquired this template. Nevertheless, it is still the same template.
#1.1. Add Facebook Pixel Custom Template
If you go to Tags > New (in Google Tag Manager) and search for “Facebook”, you will not find any tag template. That’s because, by default, no such tag exists in the GTM container. Instead, you will have to add the event tags manually.
Luckily, there is a very convenient feature called Community Template Gallery, where anyone in our industry (who can code) can create custom templates of Variables or Tags.
In Google Tag Manager, go to Templates > Tag Templates > Search Gallery and in the search field, enter Facebook.
You will see this template. Click on it and add it to your Workspace. A new template will appear in the Tags > New > Custom section. You can reuse it multiple times for tags in the same container.
#1.2. Meta Pixel Pageview Tag
Everything starts with the basic implementation of the Meta pixel. In other guides (especially the older ones) found online, you might see a term called Facebook Pixel Base Code (or something similar). In the next several steps, I will explain exactly that (but without using the term Base Code).
In Google Tag Manager, go to Tags > New > Facebook Pixel. Enter the settings you see in the screenshot below (if some fields are empty, I did not change anything there):
In the Facebook Pixel ID(s) field, enter the Pixel ID you copied in the How to get Facebook Pixel ID? chapter. This field lets Google Tag Manager know the exact Meta ad account to send this data.
For now, leave all the other settings as they are.
Set the tag to fire on All Pages.
#1.3. Constant Variable for the Pixel ID
Spoiler alert: Similar to GA4 custom events, we will need to create a separate Meta Pixel tag for each interaction. The Meta Pixel ID must be present in every tag.
Suppose you deploy 50 or even more tags that send data to Facebook. You would need to insert the Pixel ID 50+ times manually. But what if one day, you have to switch to another Pixel ID? You will need to change the ID on all the tags manually.
To make things more optimal, you could create a GTM Constant variable that stores your Meta Pixel ID. Then you could reuse the same variable every time you need it. Once you need to change the Pixel ID, you’ll need to do that just once — in the variable.
In Google Tag Manager, go to Variables > User-defined Variables > New > Constant and paste your Meta Pixel ID.
I’ve saved the variable here as Constant – Facebook Pixel ID. Then open the previously created Facebook Pixel pageview tag, and insert this variable instead.
#1.4. Test the Facebook Pixel Tag
Now, it’s time to ensure that you have implemented everything correctly.
GTM Preview and Debug mode. In Google Tag Manager, enable the Preview and Debug mode. The page where you want to install the Meta Pixel will open in a new tab.
Check the debug window for the Container Loaded event. Click on it, and you should see that your Facebook Pixel tag has fired.
Facebook Pixel Helper. Similar to GA4, you must ensure that the Meta Pixel has received the event data. Meta has a browser extension called Facebook Pixel helper. Install it, and this icon appears in the top right corner of your Chrome.
Refresh the page, AND if you have properly deployed the Facebook Pixel, its color will change to blue, and you will see a number within that icon.
Click that icon, and let’s check what it recorded. We see that a PageView event was fired, and there is a green check mark icon next to it. That’s good! If there were a loading or yellow icon, that’d mean a possible problem. But the green icon indicates that we’ve done it correctly.
Meta Pixel Reports
In Facebook Business Manager, go to Events Manager > Data Sources > Select your Pixel and then Test Events.
Enter the URL of your website (if I were working with my site, I would enter https://www.analyticsmania.com) and click Open Website. After you are redirected to your website, go to the Test Events tab and check whether you see Pageviews coming from your device. If nothing appears, go back to your site and refresh the page once again.
If everything is fine, you have implemented the Meta Pixel with Google Tag Manager correctly.
#2. Other options on how to install Meta Pixel with Google Tag Manager
There are two other options on how to install the Pixel, but I’ll mention them just very briefly (because we still have a lot of material to cover):
- Manually by using the Custom HTML tag (semi-recommended). It was a recommended method before early 2019 (when the Custom Template was unavailable).
- “Done for you”. I don’t recommend this one.
#2.1. Manual installation using the Custom HTML tag
You can manually deploy the Custom HTML tag when you have access to the complete Meta pixel code. Inside the tag code, you would need to make modifications if you wanted to capture additional parameters.
You would also need to use Tag Sequencing for every event tag to ensure that the Facebook Base Code fires every time an event or pageview occurs.
Where can you get the full Facebook Pixel code? Go to your chosen Meta Pixel in the Events Manager and select your pixel. Click on Manage Integrations, and a new window will appear on your screen.
Assuming that you have already created the Pixel, there should be an option like in the screenshot below. From there, click Add to Another Website.
A new screen will come up, asking you whether you want to install it manually or via a partner integration. Choose Manually add pixel code to website, and the browser will redirect to a new page.
Copy the main code from there:
Go to Tags > New > Custom HTML tag in Google Tag Manager and paste the code. <noscript> code is useless there, so you are free to remove it.
#2.2. “Done for you”
When you try to get the full Facebook Pixel JavaScript code, Meta offers several options for installing the pixel. One of them is “Google Tag Manager”.
I highly encourage you NOT to choose this option. This built-in installation option via Google Tag Manager is a bit tricky.
- You will need to grant Meta access to your Google Tag Manager container (it can add, delete tags and do all the other sorts of things. And I don’t want to give that kind of permission.)
- When you grant access, Meta will automatically add the Pixel code to your container and immediately publish your container (regardless of whether you have other (possibly untested) changes.
- The name of that tag will probably not match your current naming convention.
So, to get just one tag created in your container that fires on all pages, giving Meta access is not a good option.
That’s why you should not choose the “Google Tag Manager” option (regardless of how counter-intuitive this sounds). When you install the container yourself, you will still use GTM and will have full control over what happens in your container.
#3. How to Track Events with Facebook Pixel and Google Tag Manager
Up until this point, we managed to do a basic Facebook Pixel implementation via Google Tag Manager. But Pageviews alone don’t tell much about what a visitor/user is doing on your site.
For example, did the visitors just land on a page and leave? Or did they click something, scroll through, submit a form or make a purchase?
That’s where event tracking is important. Only by providing Meta with additional and quality data can you expect to get the most out of it.
When it comes to event tracking with Facebook Pixel, there are two types of events:
- Standard
- Custom
#3.1 Standard vs Custom Facebook Pixel events
According to the official Facebook documentation, standard events are the most common actions a visitor/user can do on a site. The Meta platform recognizes and supports those events across all ad products. These events can be used to build audiences and optimize conversions.
Here are the standard events that FB pixel supports:
- PageView
- AddPaymentInfo
- AddToCart
- AddToWishlist
- CompleteRegistration
- Contact
- CustomizeProduct
- Donate
- FindLocation
- InitiateCheckout
- Lead
- Purchase
- Schedule
- Search
- StartTrial
- SubmitApplication
- Subscribe
- ViewContent
The titles are pretty much self-explanatory. So if you want to track an interaction mentioned in the list above, definitely use the Standard Event.
Custom events are interactions that do not fall under standard events. For example:
- Scroll
- Time on page (e.g., when you fire an event after a visitor spends 5 minutes on a page)
- Viewed a certain element
- Outbound link click
- Video play, etc.
It’s all up to your imagination.
#3.2 A Tag + a trigger for a Standard Event
Let’s say you want to track when someone enters their email on your landing page. Looking at the list of possible standard events, this one should be considered a Lead. So, let’s create a tag that will send the “Lead” event to Facebook.
In Google Tag Manager, go to Tags > New > Facebook Pixel and enter the following settings:
As you can see, in the Event Name field, we chose Lead. For now, keep all the other fields empty. The next thing for the tag to work properly is to define a trigger.
This depends on the kind of interaction you want to track. Triggers are a different story that requires you to learn a lot.
If we are interested in tracking leads, we must deal with forms. While I will not dive deeper into how to do that, here’s a very extensive guide on how to track forms with Google Tag Manager.
If you struggle to track interactions on your own, you might need to ask a developer for help. They will then push data to the Data Layer, and you need to use the Custom Event trigger to catch that data.
As for the lead, let’s imagine that a visitor (after entering email) is redirected to a “Thank you” page www.example.com/thank-you. We could create a Pageview trigger that fires if the Page URL contains /thank-you.
But remember that form tracking is SO full of nuances, and your trigger might look very different.
#3.3 Test the Standard Facebook Pixel Event
After you have created a tag and a trigger, save your changes. Then enable the GTM preview and debug mode, and navigate to a contact form to submit dummy lead details. In my example, once I enter the details, I am redirected to a “Thank you” page.
Since my trigger is based on a pageview, I check the Container Loaded event in my preview and debug window.
… and then check whether my Facebook Pixel tag (related to a lead) has been fired. If yes, that’s a good start! Read this guide if you are struggling with debugging Google Tag Manager setups.
The next step (just like it was with the FB Pageview tag) is to check the Facebook Pixel Helper. After the Lead tag has fired, click the Pixel Helper’s icon and check whether you see a green icon next to a Lead event.
The final step is to test the reports in Facebook Business Manager. Go to Events Manager > Data Sources. Choose your Pixel and then click Test events. Check whether you see the Lead event there.
#3.4 A Tag + a trigger for a Custom Event
In this example, let’s say we want to track whenever someone presses the Play button in an embedded Youtube video player on our landing page. First, let’s create a tag. Go to Tags > New > Facebook Pixel and enter the following settings.
We want this tag to fire only when someone clicks the Play button. Therefore, we need to create a Youtube video trigger for that. Click the Triggering section in your Facebook Pixel tag and select the Plus icon in the top right corner.
Then click Trigger Configuration > Youtube video and enter the following settings (you can add more if you want, like Progress)):
Save the trigger, and it will be added automatically to your Meta Pixel tag.
Now, if you want to add some additional data to the custom event, you can do this in Object Properties.
Navigate to that section and add any custom parameters you need. You’ll notice that the variables I’ve used are both built-in in Google Tag Manager. You just need to enable them in Variables > Built-in Variables > Configure:
#3.5 Test the Custom Event
The testing principle is the same as it was described in #2.3. chapter of this blog post (related to testing the Standard Events). Your goal here is to make sure that:
- The Meta Pixel tag fires
- Facebook Pixel helper shows the green icon next to that event
- Test Events section in Facebook Events Manager shows the event that you’ve just sent
#3.6 Tips/Ideas on how to track other custom events
It depends solely on your imagination which custom events you want to track. If you’re not sure about Google Tag Manager’s potential, here are some ideas:
- How to track videos with GTM
- How to track file downloads
- How to track outbound link clicks
- How to track forms
- How to track clicks
#4. Send additional parameters to Meta Pixel with Google Tag Manager
With Facebook Pixel, you can send not only events but also additional values (e.g., order total, video title, etc.). We have already done that in the previous example of the custom video event.
You can find a full list of supported standard parameters here. The majority of them are optional. If you are working with a custom event, feel free to come up with any custom parameter you want.
Of all the Standard Events, only the Purchase event requires currency and value.
Also, by looking at the documentation, you can see which fields are expected by Meta. For example, if you send the AddToCart event and want to send some custom data (like product price, etc.), the Facebook pixel will expect content_ids, content_name, content_type, contents, currency, value. None of these are required when it comes to AddToCart.
So, when you plan to pass some parameters, refer to this page and check the table of standard events + their parameters.
Let’s, for example, track a Purchase and see how a GTM tag should be configured.
#4.1. Example – Purchase Tracking with Additional Parameters
Imagine that visitors are redirected to a “Thank you” page after making a purchase. I’ve asked a developer to push the transaction data to the Data Layer on that page
Here’s that code snippet that a developer activated (that contains the transaction info).
<script> window.dataLayer = window.dataLayer || []; dataLayer.push({ 'event' : 'transaction', 'currencyCode' : 'EUR', 'transactionId': '1234', 'transactionAffiliation': 'Acme Clothing', 'transactionTotal': 38.26, 'transactionTax': 1.29, 'transactionShipping': 5, 'transactionProducts': [{ 'sku': 'DD44', 'name': 'T-Shirt', 'category': 'Apparel', 'price': 11.99, 'quantity': 1 }] }); </script>
Keep in mind that this code contains dummy values. A developer should write some functions and custom logic in his/her code that replace dummy values with actual purchase data.
Looking at the official Meta Pixel documentation, two fields are required:
- Revenue
- Currency
Let’s send them. From that data layer code snippet, there are two keys we’re interested in: currencyCode and transactionTotal. We could reuse them and send their values to Facebook Pixel. To do that, first, let’s create two Data Layer Variables with the following settings:
Important: those values are case-sensitive. Thus, enter currencyCode, not currencycode.
Then, create a Meta Pixel Tag with the following configuration:
To record the values needed for the Purchase event:
- Navigate to the Object properties
- There, enter the Data Layer variables created.
- Make sure the names match the format Facebook has provided.
We will send “EUR” as a currency (because “EUR” is the value of the currencyCode in the Data Layer) and 38.26 because that’s the value of the transactionTotal in the Data Layer).
Next, click the Triggering section in your Facebook Pixel tag and select the Plus icon in the top right corner to create a new trigger. Then click Trigger Configuration > Custom. We want that dataLayer.push (that contains the transaction data) to use as a trigger.
In the Custom Event Trigger, enter transaction event name (because that is the value of the ‘event’ key in that dataLayer.push).
Save the trigger and then save the tag.
#4.2. Test the event with additional parameters
Now, it’s time to test the setup. Refresh Preview and Debug mode, go to your website, and complete a purchase. By now, you should already know the drill:
- Check whether the Facebook Pixel tag has fired upon the purchase (in my case, I should click the transaction event in the debug console and then check whether the tag has indeed fired).
- Check whether the Purchase event has a green icon next to it. Also, expand the event to see if all the parameters were sent as intended.
- Check whether the Test Events section recorded the event with custom parameters. Check Chapter #3.3. to learn more.
#5. What can you do with this data that you sent to Facebook?
This question goes beyond the scope of this blog post. Thus, I’ll quickly mention the possibilities:
- By sending events to Facebook Pixel, you can create Custom Conversions
- You can also build remarketing audiences
- Optimize for conversions
#6. Other Things to Know about Facebook Pixel with Google Tag Manager
The first five chapters of this blog post mentioned the key things you should know to implement FB pixel via GTM.
However, that’s not the end of the list. Below, you will find other things you might find useful. However, instead of explaining them in great detail, I will either give a short glimpse or will provide links for you to investigate them individually.
#6.1. Automatic Data Detection
Following the steps in this guide, you probably have already noticed that Facebook Pixel Helper shows things like Microdata Automatically Detected or Button Click Automatically Detected. This is called Automatic Data Detection.
Meta Pixel tries to capture various additional data on your page. However, I don’t trust auto-tracking solutions because they might end up capturing a lot of garbage data too.
That’s why I usually disable this feature. If you want to do the same, go to your Facebook Pixel tags > More Settings and tick the Disable Automatic Configuration checkbox.
Do that in all Facebook Pixel tags.
#6.2. Sending Data to Multiple Facebook Pixels on the Same Page
There might be cases where you have to send the data to multiple Facebook Pixels, e.g., one pixel is just for the department and another for the entire company. That is not a problem for Facebook Pixel, and it’s fairly easy to do with a Custom Facebook Pixel tag template.
If you want to set the tag to send data to multiple pixels, enter them in the Facebook Pixel ID(s) field, separated by a comma. Or you can enter multiple IDs in the Constant Variable.
Or you can separate multiple Constant Variables (each contains a single FB Pixel ID).
All of these options will work.
#6.3. Advanced Matching
Facebook Pixel Advanced Matching allows advertisers to connect their customer data — such as email addresses, phone numbers, and other demographic data — to their Facebook campaigns, therefore, target more precisely.
In other words, together with events, you can also send Facebook user’s email address, phone number, gender, city, etc.
Important: All this information is considered Personally Identifiable Information (PII), and you need to get consent from your users/visitors before sending this data (I’ll mention more information later).
When you send personal information as Advanced Matching parameters, Facebook Pixel automatically hashes that data using the SHA-256 hashing algorithm.
First, I will show how to set the Advanced Matching up in Google Tag Manager. Imagine that you work with a website where users can log in and use your services. You could ask a developer to push the following data to the Data Layer (and do this before the GTM container code is loaded):
window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event' : 'userData', 'userId' : '123abc', 'email' : '[email protected]', 'city' : 'newyork', 'gender' : 'm', 'country' : 'us' });
Remember that the code above is just a dummy code/example. Your developer’s code should replace those placeholder values with some actual user data.
#6.3.1. Create Data Layer Variables
For each data point you wish to access, you’ll need to create a separate Data Layer Variable, for example:
Do the same for the rest of the data points.
#6.3.2. Set the Parameters in the FB Pixel Tag
Now, go to Tags and open your Meta Pixel Pageview tag. Tick the Enable Advanced Matching checkbox, and a new Custom Information Data Parameters section will appear.
Expand that section and enter the following settings. First, since I have the email, city, gender, and country, I’ll create a separate row for each one of them, pick the proper Parameter name and then insert my Data Layer Variables in the Parameter Value column.
You can do the same for all of your Facebook Pixel tags. However, it’s completely enough to do that for the PageView tag (because usually, it fires the first on the page load).
#6.3.3. Test the setup
Check the Facebook Pixel Helper. You should see the Advanced Matching Parameters that were sent:
Also, you should use the Advanced Matching Parameters in the Test Events section.
#7. Get the Consent Before Tracking (#GDPR, or any other related privacy regulations)
Last but not least — user privacy. All these things you can set up in Facebook Pixel with Google Tag Manager are neat. However, you cannot do that unless you get consent from your visitors/users.
Various regulations protect users’ privacy and require businesses to get consent from users/visitors before sending data to Facebook Pixel and other third-party platforms. These regulations are also continuously updated to stay relevant to the times.
I’m not a lawyer, so please don’t ask me for legal advice. Do that with your legal department instead.
With Google Tag Manager, you can control how your tags fire depending on whether a visitor/user gave consent for marketing purposes.
If you want to learn how to implement a cookie consent mechanism on your site via Google Tag Manager, you should first read this guide. Or enroll in this course to get more updated instructions.
After you implement the consent mechanism, you’ll end up with a bunch of blocking triggers and consent-related variables.
Usually, you would use the blocking triggers (which I advised people to do in the past). Now, FB pixel offers a cool feature that makes the management a bit different. Of course, you can still follow my guide’s general guidelines and use the blocking triggers. But the newer solution (developed by Facebook) is more powerful.
Why? Because with the latest solution, we will continue firing tags even if consent was not given. However, the data will not be sent. It will be added to a queue. And once the visitor gives consent, all the events from the queue will be sent to Facebook.
For example:
- A visitor lands on your page
- Scrolls down (the FB tag is fired, and the event is added to a queue)
- Stays on a page for 1 minute (another tag fired, and the event is added to a queue)
- A visitor gives consent by clicking a button in a popup (or a bar)
- The events are kept in a queue, waiting for the user’s consent. Once a visitor agrees to be tracked, Meta will start receiving the event data.
Important: if the page is reloaded/refreshed, a user navigates to another page (before giving consent), and the queue will be cleared.
#7.1. Consent Granted
You will see a drop-down called Consent Granted in the Meta Pixel tag. By default, its value is set to true (meaning that when the tag fires, the data is sent to Facebook).
However, if you implement the cookie consent solution I’ve described here or anything similar, you’ll have variables like “Consent given to marketing”, “Consent given to statistics”, etc.
These variables should return true or false depending on whether the user/visitor consented to be tracked.
When it comes to Facebook Pixel, we will need to use a variable that is related to Marketing consent. In my case, that is Regex – targeting cookies allowed (you can get it too if you implement this solution):
This variable uses another variable called cjs – false. It is a Custom JavaScript variable that contains the following code:
function() { return false }
Use that regex table variable in the Consent Granted (GDPR) field. Important: This field accepts true or false. So if your variable returns different values, like yes or no, you might need to use regex, lookup, or another variable that transforms the output.
#7.2. A Tag that Fires When Consent Was Given
To send all the waiting events in the queue, we must send any event containing the Consent Granted: true. For that, I usually use the Custom event called consentGiven (you can name it whatever you want).
This is the configuration of that tag:
The trigger depends on what kind of cookie consent solution you have implemented. For example, some setups use the Custom Event trigger consent_marketing, while others might use a different one.
So make sure you fire the aforementioned custom event tag only when consent for marketing purposes was given.
If you have implemented this solution, then your trigger can look like this:
Sorry for not being very specific here. However, the “it depends” aspect is too strong.
#8. Meta Pixel + server-side Google Tag Manager
If you want to make your Meta Pixel setup more precise and collect data of higher quality, you should consider implementing a server-side solution too.
According to Meta, server-side tracking with Meta’s Conversion API can help you:
- Reduce the cost per action as a result of improved connectivity
- Improve measurement
- Reduce cost per action
- Increase data control
This is a much more advanced topic that I explain in the intermediate/advanced Google Tag Manager course.
Meta Pixel with Google Tag Manager: Final Words
Whew! It’s been a while since I wrote such a long blog post. Although the average post is ~3000 words, this one is over 7k. And, honestly, there are even more things to cover. However, I think the ones I’ve shared above are essential and apply to most setups.
So when it comes to the implementation of Meta Pixel with Google Tag Manager, here are the key takeaways:
- Use the Custom Facebook Pixel Tag Template for easier management
- Don’t limit yourself just to pageviews, track events as well
- However, if custom events are still available for building audiences and conversions
- It’s fairly easy to send the data to multiple Facebook Pixels at once
- Consider using Advanced Matching and User Properties
- Get consent before sending data about your visitors/users to Facebook
- Always thoroughly test. Check the preview mode, Facebook Pixel helper, FB Events Manager’s Test Events section.
40 COMMENTS
Excellent writeup. Question if you have time: I created a PageView tag to send data from my dataLayer. I see when testing I get two page views, one with no data (perhaps one that facebook sends automatically?) and one with my data. Should I somehow disable the one without data, and if so, how would I do that? I'm using gtm-templates-simo-ahava.
Check your triggers and thrn identify why your tag fires twice. This is not a tag issue. It's the trigger.
Hi Julius - great write up. If I wanted to run a report to see transaction ids passed into a FB pixel via GTM - could I do that via Facebook conversion reporting?
Transaction IDs are not passed to FB Pixel (at least my guide never mentions that), therefore, you cannot see a list of all transaction IDs.
Hi Julius,
If the existing FB pixel has been inserted to the website and now I'd like to move this FB pixel into GTM; should I remove the existing FB pixel from the website to avoid duplication?
Thank you!
Yes
Hi Julius, thank you for the insightful post. It's full of gems!
One problem I am going nuts over is Facebook Ads Manager not tracking all conversions (purchases) in Shopify. I wonder if that is even possible since some people run ad blockers.
Do you have experience with this problem? And how did you fix this?
Thanks in advance and again thank you for the post!
Hi, you will never reach 100% accuracy. Adblockers is one of the reason.
Thank you. I guess that ends my search :)
Thanks for this extensive post Julius! For Shopify, would you recommend implementing the FB pixel directly into it or implement it via GTM? I'm getting conflicting answers - thanks!
If you want to have a GDPR-compliant setup and control when your tags fire, implement it via GTM. If not, then directly. If you implement via GTM (and you're not on a Shopify plus), you won't be able to track checkout steps.
Thanks. But I'll still be able to track checkout steps with GA correct?
Facebook pixel has nothing to do with GA. So if you already can see checkout steps in GA, you will continue seeing that.
excellent article! thank you very much! but I have a question. I have to set several facebook pixels that must activate based on certain keywords in the URL. how can I manage them better? I'm currently using 5 pixel variables with 5 regex tables. but it's a huge job since I always have to add new pixel codes for my company. is there a way to create such a condition with regex table compatible with gtm and facebook pixel? example: If the URL contains HOME, then activate these pixels 111111,22222,3333 if the URL contains GARDEN then it shows these pixels 4444,5555,6666 etc? I wish I could manage multiple pixels per page by managing them all from a single regex table. is it possible in your opinion? Thank you a lot
Hi, why not. Use just one regex table variable? Add rows for different keywords and if a certain keyword is matched, then return 11111,22222,33333 pixel ids. Then use that regex table variable in the Facebook pixel custom tag template.
Hi Julius,
First of all I’d like to express my appreciation for your work, simply amazing!
This is really a great piece of content, and extremely detailed, but I’m having troubles with 8.1 and 8.2.
I’ve implemented your GDPR setup and is working great with all the Blocking exceptions, but when I tried to do what you suggested at points 8.1 and 8.2 the FB Pixels fires right away on OneTrustLoaded even if in the DL I see the value of “Regex – targeting cookies allowed” is FALSE; I’ve double checked and in FB Pixel’s events the PageView is received.
I did read the above 2 points many times, but without finding a way to get this working … perhaps I’m missing something.
Your help will be very appreciated.
Thanks!
The GDPR solution that is described in this guide says:
"we will continue firing tags even if the consent was not given, HOWEVER, the data will not be sent."
Thanks to the queue that FB pixel offers, the tag will be firing but the data will be sent only when the consent is given. Of course, if you have implemented everything as I have instructed in the guide.
Hi Julius,
Thanks for your answer.
I knew that “we will continue firing tags even if the consent was not given, HOWEVER, the data will not be sent." and this is the reason for which I wrote you. As I said in my case I see the FB PageView Tag firing and the data passed to FB even if the consent has not been given.
If we look at step 8.1, my configuration is perfectly the same as per your screenshot and the trigger is set to “Custom - OneTrustLoaded” without any exception. I would expect to have the tag firing at OneTrustLoaded and data not be sent, but instead I see the tag firing correctly and data are passed right away.
In the meantime I’ve reverted back to the setup with Blocking exception that works fine, but it would be great to have this more powerful setup working properly.
Thanks again for your time.
Difficult to comment without seeing the actual situation. There is definitely something configured improperly, otherwise, it would work. If the data is still being sent even with the GDPR settings disabled, this means that the value of your Regex variable is incorrect or:
- OneTrust changed something on their end. This means that the variable returns the wrong value.
- You have more than one FB pixel tags and not all of them have the GDPR settings configured.
Or maybe there is something else that you haven't mentioned (because it looks trivial) but it causes the data to be sent. I'm just doing some blind guesses here.
Hello,
I have probably kind of strange question. I want to remove my GTM-FB pixel integration. I did it one day ago but still seeing events in FB coming in from GTM. I removed GTM code from my website and deleted everything related to it in my GTM account (even the container containing all of this). Should I just wait couple of days ?
No, it means that something else on your website is also sending fb events.
Thank you very much.
Hello Julius,
awesome article... setting up the pixel standard events with your help was a breeze.. thank you very much!
Can I ask you a question regarding purchase events?
1) I'm already tracking purchases with custom conversions.
Would it be wise to also track purchases with a standard event via GTM? Both would be tracked via the rule URL contains "/checkout/order-received/". Or would you recommend to just one one of those?
As a follow up to this:
2) How would I best stack those in the new 'Aggregated Event Measurement' configuration?
From highest to lowest priority:
purchase (standard event)
purchase (custom conversion)
add payment info
initiate checkout
add to cart
I'm wondering if it is better to just use purchase once.
I really appreciate your site and your help.
Would love to read an article about How to set up API from you.
Kind regards,
Michael
Hi,
1. I am not a Facebook ads expert, so it's difficult to tell if there is any advantage of having purchase tracking as a custom conversion. Personally, I always track with the Purchase event.
2. Yes, I would list from top priority to lower. And in my case, I would have just the regular Purchase event (not custom conversion).
I don't have a blog post about FB Conversion API but FB API tracking setup is explained here https://www.analyticsmania.com/courses/intermediate-google-tag-manager-course/ (in the server-side GTM modules)
Thank you very much! I'm following your lead and will track it just with the standard pixel event from now on. Thanks for the link.
Cheers
Sorry for this last follow up:
When using the facebookincubator template I don't have to bother setting up 'Tag Sequencing' under Advanced Settings, right?
I read somewhere that it is important to always send the base pixel before sending one of the standard events... but there the full pixel code was put in GTM manually not with the help of the template.
tag sequencing is needed in custom HTML tags + FB pixel. Facebookincubator tag template handles that automatically
Hi Julius,
Thanks for your work and detailed article.
I wonder what are the benefits of implementing FB Pixel via Google Tag?
Will it reduce load to my website or increase the accuracy of tracking?
I currently have FB Pixel implemented via the code I put in the header.
Should I consider switching to the Google Tag method?
Many thanks,
Kon
It gives you more flexibility. If you ever want to track an additional event, you will be able to do it yourself faster (instead of waiting for developers).
Better accuracy should not be expected. And pagespeed should increase by a very very tiny margin compared to the hardcoded snippet.
Hey Julius,
I noticed that the true/false method for Consent returns the value as a string. Not as a boolean operator. So, it won't work. It's best to use custom JavaScript variable for this.
Thanks to Simo Ahava for helping me out in Slack.
Thanks, will update the guide now
Hi Julius.
First of all, thank you so much for this detailed and expert content. Like you, I'm crazy about metrics and recently started coding, so it is really satisfying to read an article so detailed and with so depth.
My case is a little bit tricky, but I'm sure you know how to figure it out:
I host webpages for my clients, so I would like to fetch their Pixel Id in my database and depending on which page the user enters, a different pixel will be sent.
P.s. I'm able to push the Pixel Id in the data layer if it sorts this out.
Thanks again man!
Just an update on this. I was able to do it by setting a data layer variable with the pixel id and then assigning it to Facebook Pixel tag template.
Heads up: Even though when you manually input the Pixel Id in the template you input numbers, they are actually strings. So when you send it with dataLayer.push(), make sure you are sending it as a string.
:)
Now that the Facebook tag is "archived" and as the GitHub page stated "These projects have been archived and are generally unsupported, but are still available to view and use", do you think using this tag is still reliable? Or shall we go and use a custom HTML tag as suggested in Meta instructions?
I am still using this template
Julius, good afternoon. I have 3 important questions and would like your help.
I'm currently installing facebook default events via GTM. However, the facebook pageview (API conversion) was installed via the Vtex integration platform.
all other events, is implementing via GTM (add to cart , contentview etc).
In this case some strange behavior arose.
1. every time I access a product page, the contentview fires 2 times: 1 containing the parameters of the product I selected, and another contentview with the variables of that product (color). How can I resolve this? should happen? The URL doesn't change when I change the color.
2. The error I get is: The facebook pixel actived 2 times on this web page, which can cause errors in your event tracking. But the pageview event doesn't fire duplicates.
3. I noticed a strange behavior, both with the tags: when I access the page, it doesn't load all the tags. When I refresh the page, it starts loading all tags as it should. What kind of behavior is this?
Thank you very much!
I believe I have found 1 of the answers:
This integration, via Vtex (CMS) creates all events by default. As I had created all these events via GTM, it was duplicating.
However, there are still 2 strange situations for me:
1. For some reason, the facebook pixel (which was installed via Vtex integration) does not fire at any stage of the checkout. It only re-fires within the purchase confirmation page. Do you know why?
2. For some reason, within the checkout, each step is understood as 1 pageview, that is, it triggers several pageviews on a single page. I used tag assistant to check. Do you know why and how to solve it?
Great article. I found this super helpful. I think it might be worth including some information about how to properly pass an Event ID using the facebookarchive GTM client-side tag when Facebook Conversion API deduplication is needed for things like Lead events. Mistakenly I tried passing my ID using the tag's "Object Properties" section. But, what I should have been using was the dedicated "Event ID" field under the "More Settings" config section. Other people might make that mistake too.
Thank you Bryan, that's exactly what I was looking for. Are the external_id and the order_id passeding into the Object Properties table?