March 30, 2020

How to Install Facebook Pixel with Google Tag Manager

Updated: March 30th, 2020. If you are using paid advertising to acquire new traffic, it’s very likely that you already use Facebook ads. However, if you don’t measure the effectiveness of your ad campaigns and just burn dollars hoping that maybe something is working, you’re doing it wrong.

If you use Facebook ads to acquire traffic, you need to use Facebook Pixel to measure the success of your campaigns. Whenever a visitor converts, you should track that conversion (e.g., lead, purchase, etc.) with the pixel.

In this guide, I will show you how to install Facebook 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 let’s dive into this. Also, consider subscribing to my newsletter to stay up-to-date with GTM.

 

 

Table of contents

 

Before We Continue

If you are super 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 Facebook Pixel.

Otherwise, you will feel way too overwhelmed and might get lost.

Subscribe and Get the Ebook - Real Book Img - GTM for Beginners

 

A Quick Introduction to Facebook Pixel

Facebook Pixel is a solution created by Facebook that allows you to measure user/visitor behavior on your site and then track conversions 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), Facebook will start getting data. I will not dive deeper into the possibilities (because this blog post is more focused on the implementation). But if you are super 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. Conversion is an important action (to the business) that a visitor/user completed, e.g., signup, subscription, purchase, etc. By tracking conversions, you will be able to tell Facebook that X visitor has completed the action that you desired.  This means that your reports will show 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 more lookalike people 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 Facebook Pixel code?

