Facebook Conversion Tracking With Google Tag Manager

Updated: March 30th, 2020.

If you’re already using Facebook as a marketing tool, you want to measure the results, right? You have multiple options here – remarketing, Facebook conversion tracking, etc. However, everything takes time to implement – you send an email to the developer with requirements of what should be tracked and it takes him weeks to complete the task. But not anymore! With the help of Google Tag Manager, you can drastically speed up the process.

 

Before you continue

This blog post assumes you have a working knowledge of Google Tag Manager tags. If you’re a beginner – I highly recommend downloading my free e-book Google Tag Manager for Beginners

Table of Contents

• #1. Get the Facebook Pixel ID
• #2. Add the Facebook Pixel Custom Tag Template to your GTM container
• #3. Facebook Pixel Pageview Tag
  • #3.1. Constant Variable for the Pixel ID
  • #3.2. Test the Facebook Pixel Tag
• #4. Facebook Conversion Tracking with Google Tag Manager
  • #4.1 Custom Conversions
  • #4.2 Standard vs Custom Facebook Pixel events
  • #4.3 A Tag + a trigger for a Standard Event
  • #4.4 Test the Standard Facebook Pixel Event
  • #4.5 A Tag + a trigger for a Custom Event
  • #4.6 Test the Custom Event
• #5. Where can I see/use conversions in Facebook’s Interface?
• #6. Send additional parameters to Facebook Pixel with Google Tag Manager
  • #6.1. Example – Purchase Tracking with Additional Parameters
  • #6.2. Test the event with additional parameters
• Want to learn more about Facebook Pixel + GTM?
• Facebook Conversion Tracking: Things to keep in mind
• Facebook Conversion Tracking: Final Words

 

So what’s the plan?

To make this work, you will need to:

1. Add a Facebook Pixel Custom Template to your Google Tag Manager container
2. Get a Facebook Pixel ID from Facebook Business Manager.
3. If you haven’t yet, create Facebook Pixel tag and use the Pixel ID in your Google Tag Manager container
4. Create additional event tags that send interaction data to Facebook (that’s what I’ll explain in this blog post). That data will be used to create more precise remarketing audiences and measure the success of your campaigns.

 

 

#1. Get the Facebook Pixel ID

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 Google Tag Manager 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).

 

#2. Add the Facebook Pixel Custom Tag Template to your GTM container

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. In the older days, you had to use the Custom HTML tag to install FB pixel, but now, luckily, there is a very convenient feature called Community Template Gallery.

A community gallery is 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.

UPDATE: this template now belongs to facebook incubator, not gtm-templates-simo-ahava.

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.

 

#3. 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 Google Tag Manager, 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, Google Tag Manager 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.

 

#3.1. 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 Google Tag Manager 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 Google Tag Manager, 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.

 

#3.2. Test the Facebook Pixel Tag

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

Google Tag Manager 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.

 

#4. Facebook Conversion Tracking with Google Tag Manager

To optimize and measure Facebook ad campaigns, you need to track important events on your website and send that data to Facebook. According to the official FB Pixel documentation, there are three ways how to track conversions with Facebook Pixel:

• Custom Conversions
• Standard Events
• Custom Events

 

#4.1 Custom Conversions

Each time a Facebook Pixel Pageview tag is fired, a pageview (together with the Page URL) is sent to Facebook. You can create a Custom Conversion based on the URL that a visitor landed on.

Actually, you can create custom conversions also based on events too (with even more specific conditions) but I’ll talk about that a little later.

Let’s go back to the pageview. For example, after a visitor makes a purchase, maybe he/she is redirected to a “Thank you” page of which URL contains /thank-you-for-purchasing.

You could instruct Facebook Pixel that the visit of that particular page is very important to your business and should be considered as a goal.

This option does not depend on Google Tag Manager almost in any way (except that we use it to send the pageviews). The entire setup is done in the FB Business Manager’s interface.

In FB Business Manager, go to Events Manager and then choose Custom Conversions.

And then enter the conditions that you consider as an important interaction to your business. In the case of our example, we are interested in all Pageviews where the URL contains /thank-you-for-purchasing.

Save the conversion and you will start seeing it in your interface. I’ll show that a bit later.

 

#4.2 Standard vs Custom Facebook Pixel events

When it comes to event tracking with Facebook Pixel, there are two types of events:

• Standard
• Custom

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

 

#4.3 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.

 

#4.4 Test the Standard Facebook Pixel Event

After you have created a tag and a trigger, save everything. Then refresh (or enable) the Google Tag Manager 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.

 

#4.5 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 Google Tag Manager. You just need to enable them in Variables > Built-in Variables > Configure.):

 

#4.6 Test the Custom Event

The testing principle is exactly the same as it was described in #3.2. 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

 

#5. Where can I see/use conversions in Facebook’s Interface?

By now, we have learned three things:

• How to send standard events to Facebook
• How to send custom events to Facebook
• How to create custom conversions in Facebook Business Manager (so far, we have done this only based on page views)

Let’s see where we can use those conversions in the FB interface.

Go to Facebook Ads Manager:

Once you click “Create” in the Campaigns section…

and choose that your campaign’s main objective is Conversions (and continue)

You will be asked to define what is the conversion that you want to optimize against. It might be already prefilled (e.g., with a Purchase) but you can click X and choose any conversion you want. All the events (Standard and Custom) that you sent to Facebook Pixel will be visible there (except the pageview):

If you have created any Custom Conversions, they will also be visible here.

If you are interested in seeing a certain event (like Purchase) as a conversion but want it to be more specific (like Purchased a particular product), then you can create a Custom Conversion that is based on that particular event. Here’s an example.

Go back to Events Manager > Custom Conversions > Create Custom Conversion and use settings similar to these ones (of course, enter something that is meaningful to your business).

Once you save this conversion and go back to create a new ad campaign, this conversion will be available in the Ad Set to choose.

Where do those Event Parameters come from? Continue reading.

 

#6. 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 Google Tag Manager tag should be configured.

 

#6.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 Google Tag Manager.

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

 

#6.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.2. to learn more.

 

Want to learn more about Facebook Pixel + GTM?

If you are interested in learning even more about how to set up FB pixel with Google Tag Manager (e.g. other event parameters, user properties, etc.), enter your email address below and download the cheat sheet.

 

 

 

Facebook Conversion Tracking: Things to keep in mind

• It may take up to 24 hours for data to appear in the Facebook Business Manager dashboard (but usually it’s processed much faster).
• Before you start tagging, prepare a measurement plan – a list of what you really need to track. It will bring more transparency, help you plan ahead and avoid inconsistency problems.
• Test, test, test before publishing – the devil is in the detail. One tiny mistake can lead to huge problems.

 

Facebook Conversion Tracking: Final Words

And that’s the end of this blog post! Facebook Conversion Tracking offers you a lot of flexibility when it comes to measuring the success of your ad campaigns. You can track standard (Facebook-supported) events. If those are not enough, go with Custom Events. And to add even more flexibility, consider using Custom conversions (where you can create pageview-based conversions or more specific event-based conversions).

Just make sure that you properly test your setup with the Google Tag Manager debug mode, Facebook Pixel helper, and Test Events section of the FB Events Manager.

If you want to learn more about how to implement Facebook Pixel on your site + do that faster, enter your email address below and get my Facebook Pixel Cheat Sheet.