How to Install and Debug the Facebook Pixel using Google Tag Manager

By Megalytic Staff - August 24, 2018

As a digital marketer, juggling a variety of advertising platforms is just a part of everyday life. From Google Ads and Facebook to Twitter, LinkedIn, AdRoll, and more, you’re used to having a lot on your plate.
 
But when you have to worry about installing performance-tracking tags and pixels on your website so you can optimize for each platform, things can get overwhelming. Not only do you have to add this time-consuming task to your IT team’s already long to-do list, but it creates a lot of additional code to manage, maintain, and update.

 The good news is that there’s an easier way, and it’s called a tag management system. If you haven’t used this kind of system before, it’s an incredibly effective way to ease your workload while saving you time and money. In a nutshell, tag management systems simplify the process of adding, editing, or removing tags. These automated systems help you manage your data foundation and streamline tag deployments so your IT team can focus on improving your systems. Tag management systems can also help you launch campaigns more quickly, improve your website performance, and ensure that you are collecting the analytics data necessary (e.g., conversions, leads) to optimize the performance of your ads.
 
In fact, today’s tag management systems are a crucial best practice for deploying tracking code. If you haven’t used one before, Google Tag Manager (GTM) is a reliable free system. An added bonus is that it enjoys the largest market share among tag management systems.
 
GTM is overall a terrific system, with a few caveats. One of these is that it doesn’t have a built-in tag type for Facebook’s tag (also known as the “Facebook Pixel”). If you don’t identify as a “tech person,” this can be intimidating because it requires you to use GTM's Custom HTML tag type together with JavaScript code.

GDS Ad 1

Set Up the Facebook Pixel Code

Your first step to installing GTM is to get the Facebook pixel code so you can then use GTM to install it. To do this, log in to your Facebook Business Manager account and open Events Manager > Pixels

 

Open Events Manager Pixels in Facebook Business Manager

 

If you don’t already have a Facebook Pixel, click on the “Create a Pixel” button.

 

Create A Pixel using Facebook Business Manager

 

Otherwise, click on “Details” and then “Set up.”

 

Set Up a Pixel with Facebook Business Manager

 

Once your pixel is set up, a dialog box will appear. Choose “Use an Integration or Tag Manager.” This will make the process a lot easier because rather than requiring you to copy and paste code, it uses automation technology to automatically integrate Facebook’s pixel code into your GTM account.

 

Use an Integration or Tag Manager

 

Next, you’ll see a list of choices. From the list, pick “Google Tag Manager” and follow the instructions. Then log into the Google account you’ll use with GTM and grant Facebook access. This will ensure that Facebook can edit and update your GTM account.

 

Grant Facebook Access to Google Tag Manager

 

At this point, you can simply follow the instructions on the subsequent screens to verify and confirm the integration of your Facebook and GTM accounts. As you reach the end of the process, keep in mind that once you click “Finish Setup,” it may take a few minutes for Facebook to create the correct tag and publish it in your container. After three minutes or so, login to your GTM account and refresh the tags. Here, you should see a newly created Facebook Pixel tag that looks like this:

 

Facebook Pixel Tag Has Been Created

 

Inspect GTM’s Custom HTML Tag Created by Facebook

Now that you’ve created your Facebook Pixel tag, you’ll need to inspect it to make sure it’s ready to fire. To see the pixel tag's code, click on the tag in GTM. This will open the GTM tag editor. At the top of your screen, you’ll see a “Tag Configuration” box, which is a Custom HTML tag. This means it uses custom code to implement the tag. Inside the HTML box, you’ll see the custom code Facebook has generated to deploy its tag (the Facebook Pixel) on your website.

 

Inspecting the Facebook Pixel Tag

 

Once you’ve arrived here, scroll down to the box labeled “Triggering.” This defines when the Facebook Pixel code will be run (or be “fired”). As you can see, it is set to fire on All Pages. This is the default recommended behavior for the Facebook Pixel, which works successfully in most cases.

 

Triggered on All Pages

 

Test to Make Sure GTM is Firing the Facebook Pixel