First things first, let’s go to the Facebook Pixel Business manager and get the Pixel ID (that will be needed in the next 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 actually see. In fact, once I had a case where 4 people in my GTM workshop saw different versions of the interface at the same time. So, if you don’t find a certain option, just keep looking.

In the top right corner, click the Menu icon and go to Events Manager.

Then go to  Data Sources and choose the Pixel that you’re interested in.

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. Close this window for now.

Your main goal, for now, is to get the Pixel ID that looks like this (of course, the value will be different):

Once you get it, copy it (because we’ll need it in the next chapter of this blog post).

 

#1. How To Install Facebook 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 that you had to work directly with a JavaScript code, edit it a bit, etc.

These days, things are much simpler and more elegant because Simo Ahava has created a Facebook Pixel Custom Template and shared it with everyone. It will make the entire FB Pixel tag management process more convenient and less prone to errors.

 

#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. You have to add it manually.

Luckily, there is a very convenient feature called Community Template Gallery where anyone in the community (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 it and add it to your Workspace. Once you do that, a new template will appear in the Tags > New > Custom section and you will be able to reuse it multiple times in multiple tags in the same container.

 

#1.2. Facebook Pixel Pageview Tag

Everything starts with the basic implementation of the Facebook pixel. In other guides (especially in the older ones) found online, you might see a term called Facebook Pixel Base Code (or something similar). The next several steps that I’m going to demonstrate explain exactly that (but without using the term Base Code).

In GTM, go to Tags > New > Facebook Pixel and enter the following settings (if some fields are not visible in the screenshot, 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. Thanks to this field, GTM will know to which exact FB ad account to send this data.

For now, leave all the other settings as they are (for now).

Set the tag to fire on All Pages.

 

#1.3. Constant Variable for the Pixel ID

Spoiler alert: for each interaction you want to track with the Facebook Pixel, we will need to create a separate FB Pixel tag.  In every tag, you will need to define a Facebook Pixel ID.

Eventually, you might end up with 50 (or even more) tags that send data to Facebook. This means that you will have to manually insert the Pixel ID 50+ times. But what if one day, you have to switch to another Pixel ID? You will need to manually change the ID 50+ times.

To make things more optimal, you could create a GTM variable that contains your FB Pixel ID and then just 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 GTM, you go Variables > User-defined Variables > New > Constant and paste your Facebook Pixel’s ID.

Save the Variable. Then open the previously created Facebook Pixel pageview tag, and insert the Constant Variable instead of plain Pixel ID.

 

#1.4. Test the Facebook Pixel Tag

Now, it’s time to make sure that you have implemented everything correctly.

GTM Preview and Debug mode. In GTM, enable the Preview and Debug mode, then refresh the page where you want to install Facebook Pixel with Google Tag Manager.

At the bottom of the screen, a debug console will appear. Click the Pageview event and you should see that your Facebook Pixel tag has fired.

 

Facebook Pixel Helper. The previous tip does not mean that everything was sent to Facebook Pixel properly! There are other places we need to check. One of them is Facebook Pixel helper. Install it and you will see this icon appear in the top right corner of your Chrome browser. Once you refresh the page AND if Facebook Pixel is implemented on a page, its color will change to blue and you will see a number within that icon.

Click that icon and let’s check. We see that a PageView was tracked and there is a green check mark icon next to it. That’s good! If there was a loader or yellow icon, that’d mean a possible problem. But a green icon is exactly what we are looking for.

 

Facebook 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 was working with my site, I would enter https://www.analyticsmania.com) and click Open Website. After you are redirected to your own website, go back to the Test Events of your Pixel and check whether you see Pageviews coming from your own device. If nothing appears, go back to your site and refresh the page once again.

If everything is fine, this means that you have implemented Facebook Pixel with Google Tag Manager correctly.

 

#2. Other options on how to install Facebook 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 not available yet).
  • “Done for you”. I don’t recommend this one.

 

#2.1. Manual installation using the Custom HTML tag

In a nutshell, you just need to copy the entire Facebook pixel code to the Custom HTML tag, do modifications directly in its code (if you needed) and you also had to handle Tag Sequencing to make sure that Facebook Pixel base code is already loaded before you try to send some event (or pageview) to it.

Where can you get the full Facebook Pixel code? Go to your FB Pixel in the Events Manager, open your pixel and in the top right corner click Set Up > Install Pixel.

Then choose Manually add pixel code to website and copy the main code:

In Google Tag Manager, go to Tags > New > Custom HTML tag 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, FB offers you several options on how to install the pixel. One of the options is “Google Tag Manager”.

I highly encourage you NOT to choose this option. You see, this built-in installation option via Google Tag Manager is a bit tricky.

  • You will need to grant Facebook 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, Facebook will automatically add the Pixel code to your container and will 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, in order to get just one tag created in your container that fires on all pages, giving Facebook 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 GTM. But Pageviews alone don’t tell a lot about what a visitor/user is doing on your site. Did the visitor just landed on a page and left? Or did he/she clicked something, scrolled, submitted a form, made a purchase?

That’s where event tracking is super important. Only by providing Facebook with additional and quality data, you can 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 that a visitor/user can do on a site. Facebook 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

P.S. The list might be updated in the future (because that has already happened several times in the past).

The titles are pretty much self-explanatory. So if you want to track an interaction that is mentioned in that list, definitely use the Standard Event for that.

Custom events are the interactions that do not fall under the categorization of standard events. For example:

  • Scroll
  • Time on page (e.g. when you fire an event after visitor spends 5 minutes on a page)
  • Viewed a certain element
  • Outbound link click
  • Video play, etc.

It’s all up to your imagination. However, keep in mind one thing: while you can still build custom audiences with custom events, you cannot use them for conversion optimization within Facebook Ads. Facebook simply does not know what a certain custom event means.

With standard events, Facebook knows that a purchase is more important than a ViewContent, while the Custom events like Scrolled and Canceled Subscription are on the same level of uncertainty.

 

#3.2 A Tag + a trigger for a Standard Event

Let’s say that you want to track when someone enters his/her email on your landing page. Looking at the list of possible standard events, this one should be considered as a Lead. 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 other thing that you will need to define is a trigger (a condition when this tag must fire).

This very much depends on what kind of interaction do you want to track. Triggers are a totally different story that requires you to learn a lot.

If we are interested in tracking leads, obviously, we have to 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 feel that you struggling with tracking interactions on your own, you might need to ask a developer for help. A developer will have to push data to the Data Layer and you will need to use 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 keep in mind that form tracking is SO MUCH full of nuances and your trigger might look very much different.

 

#3.3 Test the Standard Facebook Pixel Event

After you have created a tag and a trigger, save everything. Then refresh (or enable) the GTM preview and debug mode, refresh the page where you want to track that event with Facebook Pixel. Complete that interaction. In my example, that interaction is entering an email on a landing page and then being redirected to a “Thank you” page.

Since my trigger is based on a Page View, I click that in my preview and debug console…

… and then check whether my Facebook Pixel tag (related to a lead) has fired. If yes, that’s a good start! If you are struggling with debugging Google Tag Manager setups, read this guide.

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 say that we want to track whenever someone presses the Play button in an embedded Youtube video player that we have 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 then click 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 automatically added to your Facebook Pixel tag.

By the way, if you want to add some additional data to the custom event, you can do that by going to Object Properties and adding any custom parameters you need, for example (the variables I’ve used are both built-in in GTM. You just need to enable them in Variables > Built-in Variables > Configure.):

 

#3.5 Test the Custom Event

The testing principle is exactly 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 Facebook Pixel tag fires
  • Facebook Pixel helper shows the green icon next to that event
  • Test Events section in Facebook Events Manager is showing 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 are you going to track. If you’re not sure about Google Tag Manager’s potential, here are some ideas:

 

 

 

#4. Send additional parameters to Facebook Pixel with Google Tag Manager

With Facebook Pixel, you can send not only events but also additional values (e.g. order total, the video title, etc.). In fact, in the previous example of the custom video event, we have already done that.

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.

Speaking of Standard Events, only the Purchase event requires currency and value.

Also, by looking at the documentation, you can see which fields are expected by Facebook. I mean, 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 after a visitor makes a purchase, he/she is redirected to a “Thank you” page. On that page, I’ve asked a developer to push the transaction data to the Data Layer.

Here’s that code snippet that a developer activated (that contains the transaction info). I took it from my other guide about the implementation of Standard Ecommerce via GTM.

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 data of the purchase.

Looking at the official FB Pixel documentation, two fields are required:

  • Revenue
  • Currency

Let’s send them. Looking at my sample Data Layer code, 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, therefore, enter currencyCode, not currencycode.

Then, create a Facebook Pixel Tag with the following configuration:

As you can see, I’ve inserted both variables in the Object Properties section. On the left side, you can see the name of the parameter that Facebook is expecting (currency and value) and we set our Data Layer Variables as values of those two parameters.

In order words, 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 then click the Plus icon in the top right corner (we will 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 your Preview and Debug mode, go to your website, refresh it 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 event with custom parameters is displayed in the Test Events section of your FB Events Manager interface. Check Chapter #3.3. to learn more.

 

#4.3. [ADVANCED Example] – Purchase Tracking with Additional Parameters (if your site has a GA Enhanced Ecommerce Data Layer)

Let’s pretend that we have the same case (when after a purchase, the visitor is redirected to a “Thank you” page) but the structure of the Data Layer is different. It is created specifically for the GA Enhanced Ecommerce (see the example below):

If you’re not familiar with this, in order to implement Enhanced Ecommerce, a developer must implement the e-commerce data in a very strict structure that is required by Google. To make things easier, Simo Ahava has published a blog post on how to transform the Enhanced Ecommerce data and adapt its structure to meet Facebook Pixel’s requirements.

If you want to learn more, definitely read his guide.

For demonstration purposes, I’ll send the purchase to the Facebook Pixel together with the product information (because in the previous example (chapter #4.1) we’ve sent just the order total and the currency.

Based on Simo’s guide, first, we need to create a Custom JavaScript Variable that will transform the Enhanced Ecommerce data to the structure that is required by the Facebook Pixel.

 

#4.3.1. Custom JS variable No. 1 – EEC FB API

In GTM, go to Variables > User-defined Variables > New > Custom JavaScript and paste the following code:

Give this variable a name cjs – eecfb API and save it.

IMPORTANT: this time, the variable’s name is important (because we will use it in another variable).

 

#4.3.2. Data Layer Variable – Purchased Products

Then create a Data Layer Variable called dlv – ecommerce.purchase.products (EXACTLY LIKE THAT).

Inside of that variable, enter ecommerce.purchase.products and save it.

 

#4.3.3 Custom JS Variable – Purchased Products (adapted to FB Pixel)

Now, create a Custom JavaScript Variable and paste the following code in it.

It is based on the Custom HTML code that Simo used in his example (but a bit modified). This code is using {{dlv – ecommerce.purchase.products}} and {{cjs – eec fb api}}, therefore, make sure that you named those two variables exactly like I’ve instructed.

You can call this variable cjs – fb pixel – purchased products.

This variable will return all the purchased products and in the structure that Facebook Pixel accepts.

 

#4.3.4 Custom Event Trigger

If you take a look at the Enhanced Ecommerce dataLayer.push (chapter #4.3.), you’ll see an ‘event’ key of which value is ‘eec.purchase’. We need to instruct GTM to use that .push() as a condition to fire a FB Pixel tag.

That’s why we need to go to Triggers > Trigger Configuration > New > Custom Event and enter eec.purchase.

Obviously, if dataLayer.push() on your store/website has a different event value (e.g. transaction), update your trigger accordingly.

 

#4.3.5 Facebook Pixel Tag

Go to Tags > New > Facebook Pixel and enter the following settings:

Facebook Pixel requires to send the currency parameter together with purchase. Let’s imagine that our online store operates just in one currency, euros. Since the Enhanced Ecommerce dataLayer.push did not include any currency information, we defined it manually in the FB Pixel Purchase tag.

Speaking of the rest of the information (the order total (a.k.a. value), product quantities, etc. everything is now stored in the Custom JS variable we created it in #4.3.3. chapter. Therefore, go to Object Properties and in the Load Properties From Variable choose the aforementioned Custom JS variable.

Last but not least, assign the Custom Event trigger (that we’ve created in chapter #4.3.4.) to this tag.

To sum up, when a dataLayer.push eec.purchase occurs, the Facebook Pixel purchase tag will be activated. Within that tag, Custom JS variable will adapt the Enhanced Ecommerce data to Facebook Pixel. That data contains purchased products, quantities, order total. If you need to add some additional information to that tag, you can add that manually (just like I did with the currency).

 

#4.3.6 Quick Bonus – An Example of Add to Cart

If you wanted to apply the same principle to other Ecommerce steps (e.g. Add To Cart), you would need to:

  • Create another Data Layer Variable for ecommerce.add.products. Call it dlv – ecommerce.add.products
  • Create another Custom JS variable called cjs – fb pixel – products added to a cart with the following code:
  • Create another Facebook Pixel Tag, select Standard Event AddToCart and then replicate all the other settings just as you did in the Purchase tag.

 

#4.4. Test the setup

Now, it’s time to test the Purchase tag. Refresh the Preview mode, refresh your website/online store where you want to implement this.

Make a purchase (Important: you must have Enhanced Ecommerce implemented via Google Tag Manager and the e-commerce data must be pushed to the Data Layer) and you’ll see a new dataLayer.push in the preview mode’s left side. Click it and you should see the FB Pixel Purchase tag fired.

Then check the FB Pixel Helper. This time, you will probably not see the green icon. Instead, you’ll face a warning similar to this one:

If you are not using Facebook Pixel Dynamic Remarketing, you can ignore these two warnings. Instead, check whether the rest of the purchase data was sent properly:

Finally, go to the Facebook Events Manager and check whether the data that was received is correct. Note: that report will also show the same warnings Pixel and Catalog Not Paired and Missing Product Parameter. Again, if you are not using Dynamic Remarketing, ignore those warnings.

 

#5. What Can You Do with the Data That You Have Just Tracked via Facebook Pixel?

This question goes beyond the scope of this blog post, therefore, I’ll just quickly mention the possibilities:

 

 

 

#6. Other Things to Know about Facebook Pixel with Google Tag Manager

The first 5 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 a 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

By following 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.

Facebook 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 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 Pixel, e.g., one pixel is just for the department and the other one is for the entire company. That is not a problem for Facebook Pixel and it’s fairly easy to do with Simo’s Facebook Pixel tag template.

If you want to set the tag to send data to multiple pixels, just enter them in the Facebook Pixel ID(s) field, separated with comma.

Or you can enter multiple IDs in the Constant Variable.

Or you can separate multiple Constant Variables (each one of them contains a single FB Pixel ID).

All of these options will work.

 

#6.3. Advanced Matching

Facebook Pixel Advanced Matching gives advertisers the ability 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 of this information is considered as Personally Identifiable Information (PII) and you need to get consent from your users/visitors before you send this data (I’ll mention more information on this a bit later).

When you send personal information as Advanced Matching parameters, Facebook Pixel automatically hashes that data by using the SHA-256 hashing algorithm.

First, I will show how to set the Advanced Matching up in Google Tag Manager. Let’s 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):

Just keep in mind, 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. 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 Facebook 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. 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 the Advanced Matching Parameters in the Test Events section.

 

#7. User Properties

User properties are properties and values that you define for a user of your website and they allow you to better understand your audience. An example of the User Property could be user’s pricing plan.

If you are familiar with Google Analytics custom dimensions, think of User Properties on Facebook like User-scoped custom dimensions in Google Analytics.

To implement user properties, you need to:

  • Send the User ID to Facebook Pixel. That User ID is some identifier that you use in your own database. Important: PII (like email address) cannot be used as a User ID in Facebook Pixel
  • And then you need to send the User Properties to FB Pixel.

There are two types of User Properties in Facebook Pixel, predefined (standard) and custom.

When you implement User Properties, you will be able to see them in Facebook Analytics Dashboard under People > User Properties (this applies only to the custom ones).You can learn more about the limitations and requirements for User Properties here.

Let’s take a look at how can we implement this with Google Tag Manager.

 

#7.1. Variable with the User ID

Where can you get the User ID? That depends on your website. You can ask a developer to push the User ID to the Data Layer (just like in chapter #6.3), or you can try to get it in some other way. In my User ID for GA guide, I mention several other alternatives.

I’ll continue working with the dataLayer.push() code snippet from chapter #6.3 and will access the value of the userId key. Go to GTM > Variables > User-defined Variables > New > Data Layer Variable and enter the following settings (case-sensitive):

I’ll give this variable a dlv – userId name.

 

#7.2. Facebook Pixel Tag

Now, it’s time to pass the User ID to Facebook Pixel. Go to Tags and open your Pageview tag and tick the Enable User Properties checkbox. Then expand the User Properties section and in the User ID field, insert your variable that returns the User ID. In my case, that’s the Data Layer Variable I’ve just created.

Now it’s time to send the User properties. In chapter #6.3.1. we created a bunch of variables that return data points like city, gender, country. We should now insert them in the User Properties section. Press Add Property and a new row will appear. Since we have 3 variables that can be used as properties (email cannot be used), let’s enter them accordingly.

The names of the standard properties must start with a dollar sign ($). City, gender and country are ALL standard properties, therefore, here’s what we should enter in the FB pixel tag:

This is the current list of all predefined properties. In the future, that list might change:

  • $account_created_time – The UNIX timestamp when the user account was created
  • $city – The city in which the user lives
  • $country – The country in which the user lives
  • $currency – The preferred currency of the user
  • $gender – The gender of the user. To get consistent analytics, set this to m or f.
  • $install_source – The source from which the user installed your app
  • $language – The preferred language of the user
  • $state – The state in which the user lives
  • $user_type – The type of the user. You define the types to get the analytics results you want.
  • $zipcode – The zip code of the user.

You can always refer to this list for the most up-to-date information.

If you want to pass some custom user property, like pricing plan, don’t use the $ sign in your setup, for example:

 

#7.3. Test Facebook Pixel User Properties

You know the drill. Now, refresh the preview mode, then refresh the page that you’re working on. Then check whether your Facebook Pixel tag has fired and whether Facebook Pixel helper shows all the data points (that were sent) correctly.

However, keep in mind that you can send the proper (full) values for the fields like City or Country (there are no strict rules here (like it was in the Advanced Matching)).

As for the User Property debugging in the Facebook Events Manager or Facebook Analytics, that part sucks. Based on my experience, neither Event testing in Facebook Events Manager nor Facebook Analytics > Activity > Event Debugging will display user properties.

The only way to validate here is to wait for a bit and then try to use reports like Activity > Breakdowns in FB Analytics. In the dropdown of those reports, you should start seeing your properties fairly soon. If I’m wrong (and you know a good solution) please let me know in the comments.

If (in the future) you want to remove some unused properties, you can do that in People > User Properties report (in FB Analytics).

 

#7.4. Where can you see User Properties in Facebook Analytics?

Remember when I previously mentioned that User Properties can be found in People > User Properties in Facebook Analytics? This applies to Custom User Properties (like pricingPlan). Standard properties will not be listed there.

However, one of the places where you can use User Properties (predefined and custom) is Breakdowns report.

 

The last but definitely 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. There are regulations like GDPR that protect users’ privacy and require that businesses get consent from user/visitor before sending data to Facebook Pixel (and not limited to that).

I’m not a lawyer, therefore, 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.

After you have the consent mechanism implemented, you’ll end up with a bunch of blocking triggers and consent-related variables.

Usually, you would use the blocking triggers (and that’s how 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 the consent was not given, HOWEVER, the data will not be sent. It will be added to a queue. And once the visitor gives consent, then all the events from the queue will bet 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)
  • All the events that were in the queue will be sent to a Facebook pixel. This means that events before the consent will not be lost.

Important: if the page is reloaded/refreshed a user navigates to another page (before giving consent), the queue will be cleared.

 

In the Facebook Pixel tag, you will see a drop-down called Consent Granted. 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 several variables like “Consent given to marketing”, “Consent given to statistics”, etc.

These variables should return true or false depending on whether the user/visitor gave consent 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):

Use that 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.

 

In order to send all the events that are waiting in the queue, we must send any event that contains 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 very much depends on what kind of cookie consent solution have you implemented. Some setups use the Custom Event trigger consent_marketing, others might use a different one. So just make sure that you fire the aforementioned custom event tag only when the 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 answer “it depends” is too strong here.

 

Facebook Pixel with Google Tag Manager: Final Words

Whew! It’s been a while since the last time 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 that the ones that I’ve shared above are the most essential and apply to most setups.

So when it comes to the implementation of Facebook 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 with pageviews, track events as well
  • It is recommended to rely on standard events as possible (FB will use that for conversion optimization)
  • 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.

That’s about it for this time. If you face some struggles related to the implementation of Facebook Pixel via Google Tag Manager, let me know in the comments and we’ll see what we can do.

 

 

Julius Fedorovicius
In Google Tag Manager Tips
8 COMMENTS
Gerald

Hi Julius,
Thanks a lot for this great update.
But I am getting a "Error at line 7, character 14: Parse error. 'identifier' expected" in the "cjs - eec fb api" Custom JavaScript variable. Any idea what's going wrong here?
Thanks, Gerald

Ilias Giannakos

Fantastic article! Excellent work Julius!

Steve

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.

    Julius

    Check your triggers and thrn identify why your tag fires twice. This is not a tag issue. It's the trigger.

Joshua Backer

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?

    Julius Fedorovicius

    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.

Leave a comment

Your email address will not be published. Required fields are marked *