How to set up Facebook Pixel with Google Tag Manager

Posted by: Tom / 

September 13th 2019 / 

Category: 

Digital marketing

Shortcuts...

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 tags: <script></script>
  6. Remove code inside the 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.<noscript></noscript>
  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:
    
        <script>
          <!-- 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 -->
        </script>
                    
  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 tag should look like this: What your tag manager page should look like when installing the Facebook Pixel
  12. Save tag
  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 events

Pageviews
  1. Log into Google Tag Manager and go to tags > new tag
  2. Name it FB - Pageviews or similar
  3. Click Custom HTML tag
  4. Paste the code we cut out of the Facebook Pixel previously to track pageviews 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 Pageviews apart from:

  1. In the Custom HTML tag, use code similar to as follows. Change Calls from site as needed
    <script>fbq('trackCustom', 'Calls from site');</script>
  2. 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

Follow steps from Pageviews apart from:

  1. In the Custom HTML tag, use code similar to as follows. I will explain below.

      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 useful articles:

    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
    <script>fbq('trackCustom', 'Form fills - {{CF7formID}}', {'formID':{{CF7formID}}, 'URL':{{Page URL}}, 'input':{{CF7formResponse}}});</script>
  2. For the trigger, see step 2 above. If you took a look at the Contact Form 7 guide, you can use the trigger outlined there.

About the author

I'm a web developer & online marketing specialist who tends to spend most days experimenting & keeping up to date with HTML, CSS, JS, PHP & various other work-related jargon. I lead the development team & like to constantly push boundaries within the business. Unfortunately, I support LUFC.