February 25, 2017

Facebook Conversion Tracking With Google Tag Manager

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 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 checking out these free Google Tag Manager courses, first. The minimum requirements are:

You have Google Tag Manager tracking code installed on your website.
You know what tags, triggers, variables and dataLayer are and how they work in Google Tag Manager.

P.S. This blog post is a part of more comprehensive guide – Google Tag Manager + Facebook, so if you’re looking for in-depth information about how to upgrade your Facebook marketing with Google Tag Manager, give it a try.

So what’s the plan?

If you’re familiar with Twitter conversion tracking setup process via Google Tag Manager, with Facebook it is pretty similar. All you need to do is:

Register a Facebook Business Manager account, create a Facebook Pixel, copy its code. I have described how to find Pixel code here.
In Google Tag Manager, create Custom HTML tag and paste Facebook Pixel’s code (I have described it in this blog post).
Create additional event tags which 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.

Facebook Conversion Tracking with GTM

To optimize and measure Facebook ad campaigns, you need to track important events on your website and send that data to Facebook.

Those “important events” (in Facebook documentation and interface) are called Standard events. Currently there are 9 supported types of events:

When important event occurs on your website, you have to fire a separate piece of code in addition to your Facebook Pixel tag, so that you can measure when someone submits a form, clicks a button or makes a purchase.

You can later use those events to build audiences with custom combinations, e.g. “Show ads to those people who Added product to their cart in last 30 days.

You can even go one step further by mixing several events in one remarketing audience, e.g. show my ads to those who added product to cart and visited certain pages but did not make a purchase.

The sky is the limit.

Add standard Facebook Pixel events with Google Tag Manager

For every interaction you want to track with Facebook, you’ll need to create a separate GTM Custom HTML tag with few lines of code. For example:

<script>
fbq('track', 'Lead', { 
 content_name: 'name', //this is just an example. You should replace it with actual value
 content_category: 'category', //this is just an example. You should replace it with actual value
 value: 30, //this is just an example. You should replace it with actual value
 currency: 'USD' //this is just an example. You should replace it with actual value
 });
</script>

fbq('track', 'Lead', {

content_name: 'name', //this is just an example. You should replace it with actual value

content_category: 'category', //this is just an example. You should replace it with actual value

value: 30, //this is just an example. You should replace it with actual value

currency: 'USD' //this is just an example. You should replace it with actual value

});

</script>

Few things I’d like to mention:

Make sure that Facebook Pixel tag (mentioned in chapter No. 2 of this blog post) fires before any Facebook event tag. The best way to do that is to set higher priority to Pixel tag.
With Google Tag Manager, I can easily insert any variables which transfer information from your website (depending on context) to Facebook. As you can see in the code example above, with Lead type of event (when visitor subscribes to newsletter) I also transfer form’s position which is dynamically inserted via Data Layer variable {{dlv – formPosition}}.
Very useful: check out this list of all available data attributes that can be passed along with Standard Facebook Events.
Content_name, content_category and other attributes are not required in event code, but they give you better understanding that leads generation forms to perform better. If you don’t want to track such specific data, basic event code will do just fine:

<script> fbq('track', 'Lead'); </script>

1
2
3

<script>
fbq('track', 'Lead');
</script>

To give a better understanding of Facebook Standard events, I’ll give you a brief explanation of each one of them.

Facebook Standard Event: View Content

If you’re tracking visitors on a blog, ViewContent Facebook event should fire when a visitor navigates to a blog post page. If you’re the owner of e-commerce business, then your content is a product page. Sample tag could look like this:

Trigger’s (that I used for this Custom HTML Facebook tag) settings are:

Title – Pageview – Viewed Blog Post.
Type – Pageview.
This trigger fires on – Some Page Views
Rule – Page Path starts with /post/, because all posts in my blog contain “/post/” in URL., e.g. https://www.analyticsmania.com/post/google-tag-manager-facebook/.

Facebook Standard Event – Search

<script>
fbq('track', 'Search', {
 search_string: 'search term', //this is just an example. You should replace it with actual value
 content_ids: 'id1234', //this is just an example. You should replace it with actual value
 content_type: 'product' //this is just an example. You should replace it with actual value
});
</script>

fbq('track', 'Search', {

search_string: 'search term', //this is just an example. You should replace it with actual value

content_ids: 'id1234', //this is just an example. You should replace it with actual value

content_type: 'product' //this is just an example. You should replace it with actual value

});

</script>

When a visitor uses search on my blog, page’s URL changes to analyticsmania.com/?s=search_query. So for Facebook Search Tag I’ll use trigger with the following settings:

