How To Implement Facebook Pixel Using Google Tag Manager

Using Google Tag Manager (GTM) to implement Facebook pixels will help you consistently and easily track conversion and events from your website, allowing you to prove the success (or failure) of your advertising while building valuable data inside of Facebook that can be used for future targeting.

What Is Facebook Pixel?

Facebook Pixel is an analytics tool that helps you measure the effectiveness of your Facebook marketing campaigns by understanding what users do on your site. The Facebook Pixel is just pixel code that you generate within your Facebook Ads Manager account.

The default pixel will help you in three main areas:

• Conversion tracking: Facebook pixel ties conversions on your site back to specific Facebook advertising users clicked through.
• Optimization: After installation, you can set up automatic bidding to target people who are more likely to convert.
• Remarketing: Create custom audiences based on groups of users who came from certain ads to remarket.

Event Tracking

Tying conversions back to your Facebook ads is not the only thing the Facebook Pixel can do. You can also track events – actions taken on your site – with the Facebook Pixel. To do this, you need to generate extra pixel code within Ads Manager. You can choose from a list of standard events Facebook provides for you, or create your own custom events that are based off URLs. For a complete description of Facebook Pixel events, check out this document written by Facebook.

This sounds pretty great, right? Let’s talk a bit about why you should use the Facebook Pixel before we begin our walk-through of how to get the Facebook Pixel code, and how we can use GTM to implement it.

Why Should You Use Facebook Pixel?

Facebook is a major social media platform that can drive a great deal of traffic to your website. By using the Facebook Pixel, you will collect insightful data regarding actions and conversions that result from Facebook traffic.

Just like in Google Analytics, we can use that data to:

• Better justify our ad spend
• Better target future people

Google Analytics is great, and through audiences and remarketing, we can target people around the web.
But it’s not the only platform. There will certainly be crossover, but Facebook can provide you with:

• A completely new audience
• Different experiences for promotions and ads that may perform differently

One of the great things about Facebook Pixel is that it can be implemented on your site in many different ways, especially with Google Tag Manager!

Using Google Tag Manager

Default Code

Our first step is to generate our default Facebook Pixel in the Facebook Events Manager interface. A popup window will appear when you create your pixel. You will be given a few options for how to implement your Facebook Pixel, and we want to choose the first option: Use an integration of tag manager.

Choose Google Tag Manager as your solution, and then you will be asked if you want to do a quick install, or manual install. You can choose to do a quick install, but for the purpose of this post, we will do a manual install. The next window will present us with instructions for implementing the base pixel code and any event code we wish to use. Copy the base code for use in GTM.

Over in GTM, we will need to use a Custom HTML tag for our pixel code. Why are we using a Custom HTML tag you ask? Great question! While GTM has many built-in tags, there is not yet one for the Facebook Pixel! Therefore, we must resort to using the Custom HTML tag.

Paste the base pixel code into the tag, and name it, CU – Default Facebook Pixel. For our trigger, we will use the All Pages trigger, because we want our Facebook Pixel present on every page. This lets us know what pages users from Facebook viewed on our site. When you’re finished with the tag, it should look like this:

Event Code

For this next bit we need to go back to the popup we left open in the Facebook Events Manager interface, and get the pixel code for the event we want to track. You will have a few standard events to choose from, and a custom event that you can create on your own. The recommended add to cart event code comes with the value and currency variables, while the advanced version throws descriptive parameters such as, content_id and content_name (i.e. product ID and product name). You can choose from any three versions of this code, and customize it by adding extra parameters.

Check out this document to get a detailed look at the different parameters available for your use.  Let’s say we want to track add to cart events on our site. The pixel code for an add to cart event will look something like this:

In GTM, create a Custom HTML tag, and you guessed it, paste the pixel code into the tag. Let’s name the tag, CU – Facebook Pixel Event – Add To Cart, and provide it some extra parameters.

*Note: you can use variables to dynamically pull in information regarding parameters like price, content_name, etc. as needed.

Since we are tracking a specific event, we want this tag to fire when the user clicks the “add to cart” button. We need a trigger that tells GTM to only execute the contents of this Custom HTML tag when a user clicks a “add to cart” button. The good thing is you can reuse the trigger that you already are using for GA. Reusing triggers makes sure that events are defined the same way in both platforms. Here is an example of what your trigger configuration should look like:

Testing

Our default pixel tag and pixel event tag have been configured and saved, now we need to take them for a test run. To test out our two new tags, we can click the preview button in the top right corner of the GTM interface.

We can now go to our website and check to be sure the CU – Default Facebook Pixel tag is firing every page, and that our add to cart buttons fire the CU – Facebook Pixel – Add To Cart tag. Once we see that our tags are firing, we can publish our container, and start collecting data.

You can also use the Facebook Pixel Helper extension for Google Chrome to debug any issues with your pixel. The extension will tell you if there is a Facebook Pixel present on the page, and provide information such as the Facebook Pixel ID. When you navigate to a page on your website, you can click on the Facebook Pixel Helper extension, and you should see this:

If you see your Facebook Pixel ID, and pageview data, then you know your Facebook Pixel is present on the current page. Navigate to a few others to make sure it is present everywhere. To test your add to cart event, you will need to add an item to your cart, and you should see your pixel event tag fire in the GTM Debug panel, as well as in the Facebook Pixel Helper extension.

Final Thoughts

Facebook Pixel is an analytics tool that helps measure the effectiveness of your Facebook campaigns by what users do on your site. You will not see this data in Google Analytics, but rather in your Facebook Ads Manager account. Using Facebook Pixel gives you the opportunity to create custom audiences based on users who came from specific ads, set up automatic bidding to target those who are more likely to convert, and tie conversions back to your Facebook ads.

Using GTM to implement your Facebook Pixel is an easy way to do this, and you can reuse triggers you have already created.