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.
There 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.
Go 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.
Next 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.
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.
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.
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).
Now 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.
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.
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.
Kathy Alice Brown is a SEO expert specializing in Technical SEO and Content. In her spare time she loves to get outside.