Title – Pageview – Used Search.
Type – Pageview.
This trigger fires on – Some Page Views
Rule – Page Path starts with /?s=

Keep in mind, additional parameters (i.e. search_string) are optional. This applies to all Facebook events.

Facebook Standard Event – Add To Cart

<script>
fbq('track', 'AddToCart', {
 content_ids: 'id1234', //this is just an example. You should replace it with actual value
 content_type: 'product', //this is just an example. You should replace it with actual value
 content_name: 'Product name', //for single item 
 value: 30,
 currency: 'USD'
});
</script>

fbq('track', 'AddToCart', {

content_ids: 'id1234', //this is just an example. You should replace it with actual value

content_type: 'product', //this is just an example. You should replace it with actual value

content_name: 'Product name', //for single item

value: 30,

currency: 'USD'

});

</script>

If you own an online store, then this event is pretty important in order to measure sales funnel. Every e-commerce platform is really different, so it’s impossible to describe a standard method how to track Added to cart event.

The most robust solution would be to ask developer to send this interaction as a dataLayer event. Then you could catch that event with Google Tag Manager and use it as a trigger which launches AddToCart Facebook Event.

Read this blog post to find out how you can use Data Layer Events as Triggers.

Facebook Standard Event – Add to WishList

<script>
fbq('track', 'AddToWishlist', {
 content_ids: 'id1234', //this is just an example. You should replace it with actual value
 content_category: 'category', //this is just an example. You should replace it with actual value
 content_name: 'Product name', //for single item 
 value: 30, //this is just an example. You should replace it with actual value
 currency: 'USD' //this is just an example. You should replace it with actual value
});
</script>

fbq('track', 'AddToWishlist', {

content_ids: 'id1234', //this is just an example. You should replace it with actual value

content_category: 'category', //this is just an example. You should replace it with actual value

content_name: 'Product name', //for single item

value: 30, //this is just an example. You should replace it with actual value

currency: 'USD' //this is just an example. You should replace it with actual value

});

</script>

The issue is pretty similar to Add To Cart events – it’s impossible to write a solution that fits all online stores. The most robust solution is to ask developer to send this interaction as a dataLayer event.

Facebook Standard Event – Initiate Checkout

<script>
fbq('track', 'InitiateCheckout', {
 content_ids: 'id1234', //this is just an example. You should replace it with actual value
 content_category: 'category', //this is just an example. You should replace it with actual value
 content_name: 'name', //for single item 
 value: 30, //this is just an example. You should replace it with actual value
 currency: 'USD', //this is just an example. You should replace it with actual value
 num_items: 4 //this is just an example. You should replace it with actual value
});
</script>

fbq('track', 'InitiateCheckout', {

content_ids: 'id1234', //this is just an example. You should replace it with actual value

content_category: 'category', //this is just an example. You should replace it with actual value

content_name: 'name', //for single item

value: 30, //this is just an example. You should replace it with actual value

currency: 'USD', //this is just an example. You should replace it with actual value

num_items: 4 //this is just an example. You should replace it with actual value

});

</script>

If your checkout process consists of more than one step, then usually step 1 has some unique string in the URL, e.g. sampleshop.com/checkout/step1/some_other_stuff. In that case, you can use Pageview Trigger with the following rules (remember – it’s only an example. In your case Page Path might be different):

Title – Pageview – Initiated Checkout.
Type – Pageview.
This trigger fires on – Some Page Views.
Rule – Page Pats contains /checkout/step1/

Facebook Standard Event – Added Payment Info

<script>
fbq('track', 'AddPaymentInfo', {
 content_ids: 'id1234', //this is just an example. You should replace it with actual value
 content_category: 'category', //this is just an example. You should replace it with actual value
 value: 30, //this is just an example. You should replace it with actual value
 currency: 'USD'
});
</script>

fbq('track', 'AddPaymentInfo', {

content_ids: 'id1234', //this is just an example. You should replace it with actual value

content_category: 'category', //this is just an example. You should replace it with actual value

value: 30, //this is just an example. You should replace it with actual value

currency: 'USD'

});

</script>

There are two most common scenarios how we can identify that visitor entered payment information:

Either he/she visited a particular page with unique URL. Then, you should use Pageview trigger (like I have described InitiateCheckout tag).
Or the URL does not change when payment info is entered. In that case – ask developer to send dataLayer event, whenpayment information was successfully saved. Actually, I’d ask to add two events: 1. User started entering payment information. 2. User successfully entered information. This way I could see how many people bounced off my checkout process in this step.

