Logo

How to set up Facebook Pixel using Google Tag Manager

|

Date:

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

  • Create the Facebook Pixel on Facebook and copy the tag to your clipboard
  • Log into Google Tag Manager and go to tags > new tag
  • Name it FB pixel or similar
  • Click Custom HTML tag
  • Paste the Facebook Pixel code making sure to use the opening and closing <script></script> tags.
  • 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.
  • Cut and save the following somewhere safe for now. We will use this in a separate tag to get more customisability. fbq('track', 'PageView');
  • When this is done, it should look something like this:
      <!-- Facebook Pixel Code -->
      !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');
      <!-- End Facebook Pixel Code -->
  • Click advanced settings > Set tag firing priority as 99. This ensures the tag is fired as high priority before all other Facebook tags
  • Set All pages as the trigger – This ensures the pixel is fired on all pages
  • Your completed tag should look like this:
fb-pixel-tag-manager.jpg
  • Save.
  • Go into preview mode.
  • 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.
  • 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

  • Log into Google Tag Manager and go to tags > new tag
  • Name it FB – Page views or similar
  • Click Custom HTML tag
  • 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>
  • 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.
  • Set All pages as the trigger – This ensures the pixel is fired on all pages
  • 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