Add Facebook Pixel Tag in GTM

Contributors

@victoriadynamicdata-agency


Business Benefits

Track ad-driven visitor activity on your website.


Sign into Facebook Business Manager, navigate to Events Manager > Add Events > From a new website, click Install code manually and copy the code.

The code has two parts, the <script> and <noscript> portions, and will look something like this:

<!-- 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', '{your-pixel-id-goes-here}');
  fbq('track', 'PageView');
</script>

Sign in into Google Tag Manager, navigate to Tags in the left menu, and click New to create a new tag.

Enter a name for the tag in the Untitled Tag field and choose the Custom HTML tag type under Custom in the configuration box.

Use a name like “Facebook - Pageview” to distinguish the tag from the rest.

Paste the <script> portion of the Facebook Pixel code you copied earlier into the Custom HTML textbox and select the Once per page tag firing option under Advanced Settings.

Select the tag to fire Once per page under Advanced Settings.

Choose the All Pages trigger for the tag, save it, and preview the container to make sure the tag fires.

As we want the tag to be fired on every page of the website we’ll choose “All Pages” trigger. In case we only want to fire the tag on some pages we can create a new trigger with its respective filters and test it.

Create a new Custom Image tag to install the <noscript> portion of the Facebook Pixel tag.

  • Enter a name for the tag in the Untitled Tag field. Use a name like “Facebook - No Script Pageview” to distinguish the tag from the rest.
  • When JavaScript is disabled in the browser, the <script> tag won’t work. Adding this Custom Image tag loads an image pixel and ensures the Facebook Pixel tag is fired.

Paste the src= value from the <noscript> portion of the Facebook Pixel as the Image URL under Tag Configuration.

Create a new All Pages trigger for the tag using a new variable to detect whether JavaScript is disabled.

  • Create the variable by navigating to Variables option in the left menu, and clicking New.

  • Choose a “Custom JavaScript” and name it something memorable like, “Custom JavaScript - JavaScript is disabled.”
  • Enter function() { return true; } into the Custom JavaScript text box and save it.

  • Create the trigger by navigating to the Triggers option in the left menu of Google Tag Manager, and clicking New.

  • Choose Page View trigger type and name it something memorable like, “Pageview - All Pages - JavaScript disabled.”
  • Configure the new trigger to fire only on Some Page Views, select the Custom Javascript tag you just created as the event, set the conditions as does not equal and true, and save it.

  • Return to the "Custom JavaScript - JavaScript is disabled” tag and choose as trigger the "Pageview - All Pages - JavaScript disabled”