How To Implement Facebook Pixel Using Google Tag Manager

/

implement-fb-pixel-using-gtm
Using Google Tag Manager (GTM) to help 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 to

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.

Facebook Pixel Configuration: Implementation options

Modal popup window displaying options for how to implement the Facebook Pixel

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.

Facebook Pixel base code

Facebook Pixel base code in the configuration popup

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:

Default Facebook Pixel Tag

Finished Default Facebook Pixel Tag with All Pages Trigger

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:

Facebook Pixel add to cart code

Add to cart event in the Facebook Events Manager interface

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.

facebook event add to cart event HTML tag

Facebook Pixel AddToCart Event Custom HTML Tag

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:

add to cart trigger for facebook event pixel

Add To Cart Link Click Trigger Configuration For Add To Cart Event

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.

gtm preview button in interface

Google Tag Manager Preview Button 

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:

facebook pixel helper chrome extension interface

Facebook Pixel Helper Chrome Extension Interface

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.

Greg Hauser is a Junior Consultant at LunaMetrics. He is a fan of simple, yet powerful data visualizations and funky bass lines. Outside of the office, you may catch him walking his two cats, or checking out a new Vegan restaurant. Greg is now studying computer information systems after substitute teaching 6th - 12th graders in everything from history to calculus.

  • Yes! Thank you Greg.

  • Nícolas Santos – Cadastra

    Hi, Greg! Great post!
    I work at this digital agency and most of our clients make use of many facebook accounts on the same pages. The problem is: if we need to configure some customTrack in one account only, the event fires to all accounts installed in the page. Have you ever seen this? Know some workaround?

    Many thanks!

    • Simão Pires

      You can do that if you replace the pageview event on the base code with the one from the Add to Cart.

  • Marco Porracin Dieguez

    Just to be sure in all tags that are not the base code you should configure ‘Tag Sequencing’ > Check ‘Fire a Tag Before …’ and select the base code. So if the trigger is an specific pageview you can be sure it won’t fail.
    Finally, i believe is a good practice to give it firing priority (1) to the base code.

    • Marco Porracin Dieguez

      One last thing, when you mention the use of variables its important you write it with like this ‘{{your variable}}’ including the ‘ ‘

    • Simão Pires

      That is indeed true (same for the variables). So this post is a bit incomplete.
      It can also work if you replace the base code with the pageview event with script from the new event.

  • John

    What does the CU stand for in the facebook tag you created?

  • Robert Petković

    Simple and it works. I would also suggest to use lookup variable for “YOUR-PIXEL-ID”, where its returning value depends on the hostname. That way you can use the same GTM on multiple websites 😉

Contact Us.

LunaMetrics

24 S. 18th Street, Suite 100,
Pittsburgh, PA 15203

Follow Us

1.877.220.LUNA

1.412.381.5500

getinfo@lunametrics.com

Questions?
We'll get back to you
in ONE business day.