Adding a Facebook Pixel to your website using Google Tag Manager

How to add Facebook Pixel tracking code to your website

Facebook’s Pixel allows us to target users who have visited our website with adverts on Facebook. In this post I’ll run through a method to install it on your website using Google Tag Manager.

I’ve based my method of installing on the procedure outlined in the excellent Measureschool video below.

Facebook also has a guide on how to track and install Pixels.

How to install a Facebook Pixel on your website using GTM

Go into your Facebook advertising account and click Events Manager > Pixels.

Access the Pixel under Measure and Report in your Facebook advertising account

Click on your own Pixel (or you may need to create one) and you should be shown a screen similar to the one below.

Adding a FB Pixel to your website using Google Tag Manager

Click ‘Set Up’ to start the installation process.

Facebook does give you the option to ‘connect a partner platform’ like Google Tag Manager automatically, but Measureschool recommends manually installing the Pixel Code yourself.

So click ‘Manually install Pixel Code Yourself’.

click to manually install the code yourself from the menu

You then copy the pixel code that we will use for creating a tag in Google Tag Manager.

Copying the entire pixel code that you will paste into google tag manager

Using Google Tag Manager

Open up Google Tag Manager and click to create a new tag.

Adding a Facebook Pixel to your website using Google Tag Manager

You should see a blank tag configuration and triggering below.

Create a new tag in google tag manager

Make sure you’ve copied the pixel code from Facebook.

Adding a Facebook Pixel to your website using Google Tag Manager

For ‘Tag configuration’ click the Custom HTML option on the right-hand side of the screen.

Create a custom HTML tag in Google Tag Manager


Paste the Facebook Pixel Code into the custom HTML box.

Copy the Facebook pixel code into the Custom HTML tag in Google Tag Manager

However, we won’t be leaving the code as it is.

The next thing to do is to delete the <noscript> portion of the code. That is everything from the opening <noscript> to the close </noscript>, as seen below.

Remove the no script section of the FB pixel code

That is not the only thing we need to delete however. As per Measureschool’s recommended way of installing the code, we will delete the ‘pageview’ section, as seen below.

Adding a Facebook Pixel to your website using Google Tag Manager

The code should now just be what you see below. This is the base Facebook tracking that loads the Facebook library. Please watch the Measureschool video which will explain the reasons for this type of tag setup in a lot more detail.

Adding a Facebook Pixel to your website using Google Tag Manager

The next step is to set the ‘Tag firing priority’ to 100, meaning this tag fires first.

Adding a Facebook Pixel to your website using Google Tag Manager

The next step is to set up the triggering for the this tag.

Choose the trigger ‘All Pages’. This means that the tag will be triggered by every page view.

Adding a Facebook Pixel to your website using Google Tag Manager

We can name our tag ‘Facebook – Base Tracking’.

Your Facebook pixel tag in Google Tag Manager

Creating a secondary ‘PageView’ tag.

Now that we have our Base tracking Facebook tag installed, we can add in individual tags for each individual action we want to track.

These could be specific goals on your website, such as joining a mailing list or getting in touch with you via email.

In this case we will start off with tracking pageviews.

Create a new tag and copy paste the following piece of code into the custom HTML format.

Adding a Facebook Pixel to your website using Google Tag Manager

We choose the trigger for All Pages to count all our pageviews.

Showing your FB pixel tag in GTM

Making sure the Facebook Pixel is working correctly

To check that our Pixel is working correctly, we can download and install Facebook Pixel Helper for Google Chrome.

Installing the FB Pixel Helper from the chrome web store

This Chrome extension can be used to check whether Facebook Pixels are installed correctly.

Below we can see what the Pixel Helper shows us, that our PageView tag is installed correctly.

Shows that one pixel was found on the site using the Facebook Pixel helper

Hope you found this blog helpful!

My Other Blog Posts

You might enjoy some of my other blog posts.

I’m Michael


I’m a digital analyst with seven years experience in digital marketing. I’m skilled in web analytics, tag management and data visualization.

Get in touch with me!
LinkedIn
Twitter
Email

I'm Michael