How to Install the New Facebook Pixel with Google Tag Manager

By implementing Facebook Pixel you can grow your remarketing audiences and show ads for them in particular. In this blog post I’ll show you how easily install the new Facebook Pixel with Google Tag Manager to your website.

Before we continue

This blog post assumes you have a working knowledge of Google Tag Manager tags. If you’re a beginner – I highly recommend checking out these free Google Tag Manager courses, first. The minimum requirements are:

• You have Google Tag Manager tracking code installed on your website.
• You know what tags, triggers, variables and dataLayer are and how they work in Google Tag Manager.

P.S.  This blog post is a part of more comprehensive guide – Google Tag Manager + Facebook, so if you’re looking for more in-depth information about how to upgrade your Facebook marketing with Google Tag Manager, give it a try.

Install Facebook Pixel With Google Tag Manager

If you have used Twitter or Google ads, then you’re probably already familiar with how remarketing works. If not, here’s a quick overview:

Once you place a snippet of Facebook’s code on your website, visitors will get a 3rd party cookie (from FB). That very same cookie is used in Facebook’s ad engine to recognize people who have visited your site and retarget them with your ads.

Moreover, you can pass additional events (for example “Visitor added products to cart”) and this way target ads according to those actions/conversions). More about this – in this blog post.

There is no ready-made Facebook tag template in Google Tag Manager so far, so you’ll need to use Custom HTML tag in order to place the code on your website. But first, make sure you create Facebook Business Manager account (if you don’t have one).

After you’ve created it, click menu icon in top left corner and choose Pixels (under Assets).

You’ll be prompted to create a pixel. A page should look like this (remember, Facebook often updates Business Manager’s user interface, so there’s a chance you’ll see a slightly different view. But do not panic and follow Facebook’s instructions):

After Pixel is created, you’ll get a piece of code, like this one (except XXXXXXXXXX part which contains your unique Pixel ID):

That’s Facebook Pixel (a.k.a. Facebook Remarketing) code which needs to be added to every page of your website.

Quick side note: Facebook Pixel code includes a “noscript” component. Noscript means that if Javascript is disabled in the browser, an image pixel would be loaded directly via GTM’s noscript iframe. However, noscript tags will not fire within a GTM Custom HTML tag.

If you REALLY want to fire Facebook Pixel in browser with disabled Javascript, you’ll need to load this within a custom image tag. Just take the URL from <noscript> part’s src attribute, e.g. https://www.facebook.com/tr?id=XXXXXXXXXXXXX&ev=PageView&noscript=1 and paste it in Custom Image tag (in Google Tag Manager).

You’ll need to create a separate Custom Image tag for every Facebook event you want to track. But remember, this is optional. You can simply ignore browsers with disabled Javascript and skip <noscript> parts. Keep in mind, that people with Javascript disabled can’t properly use the majority of websites. End of Quick side note.

But first, let’s create a constant variable for Facebook Pixel ID (because we’ll need to use it in multiple tags within GTM). In my blog post Google Tag Manager Best Practices, check tip No. 6 – it explains why it’s necessary to utilize constant variables in every GTM container.

In your Pixel code snippet, look for the following line of code:

See that XXXXXXXXX? That’s your Pixel ID. Keep in mind that your ID will be a string of random numbers (I’m just replacing real ID with X letters).

Now, open GTM account, go to variables and create a new user-defined variable with the following settings:

After that, let’s get back to our Pixel tag. In Google Tag Manager account, go to Tags and create new tag with the following settings:

• Type – Custom HTML.
• Title – Facebook Pixel.
• In HTML field paste Pixel’s code.
• In Triggering section, choose All pages.
• Hit Save.

Don’t forget to enable Preview and Debug mode in GTM and check whether Facebook Pixel tag has fired. In P&D panel (at the bottom of the screen) click Page view event and look for Pixel tag there (in case you didn’t know, All Pages trigger means All Page View Events).

The best way to check whether data was successfully passed from Pixel to Facebook’s servers is to use Chrome extension – Facebook Pixel Helper. You can read more about it in official Facebook knowledge base.

Done! You have installed Facebook Pixel with Google Tag Manager. From now on, all visitors of your website will receive a 3rd party cookie from Facebook, thus your remarketing audiences will grow. When those visitors with cookies browse Facebook, they’ll see your ads.

What I really like about Facebook audiences, is that you can easily share your audiences with others. This way you can get access to your partners’ lists and target them with your ads.

No personal data is shared so there’s no need to be worried about privacy issues.

Facebook Conversion Tracking With GTM

As I have mentioned in the beginning of this blog post, you can take Facebook marketing even further by implementing Facebook conversion tracking with Google Tag Manager. Learn more about it in this blog post.

Install Facebook Pixel With Google Tag Manager: Conclusion

That’s it! You have successfully installed Facebook pixel with Google Tag Manager. It’s actually a pretty easy thing to do but very powerful. Having pixel installed on a website will enable you to grow remarketing lists and show ads to them in particular.

This blog post is a part of more comprehensive guide – Google Tag Manager + Facebook, so if you’re looking more in-depth tutorial about how to upgrade your Facebook marketing with Google Tag Manager, give it a try.

Did I miss something in this blog post? If yes, let me know in the comments!