How to set up Facebook Pixel using Google Tag Manager

Prerequisites

Before we get started, please ensure you have the following open and ready to go:

1. Access to Google Tag Manager and some basic knowledge
2. Facebook Ad campaign with access to pixel

Installing the Facebook Pixel

1. Create the Facebook Pixel on Facebook and copy the tag to your clipboard
2. Log into Google Tag Manager and go to tags > new tag
3. Name it FB pixel or similar
4. Click Custom HTML tag
5. Paste the Facebook Pixel code making sure to use the opening and closing <script></script> tags.
6. Remove code inside the <noscript></noscript> tags as we don’t need it. This attempts to track when users are not using Javascript in their browser, but this applies to a very low volume of potential users.
7. Cut and save the following somewhere safe for now. We will use this in a separate tag to get more customisability. fbq('track', 'PageView');
8. When this is done, it should look something like this:

   !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', '444444444444444');
9. Click advanced settings > Set tag firing priority as 99. This ensures the tag is fired as high priority before all other Facebook tags
10. Set All pages as the trigger – This ensures the pixel is fired on all pages
11. Your completed tag should look like this:
12. Save.
13. Go into preview mode.
14. Test that your website is loading the tag when the page loads. We can also use the Facebook Pixel Helper tool to test if the Pixel is firing correctly.
15. Push your changes live. Congratulations, you have successfully installed the Facebook Pixel without any tracking at all onto your website!

Set up conversion tracking

Pageviews

1. Log into Google Tag Manager and go to tags > new tag
2. Name it FB – Page views or similar
3. Click Custom HTML tag
4. Paste the code we cut out of the Facebook Pixel previously to track page views without forgetting to wrap it in script tags: <script>fbq('track', 'PageView');</script>
5. Ignore advanced settings for all conversion tracking events, we need to set this explicitly for the Facebook Pixel only to ensure it is fired prior to the conversion tracking events.
6. Set All pages as the trigger – This ensures the pixel is fired on all pages
7. Repeat steps 12 – 15 from above

Calls/emails/other basics

Follow steps from page views but change:

In the Custom HTML tag we need to change the 1st parameter to trackCustom. You can use code similar to as follows, change Calls from site as needed.

<script>
  fbq('trackCustom', 'Calls from site');
</script>

For the trigger, you need to use a specific trigger for when you want the Facebook Pixel event to fire. You may have a pre-existing trigger to track calls for example in your Google Analytics. You can use the same one here.

Form fills

For this example, I am using Contact Form 7, a popular plugin for WordPress. I don’t want to go too much off topic here but if you are not tracking Contact Form 7 forms using Tag Manager variables, see the following document with a list of DOM events that Contact Form 7 sends - https://contactform7.com/dom-events

Anyway, to track this, we can use something like:

<script>
      fbq('trackCustom', 'Form fills - {{CF7formID}}', {
        'formID':{{CF7formID}},
        'URL':{{Page URL}},
        'input':{{CF7formResponse}}
      });
</script>

1. Form fills – {{CF7formID}} = Name of variable to pass to Facebook. {{CF7formID}} is a variable I created in Google Tag Manager which collects the ID of the contact form. So it might read Form fills – 111 for example
2. ‘formID’:{{CF7formID}} = Similar to above except I am passing the {{CF7formID}} to Facebook separately to the title
3. ‘URL’:{{Page URL}} = This is a default variable in Google Tag Manager. If you start typing {{, you will see a list of variables you can pass through to Facebook

You will also need to change the trigger. For this example, Contact Form 7 provides several DOM events we can use – https://contactform7.com/dom-events