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 +

• A Quick Introduction to Meta Pixel (Facebook Pixel)
• How to get the Meta Pixel code?
• #1. How To Install Meta Pixel with Google Tag Manager: Pageview
  • #1.1. Add Facebook Pixel Custom Template
  • #1.2. Meta Pixel Pageview Tag
  • #1.3. Constant Variable for the Pixel ID
  • #1.4. Test the Facebook Pixel Tag
• #2. Other options on how to install Meta Pixel with Google Tag Manager
  • #2.1. Manual installation using the Custom HTML tag
  • #2.2. “Done for you”
• #3. How to Track Events with Facebook Pixel and Google Tag Manager
  • #3.1 Standard vs Custom Facebook Pixel events
  • #3.2 A Tag + a trigger for a Standard Event
  • #3.3 Test the Standard Facebook Pixel Event
  • #3.4 A Tag + a trigger for a Custom Event
  • #3.5 Test the Custom Event
  • #3.6 Tips/Ideas on how to track other custom events
• #4. Send additional parameters to Facebook Pixel with Google Tag Manager
  • #4.1. Example – Purchase Tracking with Additional Parameters
  • #4.2. Test the event with additional parameters
• #5. What Can You Do with the Data That You Have Just Tracked via Facebook Pixel?
• #6. Other Things to Know about Facebook Pixel with Google Tag Manager
  • #6.1. Automatic Data Detection
  • #6.2. Sending Data to Multiple Facebook Pixels on the Same Page
  • #6.3. Advanced Matching
    • #6.3.1. Create Data Layer Variables
    • #6.3.2. Set the Parameters in the FB Pixel Tag
    • #6.3.3. Test the setup
• #7. Get the Consent Before Tracking (#GDPR, or any other related privacy regulations)
  • #7.1. Consent Granted
  • #7.2. A Tag that Fires When Consent Was Given
• #8. Meta Pixel + server-side Google Tag Manager
• Final Words

 

 

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.