How to Install Facebook Pixel with Google Tag Manager [2 ways]

Installing Facebook Pixel with Google Tag Manager is the ideal way of installing and setting up the Facebook Pixel on your website. In this guide, we are going to show you two ways how you can implement the Facebook Pixel tracking with Google Tag Manager that will also enable you to also implement advanced Pixel Event tracking on your website, so your Facebook Pixel can really provide both you and the Facebook algorithm with the right data.

In this tutorial about installing and setting up the base code of Facebook Pixel with Google Tab Manager we are also going to share:

  • why you should choose Google Tag Manager as your FB Pixel installation method?
  • how not to install your Facebook Pixel with Google Tag Manager?
  • step by step method of installing and setting up Facebook Pixel using custom HTML tag method
  • step by step way of setting Facebook Pixel with a publicly available Custom GTM template
  • next steps after installing the Facebook Pixel base code with Tag Manager

This is going to be a massive guide, so if you have any questions, don’t hesitate to ask us in the comment section under this article.

If you want professional help with setting up the Facebook Pixel with Google Tag Manager the right way, we will be able to help. Especially if you want to not just track basic PageView events but also want the take advantage of the real power of Facebook Pixel with Standard and Custom Events, you can contact us here and we can deliver a done for you service for you.

How to install Facebook Pixel on your website?

You usually have three options to install Facebook Pixel on your website.

Placing the Pixel code manually to the website head section

You can do it with manual installation, by placing the Pixel base code on your website. This can work if you only want to have the basic PageView event set up but you will need the help of a developer if you need more than just basic Pixel code, like setting up Standard Events and Custom Events to be able to also track user actions on your website.

FB Pixel installation with Partner Integrations

The second option you have is to use Partner Integration that works when you are using a popular content management system (such as WordPress) or a popular e-commerce platform like Shopify. This is also an option that we don’t recommend, as you can set up the Facebook Pixel with this method pretty easily but then you don’t really have the option to customize the implementation or add any other FB Pixel Event that was not installed with the Partner Integration.

Install Facebook Pixel with Google Tag Manager

Unlike the two methods we have just explained, installing the Facebook Pixel with Google Tag Manager enables you to customize your Facebook Pixel implementation any way you want. You can add all relevant Standard Events and can also set up Custom Events, so all the important micro and macro conversion are tracked on your website.

It is also a better solution as you don’t need any developer help if the dataLayer of the website has been implemented correctly.

You can also easily test and debug your Facebook Pixel implementation right before publishing them, so you can also check the implementation of your events before you would publish them to the live website.

How not to install Facebook Pixel with Google Tag Manager?

It is important to add how you should not set up your Facebook Pixel with Google Tag Manager. As we said, you have the opportunity to set up Facebook Pixel with partner integration. And under this Partner Integration section, you will also find Google Tag Manager as a partner:

Facebook Pixel with Google Tag Manager - Partner Integration Installation

The reason for this is that Facebook will do everything for you, so just like with other partner integration methods, you won’t really have control over the implementation. Facebook will basically install the Pixel base code for you on Google Tag Manager, then it will ask you to set up events with the Event Setup tool. It might also use automatic event detection that can also report inaccurate data, so we would avoid this method generally.

Two methods to install Facebook Pixel base code on Google Tag Manager

There are two ways how we can implement the FB Pixel installation with Google Tag Manager, it is really just a personal preference which method you decide to choose. You can either install the Pixel base code with a Custom HTML tag or use the Facebook Pixel Custom Template developed by Simo Ahava.

We will show how you can do both of these methods step by step.

How to install Facebook Pixel with Custom HTML tag on Google Tag Manager?

As Facebook doesn’t offer an official FB Pixel Teg template, the standard way of installing the Facebook Pixel is with a Custom HTML tag. Here are the steps, you have to go through to install the Pixel with a Custom HTML tag:

  1. Open your Google Tag Manager account and choose the right property, if you have multiple ones
  2. On the left side of the screen, click on Tags, then on the new ‘New’ button
  3. Click into the ‘Tag configuration’ box

GTM - Tag Configuration

  1. A menu called “Choose tag type” on the right side of the screen will appear. Scroll down a little bit until you see Custom HTML Tag. Click on it.

Custom HTML Tag - FB Pixel with GTM

  1. Add a Name to the GTM Tag, such as ‘FB Pixel – PageView Event’.
  2. In the HTML box, paste the code you received when you have created your Facebook Pixel ID. If you don’t know that code, or you haven’t created your Facebook Pixel yet, then copy the following code.

<!– 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’, ‘2374271216200198’);
fbq(‘track’, ‘PageView’);
</script>
<noscript><img height=”1″ width=”1″ style=”display:none”
src=”https://www.facebook.com/tr?id=2374271216200198&ev=PageView&noscript=1″
/></noscript>
<!– End Facebook Pixel Code –>

  1. Make sure you replace the Pixel ID with your Pixel ID. Click on this link if you want to know how to find your Facebook Pixel ID.