Now that you’ve created a Facebook Pixel tag in your Google Tag Manager account, you’ll need to make sure that GTM is “firing” this tag on your website pages. You can check this by using GTM Preview Mode. Just click the “Preview" button.

 

Starting GTM Preview Mode

 

Once you’re in Preview Mode, use the same browser to open a second tab. Then enter your website’s URL and refresh the page. Here you’ll see that a bottom pane has opened. If you review the Summary section, you can view the tags that have fired on the page you just opened.

In our example, we can see that the Facebook Pixel Tag has fired on the Megalytic website.

 

Testing that GTM is Firing the Facebook Pixel Tag on Each Page

 

After checking your first page, take the time to navigate to a few other pages and check to see that the Facebook Pixel tag is getting fired on all of them. If it’s firing, at this point you can turn off GTM Preview Mode. To do so, click the link at the top of the GTM Workspace that says “Leave Preview Mode”.

 

Leave Preview Mode

 

If for some reason the tag is not firing on certain pages, it’s likely that the GTM tracking code either hasn’t been installed or has been installed incorrectly on that page. If you experience this issue, you can track down the root of the problem in our next step by using the Google Tag Assistant.

Using Google Tag Assistant to Test GTM Installation

You’ll only need to use this step if you’re having trouble getting your Facebook Pixel Tag to fire on one or more website pages. Since Google Tag Assistant only works with the Chrome browser, if you don’t typically use Chrome, you’ll need to install it.

Once you’ve done so, open Chrome and install the Google Tag Assistant. Then navigate to your website and click on the small blue tag icon in the upper right corner of the Chrome browser.

 

Open Google Tag Assistant

 

From here, click the “Enable” button in the lower left portion of Google Tag Assistant to turn it on for your website. Then, refresh the page and click on Google Tag Assistant again.

 

Verifying that GTM is Installed

 

Google Tag Assistant is useful because it shows you the Google Tags that are installed on your website. In the image above, you can see that both GTM and Google Analytics (GA) are installed.

It’s important to note that the tags shown are displayed in blue, but they may appear in other colors depending on their status. If everything looks good, tags are displayed in green. If Google has suggestions, tags are shown in blue. If there are minor problems, tags will appear in yellow, and if there are major problems tags will appear in red.

If you notice that a tag appears in a color other than green, don’t panic: you’ll likely only need to take action if you see a red tag. Blue tags don’t typically indicate an actual problem and yellow tags are usually still working. If a tag is red, however, this indicates that a tag is broken, and you’ll need to contact a web developer to find out the source of the issue.

Now that we’ve reviewed how to use Google Tag Assistant to ensure that GTM is installed correctly on any page, we’ll tell you how to use Facebook’s similar tool to directly test and debug the Facebook Pixel.

Using Facebook Pixel Helper to Test Your Facebook Pixel Implementation

Let’s say you’ve correctly installed Google Tag Manager and it’s working correctly, but after installing the Facebook Pixel Tag (as described above), you’re still having problems. In this case, you’ll need to debug the Facebook Pixel directly using the Facebook Pixel Helper.

Start by installing it on Chrome as you did with Google Tag Assistant. Next, open your website, refresh the page, and click on the Facebook Pixel Helper symbol in the upper right corner of Chrome.

 

Open the Facebook Pixel Helper

 

If the Facebook Pixel is correctly installed, you should see its Pixel ID listed correctly here. If this isn’t the case and you’re interested in learning more about how to use the Facebook Pixel Helper to validate and debug your Facebook tracking, check out the Facebook Pixel Helper documentation.

Final Thoughts

Hopefully, this post has helped you successfully install the Facebook Pixel using Google Tag Manager and solve any problems you experienced along the way. Once the Facebook Pixel is properly installed, you will be able to take advantage of a lot of the optimization features available in Facebook Ads, so it’s definitely worth the effort.

Content Offer

An introductory guide to inbound marketing

Get to grips with marketing in the digital age

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Download Guide
Comments

We promise that we won't SPAM you.