The same principle (Pageview or Data Layer event) can be also applied to the following Facebook Standard events:

Purchase.
Lead (a.k.a. signup).
CompleteRegistration.

It’s important to mention that Purchase Facebook event requires additional data (Currency and Value). Here’s a sample code:

<script>
fbq('track', 'Purchase', {
 content_ids: 'id1234', //this is just an example. You should replace it with actual value
 content_name: 'name', //for single item 
 content_type: 'product',
 value: 30, //this is just an example. You should replace it with actual value
 currency: 'USD', //this is just an example. You should replace it with actual value
 num_items: 4 //this is just an example. You should replace it with actual value
});
</script>

fbq('track', 'Purchase', {

content_ids: 'id1234', //this is just an example. You should replace it with actual value

content_name: 'name', //for single item

content_type: 'product',

value: 30, //this is just an example. You should replace it with actual value

currency: 'USD', //this is just an example. You should replace it with actual value

num_items: 4 //this is just an example. You should replace it with actual value

});

</script>

Very useful information: I highly recommend reading my guide of 5 form tracking methods with Google Tag Manager. It will be especially useful if you’re want to track Lead or CompleteRegistration Facebook events. Chances are you won’t need developer’s input at all when it comes to tracking form submissions.

When you set up all Facebook tags, do not forget to test them:

Utilize GTM’s Preview and Debug mode to see if tags fire when they suppose to.
Also use Chrome plugin – Facebook Pixel Helper.

Facebook Custom Events

Also, Facebook lets you send any event name you want and any number of key/value combinations you want. Basically, they created an ability to push your entire dataLayer to their platform.

Do you want to create a Facebook audience based on user’s pricing plan or amount of the last payment? No problem. Just use trackCustom method. It works the same way as aforementioned methods, except you can define your own title, parameters and values.

Say, I own a website a SaaS business and my website contains a pricing form. Visitors can enter their number of subscribers (because pricing of my SaaS depends on the size of subscribers list) and then the form calculates the price.

When the price is calculated, the form GTM fires a custom HTML tag with Facebook Custom Event called usedPricingForm with 2 parameters: pricingRange and numberOfContacts.

<script>
 fbq('trackCustom', 'usedPricingForm', {
 pricingRange: '100-150',
 numberOfContacts: 24500
 });
</script>

fbq('trackCustom', 'usedPricingForm', {

pricingRange: '100-150',

numberOfContacts: 24500

});

</script>

If a visitor used my pricing form (calculator), he is probably interested in my SaaS’ services, right? I could then create a FB remarketing audience based on usedPricingForm event and even create different ads based on visitors’ pricing range.

If you wish, you can add 5 or even 10 additional parameters to your custom events. To be honest, I am not aware of the actual limit of custom parameters. Surely, there is one, but I was a bit lazy to test 🙂

Update: one of Analytics Mania’s readers, Benoite, pointed out that by using trackCustom you won’t be able to optimize your Facebook ads. So keep that in mind. More information – here.

Facebook Conversion Tracking: Things to keep in mind

It may take up to 24 hours for data to appear in Facebook Business Manager dashboard (but usually it’s processed faster).
Minimum size of an audience is 20. So you can start remarketing much faster, compared to Google Adwords, where minimum list size is 100 for Google Display Network and 1000 for Google Search.
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 – devil is in the detail. One tiny mistake can lead to huge problems.

I will not go into details how to setup the actual ad campaign in Facebook. So if you’re new to this, go check out Impact’s blog post.

Other useful resource to keep in mind is Facebook Pixel Implementation Guide (by Facebook).

Facebook Conversion Tracking: Conclusion

Facebook conversion tracking is pretty similar to Adwords or Twitter conversion tracking in Google Tag Manager. First, you need to decide which website interactions are important to you. Then set those events within GTM as triggers (e.g. “Visited Thank You Page”) and link them to Custom HTML tags which contain codes of Facebook events.

Remember: for every important interaction you need to create a distinct Custom HTML Facebook event tag within Google Tag Manager.

Facebook conversion tracking enables you to measure your ad campaigns and see which ones drive more signups or sales.

Did I miss something in this blog post? If yes, let me know in the comments!

Julius Fedorovicius

In Google Tag Manager Tips

22 COMMENTS

The Marketing Dude

Sep 1 2017
Reply

Great article. I just implemented event tracking AddToCart. It works great! Thanks man

Russell

Dec 1 2017
Reply

Thank you, I spent hours looking for this solution before finding it here. A bookmark page for sure.

