If you’re doing any type of online marketing, you know what a headache it can be to deal with the growing number of code snippets you need to install on your web pages. These days it’s not uncommon to have tags for analytics, paid search, paid social, email, and who knows what else.
Google Tag Manager is a great way to quickly gain control of this potentially messy situation. In this post, I’ll quickly take you through everything you need to do to install a Facebook pixel on a site using GTM.
I’m assuming you have a Facebook ad account. I’m also assuming you have created a Google Tag Manager account. With those two things up and running, we’re ready to rock.
Step 1: Create your pixel.
The first thing you need to do is create a pixel that will be associated with your chosen Facebook ad account. To do that, go into Ads Manager, select the hamburger menu in the upper left corner, and then, under “Assets,” click on “Pixels.”
You’ll then see a screen with only one option. Click “Create a Pixel.”
Now you’ll be asked how you wish to install your pixel code. You could select “Copy and Paste the Code” here and head directly over to Google Tag Manager, but then you would miss the lovely help screen that Facebook has prepared for you. So choose “Use an Integration or Tag Manager.”
If you were integrating your pixel with a popular eccommerce platform, this is where all that would go down. But we’re focused on GTM so click “Google Tag Manager.”
Then your presented with a step-by-step help screen that guides you through the process of integrating with GTM. But note that you will not be integrating your pixel with GTM inside of Ads Manager. We’re interested in getting the actual code snippet so scroll down.
Scroll down to “Copy and paste your pixel base code” and copy your pixel base code to your clipboard.
Step 2: Create a new Tag for your pixel in Google Tag Manager
Open up Google Tag Manager and create a new tag.
Select the edit icon in the upper right hand corner of the Create Tag screen.
You’ll see some preconfigured tag types. Facebook is conspicuously absent from the list, so you’ll need to create your own custom tag. Click on the “Custom Html” tag type.
In the HTML field, paste your pixel code snippet. But don’t go anywhere after that just yet.
Beneath the HTML text area, you’ll see the “Triggering” field. You want this tag to fire on every page so click “All Pages.” Before you click Save, give your new tag a name that clearly identifies what it is and what it does. I chose “FB – Base Pixel – All Pages” to indicate the tag is for the Facebook base pixel (you may have many more at a later time) and it’s firing on all pages.
Step 3: Verify your pixel is firing correctly
You have created your Facebook pixel. You have created your tag in GTM. Now it’s time to test it out. Google Tag Manager lets you preview your tags before officially committing to them. Go up to the “Publish” dropdown and select “Preview.” Nothing interesting will happen. So you’ll need to go to your site — any page will do because we have told GTM to fire the tag on every page.
When you visit your site (the one to which you’re adding the pixel) you’ll notice the GTM preview window is active at the bottom of your browser. This will tell you what, if any, tags are triggered on this page. As you can see, right now my home page is firing both an analytics tag and the Facebook Pixel I just added.
If you’re not seeing something that looks like what’s pictured above, I would suggest going back through this tutorial and making sure you got each step right. Or install and activate Google’s Tag Assistant extension for Chrome. This is a great tool to help you understand what’s going on under the hood and is invaluable for debugging. If everything is looking good at this point, we’re ready to publish our tag.
Step 4: Publish your new Google Tag Manager tag
I’m making “Publish” its own step because it’s stupidly easy to forget to commit your changes. Remember, you’re in Preview mode. Your new GTM tag, and thus your Facebook Pixel, will not do anything for you until you click “Publish.”
Your GTM dashboard should look something like this. (Forget the Analytics tag, you’re just looking for the Facebook pixel tag).
Step 5: Confirm that your pixel is working properly with Facebook Pixel Helper
After you Publish your tag, your pixel is live. Let’s confirm that. You could head back over to Ads Manager at this point. But before you do, I’d like to introduce you to a great tool, one that you may already have, called the Facebook Pixel Helper, another Chrome extension.
Once installed, the Facebook Pixel Helper sits in your tool bar and turns from gray to blue whenever you visit a site (any site, not just yours) with a Facebook pixel installed. This really comes in handy when you’re dealing with more complex pixel situations, like when you’re using Standard Events or Dynamic ads.
You don’t have to have Facebook Pixel Helper to confirm your pixel is live and working, but if you do, visit any page on your site and you should see the Pixel Helper turn a healthy blue. Click on the Pixel Helper icon for more info about the pixels on that page.
Step 6: Confirm that your pixel is working properly in Facebook Ads Manager
Now go back into Facebook Ads Manager. Click the hamburger menu and select “Pixels” under “Assets.” If everything has gone right, you should see a timeline indicating how many times your pixel has fired. If you’re getting a message saying that there hasn’t been any activity associated with your pixel, don’t worry. Might take 5 or 10 minutes to get the data. Just go get a cup of coffee and refresh your browser when you return.
If you’re not registering pixel hits in Ads Manager the first thing I would do is make sure you “Published” your tag in GTM. If your pixel was working in Preview mode and it’s not working now, I can almost guarantee you that’s the problem. For other less obvious issues, use the Google Tag Assistant in conjunction with the Facebook Pixel Helper to do your debugging.
Also, one final tip: when you’re done installing and testing your new tag, you may notice that the GTM preivew/debug window annoyingly stays active. If so, go into the main GTM dashboard and click “Leave Preview Mode.” I kind of wish that would happen automatically after you publish your tag but it doesn’t.
Hope you enjoyed this quick tutorial about adding the Facebook pixel to a site with Google Tag Manager. If I left anything out or said something that didn’t make sense, let me know in the comments or shoot me an email.