6 Steps: Adding Facebook Pixel to Your WordPress Site using Google Tag Manager

Recently I ran into a problem with adding a Facebook pixel to a LeadPage (which we had mapped to WordPress using the LeadPages plugin). I could see both the Google Analytics code and the Facebook pixel code in LeadPages’s tracking code dialog, but only the Google Analytics code was showing up in the source code. I solved the problem by reversing the order of the scripts, but at that point I decided there had to be a better way to manage all the tracking scripts you might need for a paid traffic campaign or optimizing a funnel.

Google Tag Manager iconThere is, it’s called Google Tag Manager.

Once you have it installed, Google Tag Manager makes it easy to manage your scripts. Instead of having to update your website with each new script, you just log into Google Tag Manager and add it as a new tag. The other benefit is that it will help your site’s performance as Google utilizes their own CDNs to execute the tag, and the GTM script itself fires asynchronously; taking the burden off of your server and not impacting your render time.

In this post I’m going to show how to add a Facebook pixel to your WordPress site using Google Tag Manager.

First we have to install Google Tag Manager on our site.

Step 1. Create your Google Tag Manager account and get the GTM code

Google Tag Manager Create AccountGo to Google Tag Manager and log using the Google account you use to manage Analytics and Search Console, you may need to click on “Google Tag Manager” to get to the right place. Next you will need to create an account. Choose a memorable name for your account, the name of your company or business is usually a good choice. Since you can have multiple containers per account, most people won’t need multiple accounts.

Google Tag Manager - Create ContainerNext you want to create your first container which will map to your website. In this case you want to type in the URL of your website and click on “Web”. You will need to create a web container for each of your websites.

Once you have created your container, you now are taken to a screen that will have the GTM code you can copy and paste to add to your WordPress site. Leave that window open or copy to the clipboard. We will use the code in Step 3.

Step 2. Install Header and Footer WordPress Plugin

header and footer WordPress plugin

Header and Footer WordPress Plugin

If you don’t already have a way to add pixel or tracking code to your WordPress site, one way is to install a plugin that allows you to add code to either the HEAD or BODY HTML tags of your site. For this I used the Header and Footer Plugin. This plugin has a number of other nifty features. There are other plugins you can use, including one called “DuracellTomi’s Google Tag Manager for WordPress”.

Per the Google Tag Manager instructions, we need to add the Google Tag Manager code just after the opening BODY tag, fortunately the Header and Footer plugin gives us this ability. Make sure the plugin you use supports this.

Step 3. Paste the GTM code into “After <BODY>”

Adding GTM code in Header and Footer

Adding Google Tag Manager code to Header and Footer

You’ll find the configuration options for Header and Footer in the WordPress Settings menu. Paste the code you got from Google Tag Manager into the After <BODY> Field.

If you need to go back to Google Tag Manager to get the code, click on Admin tab, and then Install Google Tag Manager.

Now we are ready to add the Facebook pixel in Google Tag Manager.

Note: In this example I’m using the new default Facebook pixel. Facebook recently changed over to a one general pixel (rather than using a custom pixel per each page that you need tracking on).

Step 4. Create a new Custom HTML tag

Google Tag Manager - New TagNow we are ready to add our Facebook pixel to Google Tag Manager, to do this we want to click “New Tag” in Google Tag Manager. You’ll find this in the GTM Dashboard for your container, which also includes details on what other tags you have published and even has a place where you can add notes about your tags and configuration. For example if you changed a tag to not fire on all of your web pages you can add an annotation about that change with the date. Annotations like these are very handy if sometime in the future you are trying to diagnose a problem.

Google Tag Manager provides ready made support for a variety of vendors (such as Crazy Egg), however too not surprisingly, we have to create a custom tag to add a Facebook pixel.

Custom HTML tag in Google Tag Manager

Step 5. Configure Your GTM Tag

Configure Facebook Pixel Tag

Now it’s time to paste in your Facebook pixel code into your tag. At least at this writing (Facebook changes its interface very often), you’ll find the Facebook pixel code in the Ads Manager under the “Tools” menu and then by clicking on “Pixels” and then selecting “View Pixel” in the “Actions” Drop down.

Although I don’t show it here, you’ll also get a chance to configure some rules for your new GTM tag on whether you want the Facebook pixel to fire on all your pages or a selection of pages. You can also customize the tag so that the code fires on a click rather than a page load.

Step 6: Publish

And finally don’t forget to click on the Red Publish button in the upper left to activate your tag.

For the next tag you want to add, the process is even simpler, you don’t have to repeat Step 1 – 3 again, just log into Google Tag Manager and create a new tag in your container starting with Step 4.

About the Author Kathy Alice

Kathy Alice Brown is a SEO expert specializing in Technical SEO and Content. In her spare time she loves to get outside.

Let’s Connect & I’ll Send You Your Ultimate 28 Point Page Performance Cheatsheet Instantly:

Leave a Comment:

1 comment
yasmin says December 4, 2018

Awesome write up – saved me a ton of time!!!

Thank you very much – really appreciate it.

Add Your Reply