Tania

Jan 15 2018
Reply

Hello! Thanks for the article. I am just wondering, what kind of difference is in this case between these 9 types of standard events? I mean, basically you could use AddToCart event for your leads (triggering the AddToCart events to fire upon pressing the button "Become a lead" on your website), etc., couldn't you? Technically, for Facebook there is no difference in how you name the event, it just uses the same naming to appear in reports but what are you tracking with it is up to you, am I right?

Julius Fed

Jan 15 2018
Reply

Hello Tania, yes, you are right. You can assign any interaction to "Lead" event. It's up to you, although doing this would make your data more hard to read/understand, especially for another person. So keep that in mind.

Saro Frenda

Mar 10 2018
Reply

Great article! Just one question. When the tag and trigger are ready in GTM and the Facebook ads are running. Where can I best analyze them? In Google Analytics? But how do I get the Facebook Ads tracking results in Google Analytics through my GTM?

Julius Fed

Mar 10 2018
Reply

Hi. If you want to see how many people are coming from your Facebook ads to a website, you can check Google Analytics Acquisition reports. If you want to see how many times Pixel has fired and on which pages, then you should go to business.facebook.com.

Yunhui

Mar 15 2018
Reply

Hi Julius, I would like to use this for FB remarketing. In my case, I would like to set campaigns to people who Registered Free Trials event. My this event works great now. My implementation code: fbq('track', 'Signups', { signup_name: 'free trial', //for single item content_type: 'register' }); I selected FB pixel code fires before this tag. The trigger I selected is "Registered Free Trials" event. In preview&debug mode it fires, then in the future can I create Audience list based on this in FB?

Julius Fed

Mar 15 2018
Reply

Yes, you will be able to build audiences. However, you code is wrong. There is no such event as "Signups" in the Facebook documentation https://developers.facebook.com/docs/ads-for-websites/pixel-events/v2.12#events. You should use "CompleteRegistration". Or you should use "TrackCustom" method which I have also described in this guide.

Yunhui

Mar 15 2018
Reply

Thank you very much, Julius! 😃

Julius Fed

Mar 16 2018
Reply

You're welcome! Happy tagging!

benoite

Jul 19 2018
Reply

https://developers.facebook.com/docs/ads-for-websites/pixel-events/v3.0 if you use 'trackCustom' you won't be able to optimize your ads on that type of custom event. so better off using their standard events even though the naming might be a little off

Julius Fedorovicius

Jul 19 2018
Reply

Interesting. Thanks for letting me know!

Taylor

Mar 21 2018
Reply

Hi Julius, We're looking to get Standard Events set up on our clients websites. Would you suggest installing these through Google Tag manager or just placing code on the back end of the site. Does this provide the same result? Essentially I'm looking to easily be able to see how many "registration conversions" are coming from each of my individual ads.

Julius Fed

Mar 21 2018
Reply

I would definitely use GTM, otherwise, this guide would not exist. You'll have more control and won't be tied to developers that much.

Dima

Apr 13 2018
Reply

Hi Julius, Great article on implementation. Could you tell where to see "content_name" in Facebook data when the pixel fires? For example, I have 4 different "content_name" under Lead: Email, Quote, Directions, Phone. I can see that I have had 4 events under Website Leads, but I do not know what content_name it is.

Julius Fed

Apr 22 2018
Reply

Hey, sorry for late reply. You should use Facebook Analytics for that https://www.facebook.com/analytics/. Login with the same account that has access to that trackign pixel, then go to Activity > Events > Choose "Lead" event. In the top right corner (of the chart) you'll see a dropdown "Show by", click it and find "Content". This way you'll be able to see statistics of "Lead" event split by content parameter.

Dima

Apr 25 2018
Reply

Hi Julius, that is the decision I've found and it works. Thank you a lot for feedback. P.S. This seems a bit tricky to my mind

Nicah

Nov 3 2018
Reply

How do I setup dynamic values for purchases? I set it up for AdWords by pushing to the data later but I’m not sure what to put in for the FB code? Anyone?

Julius Fedorovicius

Nov 3 2018
Reply

Hey, works the same way as with the Google Ads tag. Just in the Custom HTML tag's code enter the ordeTotal variable surrounded by double curly braces, for example {{variable}}. https://www.analyticsmania.com/post/insert-variables-in-google-tag-manager/

Shahzeb Arif

Nov 28 2018
Reply

Hi Julius. After creating the custom event tag in GTM, the event should show up in the dropdown when creating a custom conversion in Business Manager right?