Ultimate Guide to Setup Facebook Pixel with Google Tag Manager
Do you ever wonder how Facebook ads target content you’ve been recently looking at online?
For example, I was checking out this one great blogging course, lets call it “Blogging Strategies to Succeed” I just made that up, so if it really exists that is just a coincidence. After checking out the course info, you take some time to decide and you go surfing around on Facebook. You notice sponsored ads by “Blogging Strategies to Succeed” coming up, all tailored to you.
This is the Facebook pixel. It works well in converting one time visitors into regular traffic.
So how exactly do you setup the Facebook pixel? On our first site it literally took me hours to get the Facebook Pixel to work with Google Tag Manager. But, just now, I set it up in under 10 minutes.
You will need to have a
We will be jumping around between Facebook Ad Manager, Google Tag Manager and your WordPress theme files. Please bear with me, it may seem confusing at first, but in the end it should all make sense.
If you don’t know how to edit your theme files, see this post.
**Make sure to take a backup of your website before you start** Instructions to backup with UpdraftPlus
I put together a video tutorial for this post here.
Open the Facebook Ads Manager
Login to the Facebook Ad Manager.
Click the menu and select Pixels
Click the Setup Pixel button.
Click Manually install Pixel code yourself
*Keep this Window open and open a new Tab in your Browser*
Add the Pixel Code to your Header.php file
Again, if you don’t know how to edit your theme files, see this post.
Before adding the code
*Keep this tab open, go back to the Facebook Ads Manager Tab to copy the Pixel Code*
Click in the second box to copy your Pixel Code.
Your code will look something like this, make sure to enter your own ID below.
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'XXXXXXXXXXXXXXXX');
fbq('track', 'PageView');
</script>
<!-- Remove the Facebook Pixel <noscript> code and tags, this will be done instead in Google Tag Manager. -->
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<!-- Google Tag Manager Code -->
...
<!-- End Google Tag Manager Code -->
<?php wp_head(); ?>
</head>
Paste the Pixel code before the <!-- Google Tag Manager --> code, which should also be before the <?php wp_head(); ?> on the header.php file
Remove the Facebook Pixel <noscript> code and tags from the header.php file, this will be added instead in Google Tag Manager.
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
After adding the Facebook Pixel code
Your theme header file will look something like this.
Click Update File button below the Theme Editor.
*Keep this Tab open, and open a new Tab for Google Tag Manager*
Jump to the next step setting up Google Tag Manager
Adding the Facebook Pixel code via Header/Footer Plugin
If you installed the Facebook Pixel to your theme header.php file, then jump to the next step setting up Google Tag Manager
If you do not already have a header/footer plugin installed, I recommend to install the Header Footer Code Manager from here.
Once installed, click on HFCM on the WordPress menu.
Click the Add New Snippet button.
Enter the following information to setup the snippet, and click save.
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'XXXXXXXXXXXXXXXX');
fbq('track', 'PageView');
</script>
You will notice that I left out the <noscript> tags and code, since this will be added through Google Tag Manager.
Configure Google Tag Manager for Facebook Pixel
This tutorial assumes you are already using Google Tag Manager and have your account setup.
Login to Google Tag Manager
Click on your Google Tag Manager Account
Click on your Workspace
Create a new GTM Variable.
Click on the Variables Menu item.
Click to add a new Variable
Click the lego looking item and select Constant from the menu.
*Keep this tab open Jump back to the header.php file in the other browser tab.*
You will see your Pixel code on this line.
Copy your code to paste into the Constant Variable.
*Keep this tab open Jump back to the Google Tag Manager tab.*
Paste Your Facebook Pixel code here, then click the Save button.
Click to create a new variable again, this time select the Custom Javascript variable.
Enter this code, click the Save button
return true;
}
Next click on the Tags Menu item
Create a new Custom Image Tag.
Enter the following as the custom image.
Add your triggers.
For our triggers we have the following set.
Trigger 1: Any page loading with no cookie set
Trigger 2: Any page loading with Analytics & Marketing Cookies enabled
Trigger 3: Any page loading with no cookie set and Javascript is disabled
Trigger 4: Any page loading with Analytics & Marketing Cookies enabled and Javascript is disabled
Note – the cookie triggers are specific to my Google Tag Manager setup, you likely will not have the cookieconsent variable, but you may have something similar.
You click the Plus Symbol to add triggers, (to remove triggers, click the minus sign on the trigger.)
You will see a list of existing triggers, or you can add a new one. If you also use Google Tag Manager for cookie control, then set your triggers similar to mine.
Trigger 1: Any page loading with no cookie set
Trigger 2: Any page loading with Analytics & Marketing Cookies enabled
Trigger 3: Any page loading with no cookie set and Javascript is disabled
Trigger 4: Any page loading with Analytics & Marketing Cookies enabled and Javascript is disabled
If you are not using Google Tag Manager for Cookie control, you can create and use the following trigger.
I plan to have a future post on setting up Google Tag Manager for Cookie Control on your site.
Now Google Tag Manager is setup, you need to TEST
Click the Preview Button at the top right of the screen.
If you are using Chrome, open a new tab and install the Facebook Pixel Helper Chrome Extension.
Once installed, open your website, remember you are in Google Tag Manager “Preview” Mode, so there will be a Google Tag Manager info at the bottom of the page.
When your site opens, click on the Facebook Pixel Helper, if you don’t see it, click on the menu, and then click on the Facebook Pixel Helper.
If you see the green checkmark by Pageviews, then the Pixel is installed correctly.
Go back to the Google Tag Manager tab, and click to Leave Preview Mode and then Submit your changes.
Give it a name like added Facebook Pixel.
Refresh your website and confirm again that the Facebook Pixel still shows the green checkmark with Google Tag Manager in live mode.
You can go to the Facebook tab that we have open, click the Continue button.
For our site, we just setup the Pageviews, but if you want to count more than just Pageviews with your Facebook Pixel, then on the next screen, click Manually install event code
From here you have all sorts of options to setup the Event codes.
Add the event codes on the specific posts that you want the events to be tracked.
So for example if you have a landing page for subscriptions, add the following code to that page.
fbq('track', 'Subscribe');
</script>
Click Test Event Setup button.
Enter your website in the field provided, click to test your site.
Close your page that opens, and go back to the Facebook Pixel Tab.
You will see the Test results.
If that comes back as “Receiving Activity” then you are done. You can close out of the Windows we had open.
If you run into trouble and need help with this, check out my Services Page and we can arrange a time for me to assist you.
