Adding a Facebook Pixel to your website using Google Tag Manager
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.
Click on your own Pixel (or you may need to create one) and you should be shown a screen similar to the one below.
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’.
You then copy the pixel code that we will use for creating a tag in Google Tag Manager.
Using Google Tag Manager
Open up Google Tag Manager and click to create a new tag.
You should see a blank tag configuration and triggering below.
Make sure you’ve copied the pixel code from Facebook.
For ‘Tag configuration’ click the Custom HTML option on the right-hand side of the screen.
Paste the Facebook Pixel Code into the custom HTML box.
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.
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.
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.
The next step is to set the ‘Tag firing priority’ to 100, meaning this tag fires first.
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.
We can name our tag ‘Facebook – Base Tracking’.
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.
We choose the trigger for All Pages to count all our pageviews.
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.
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.
Hope you found this blog helpful!
My Other Blog Posts
You might enjoy some of my other blog posts.