Facebook ads and Instagram ads can be key advertising channels for many businesses, but much like Google Ads, they rely heavily on the right data signals to perform effectively. The Facebook pixel is one of the ways to send those data signals into the Facebook system to enhance your advertising performance. If you are using Google Tag Manager to better manage your website tracking, you can add Facebook Pixel to Google Tag Manager (GTM) by following one of the methods in this guide.
Unfortunately though, adding a tag for the Facebook pixel in GTM is not as straightforward as adding Google Analytics to GTM. Chalk it up to the power struggle between Google and Facebook or something else, but you won’t find a premade Facebook pixel tag in GTM. Therefore, to make it really clear, we’ve outlined the best ways to add the Facebook pixel to your website using Google Tag Manager here.
Before we get started, make sure that you have your Facebook pixel code handy, as you’ll need it to use either of these methods. If you aren’t sure where to find your pixel code or you haven’t created a Facebook pixel yet, check out these instructions before continuing.
Add Facebook Pixel To Google Tag Manager Manually
The official Facebook documentation1 recommends that you use a Custom HTML tag to add the Facebook pixel to Google Tag Manager so we will start with that method.
To add the Facebook Pixel manually to GTM:
- Log into your Google Tag Manager workspace by going to tagmanager.google.com
- Click Tags on the left hand side, then click New
- Give your tag a name, like “FB – Pixel”
- Under Tag Configuration, choose the “Custom HTML” tag type
- Paste your Facebook pixel code² into the “HTML” box.
- You can find your pixel code by going to the Facebook Event Manager
- Once you’re in the right Ad Account, make sure you’ve selected the correct pixel or create a new one
- Choose “Install code manually”
- Copy the full pixel code including the script, non-script, and comments and Paste into the Custom HTML tag in GTM
- Under Triggering, select the All Pages trigger
- Click the blue Save button in the top right corner
This is an example of what your full pixel code should look like – just be sure to replace both instances of 9999999999999999 with your real pixel ID.
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '9999999999999999');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=9999999999999999&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code --> After you hit Save, your Facebook pixel has now been added to Google Tag Manager.
Add Facebook Pixel To Google Tag Manager Using A Community Template
To make things a little easier, you can use a GTM Community Template to add the Facebook pixel to your website. This is the method we recommend (& use ourselves) because it allows you to leverage the point-and-click user interface which is one of the biggest benefits of Google Tag Manager instead of manually handling the pixel code.
Expert Insight: A distinguished GTM community member created this template to supplement the (non)existence of an official Facebook tag in GTM. A community template is a pre-built configuration that makes it even easier for you to add tags, like your Facebook pixel, to Google Tag Manager.
Since this template asks for your Facebook pixel ID and we can use this same template to add Standard Events3 as well as the Facebook pixel base code4, we recommend creating a Constant variable within GTM before adding your pixel. This will make it easier to reuse your Facebook pixel ID in future tags.
Create A Facebook Pixel Constant Variable
To create a Constant variable, follow these steps:
- Log into your GTM workspace by going to tagmanager.google.com
- Click Variables on the left
- Under “User-Defined Variables,” click New
- Give your variable a name, like “FB – Pixel ID”
- Add a “Constant” variable type
- Enter your Facebook pixel ID (Hint: your pixel ID are the numbers located after “https://www.facebook.com/tr?id=” in your pixel base code. Reference the numbers (9999999999999999) in the pixel code above for more clues on where to find your pixel ID)
- Click the blue Save button in the top right corner.
While you’re not required to create this Facebook pixel ID Constant Variable, we recommend it to save you time moving forward. Once you’ve created it, it’s time to install your Facebook pixel base code into GTM.
Add Facebook Pixel To GTM With A Community Template
To add Facebook pixel to Google Tag Manager using a Community Template:
- Log into your GTM workspace by going to tagmanager.google.com
- Click Tags on the left hand side, then click New
- Give your tag a name, like “FB – Pixel Template”
- Click the pencil under Tag Configuration and choose “Discover more tag types in the Community Template Gallery”
- Next, search “Facebook” and select the “Facebook Pixel” by facebookarchive (or visit this link and click “Add to workspace”)
- Click the blue “Add to workspace” button, then click Add to accept the permissions
- Add in your Facebook pixel ID (or your “FB – Pixel ID” Constant Variable from the steps above)
- This same template allows you to fire other Standard Events, but for now, make sure that Standard radio button is selected and PageView is chosen in the dropdown below.
- Go through the rest of the settings to make sure they are set appropriately according to your needs. You may not have to change anything if you just need the basic Facebook pixel implementation.
- Under Triggering, select the All Pages trigger
- Click the blue Save button in the top right corner
After clicking save you’ve added your Facebook pixel to Google Tag Manager. Nice Work!
Don’t forget, with either of these methods, you’ll want to use the Google Tag Manager preview tool to make sure that your new Facebook pixel tag is working correctly.
Pro Tip: To make sure your Facebook pixel is installed according to Facebook’s best practice5, you can use the Facebook Pixel Helper chrome extension to check to see if your pixel is installed on your site correctly. The extension will also help you understand what data your newly installed pixel is collecting.
In the end, the only difference between these two methods is the amount of code you have to deal with. However, the biggest advantage of using the Facebook GTM Template is that you can also use it to add Standard Events like add-to-cart actions or leads, which can save you time and headaches.
If you run into any trouble installing the Facebook pixel on your website or have questions about setting up Standard or Custom Events, feel free to contact us to let us know how we can help.
Happy Tagging!
Resources
- Using Facebook Pixel with Google Tag Manager – Facebook Help Center
- Create and Install a Facebook Pixel – Facebook Help Center
- Specifications for Facebook Pixel Standard Events – Facebook Help Center
- Implementation – Facebook Pixel – Facebook Developers Center
- Best Practices for Facebook Pixel Setup – Facebook Help Center
2 Responses
I came here for information on adding a facebook pixel through google tag manager, and tried your template version – it looks like either the author of the template has changed, or the template is no longer available! 🙁
Thank you for letting us know. We have updated the instructions and screenshots to reflect the new author of the template. We also added another link to the template to make it more clear which Community Template to use in case this happens again.