Custom HTML Tag - Facebook Pixel PageView Event Tag

8. In the Advanced settings of the Custom HTML tag, change the Tag firing options to ‘Once per page’

Tag Firing Option - Facebook Pixel Custom HTML Tag

  1. Last but not least, click on the Triggering box and as the trigger choose the All Pages trigger.
  2. Make sure you made everything right and click on Save in the upper right corner
  3. You can enable the GTM Preview and Debug mode and test if the PageView is firing on all pages of your website. If it working fine, you can go on and publish your new Facebook Pixel PageView tag.

How to install Facebook Pixel with a Custom Template on Google Tag Manager?

If you think that the solution above is too complicated for you (it shouldn’t), then you can also use this second method of using a Custom Google Tag Manager Template to install Facebook Pixel created by the famous Google Tag Manager expert, Simo Ahava.

  1. Once again, you have to sign in to your property, then click on Templates on the left side

Click on Templates button - GTM

  1. Under Tag Templates click on Search Gallery and search for ‘Facebook Pixel’.

Search for Facebook Pixel Tag Template

3. You will find a Template called Facebook Pixel by gtm-templates-simo-ahava. Click on it then you can click on ‘Add to workspace’ and then confirm it again that you want to add it to your workspace.

Add Facebook Pixel Template to Workspace

  1. As the Template has been added, now go to your Tags and Click on New, then on Tag Configuration
  2. Now by searching for Facebook, you can find your Facebook Pixel Template you have just added to your workspace, click on it

Facebook Pixel Custom Template - GTM Tag Configuration

  1. First, at the top of the page, add a name to the tag, e.g. ‘Facebook Pixel – PageView’
  2. Then add your Facebook Pixel ID. If you don’t know it, read this tutorial on how to find your Facebook Pixel ID

Facebook Pixel PageView Event Setup With Custom Template Tag

7. As this is the base Facebook Pixel code, leave everything as it is by default in the Tag section

8. In the Triggering box, click on the box and add the ‘All Pages’ trigger

9. Click on the ‘Save’ button to save the new Facebook tag

10. Just like with the previous solution, you can test the new Tag with the Preview and Debug mode and if it really fires the PageView tag or there is any issue you need to resolve. If everything works properly, you can publish your new Facebook Pixel Tag

If you prefer a video tutorial on how to install the Facebook Pixel with Google Tag Manager, you can also check out this one:

Testing and troubleshooting the Facebook Pixel PageView Event

Although using Preview and Debug mode we can usually check if our implementation is done the right way, there are also other solutions to see that our PageView event is working the right way.

Just to name some of these, Facebook itself is providing many solutions such as the Overview and Diagnostics tab in the Data Sources section of the Facebook Events Manager where you can see all the issues that Facebook is detecting for all active events. You can also test events live with the Test Events tool also found in the Events Manager of your Facebook Business Manager.

If you are interested in more details, check out our article about Facebook Standard events, where we cover these solutions, and how you can use them.

If you want to quickly see if your Facebook Pixel Events are firing correctly without logging in to your FB Business Manager, you can also use Facebook Pixel Helper to check if your Facebook Pixel Events are firing the right way.

All you have to do is install the Chrome extension and then ou can check any websites if they have installed the Facebook Pixel and what Standard and Custom Events and Custom Conversions fire on the website.

The Facebook Pixel Helper will also show if it is detecting any error with your implementation, so it is a best practice to check it every week if everything is working fine, and as you see an issue then you can check your Google Tag Manager property if something needs to be fixed.

Get help with Facebook Pixel installation and setup

If you got stuck with any of the installation methods, or you don’t know how to continue with setting up Standard and Custom Events, we are happy to provide you with professional help. You can contact us here or getting help on this page.

Next steps after installing the Pixel base code with Google Tag Manager

Installing the Facebook Pixel base code is really just the first step in setting up your complete Facebook Pixel tracking. From now on, you will be able track the PageView event, but you have to do additional Standard and Custom events setup if you want to track user actions, micro and macro conversions on your website.

If you are interested in how you can create the Facebook Pixel’s ViewContent Standard Event on GTM, you should read our article here. If you are interested in why Facebook Pixel Events are important to set up read our guide on:

  • Beginner guide on Facebook Standard Events
  • Beginner guide on Facebook Custom Events

All right, guys and gals, that’s it. This is the two ways how you can install Facebook Pixel with Google Tag Manager, add the base Pixel code and also have the opportunity later to install more advanced Custom and Standard Events.

If you got stuck during the Facebook Pixel installation and setup process, or you don’t want to learn GTM just to install and set up your Facebook Pixel, you can contact us here and we will make sure to help you out.

Subscribe To Our YouTube Channel To Get More Free Video Tutorials!

roihacks youtube channel

Subscribe to learn more about Facebook ads, Facebook marketing, how to grow a Facebook page, a group or an Instagram account and many more.