GTM + WooCommerce + Facebook Pixel!
Post Contents
Tracking Facebook Pixel Conversions In WooCommerce With Google Tag Manager
It’s easy to think that conversions are best tracked in Google Analytics. After all, we can see all of our sales by channel, campaign, and even ads that were clicked.
However, the power of Facebook Granular Advertising is unmatched by any other marketing platform, and to truly capitalize on it, you need this data right inside of Facebook.
There are lots of Plugins that will directly integrate your Facebook Pixel with WooCommerce.
However, the advantages of having full control over your data inside of Google Tag Manager and the stability of a manual installation is worth the extra upfront effort.
Google Tag Manager Integration - GTM4WP
I typically try to avoid plugins as much as possible, however, the GTM4WP plugin to install Google Tag Manager onto WordPress sites is extremely sophisticated and does a fantastic job creating the necessary data layer which is required for all the Google Tag Manager magic to happen.
Without this plugin, you would need to create the custom javascript to create a data layer, and the logic to pass different elements from WordPress, WooCommerce, or any other services into GTM.
One Disadvantage
Facebook Pixels and Google Tag Manager work based on JavaScript. If your user has disabled JavaScript, GTM as well as the FB Pixel contain a “NoScript” code.
“NoScript” code will still run without javascript, but it is not able to do much.
GTM4WP requires javascript in order to function.
Therefore, If javascript is disabled in a browser, GTM4WP will not run, which means it will not be able to use the “NoScript” version of GTM.
It’s kind of like leaving a key under the mat but inside the locked house.
You could of course add this bit of “NoScript” code manually to your site, but in almost all cases, if a user is browsing your website without javascript enabled, nothing on your site is going to work well anyway.
For this reason, we’re going to leave out the NoScript tags from our code.
Elements of Google Tag Manager
Google Tag Manager is made up of three primary pieces, Tags, Triggers, and Variables. These three pieces create a sequence of events;
1. A Tag (script) is available to be fired (ran) on a page.
2. A Trigger activates the script, utilizes any variables necessary, and fires (runs) the script on the page.
3. Variables (if used) will be available to be used inside the script at the time the trigger is activated.
Tags
Tags are any script that you want to run on your website at some specific time or times based on specific events.
For instance, you will probably have a script that sends information to Google Analytics telling it that a user was here. You would typically want this script to run on every page, right away.
You may also have scripts to tell Google Analytics that the user did something, like added a product to their cart, or downloaded a PDF file. For these scripts, you want them to lay dormant, not running until the user actually did that thing.
To sum it up, a Tag is just a script, that will be displayed on your website, but by itself, it will not run or do anything until some action tells it to via a Trigger.
Triggers
Triggers are conditions that cause a tag to fire a script. These can be nearly anything a person can do on a website including; viewing the page, clicking a link or a button, scrolling down the page, staying on the page for some duration of time, or just about any other custom action you would like to define as a trigger.
The most common trigger is the pageView, which means that anytime a page is viewed a tag with a Trigger of PageView, will run that script.
When we want to send more detailed information, we want our Triggers to activate our different scripts based upon more complex actions such as those mentioned above.
Variable
Variables can be used in a couple of different ways, statically and dynamically. Statically simply allows you to create a variable for a string of text or numbers that you will commonly re-use. This is helpful if you have to repeatedly type in something like your Google Analytics Code, or Facebook Pixel, you could just set a variable to GACode or FBPixel, and GTM will know to use your actual contents, rather than the word GACode or FBPixel, etc.
The more powerful use is to designate dynamic information that the website creates, and Google Tag Manager reads to translate that into data back to Facebook or GA or wherever.
A primary example of this would be the value of an e-commerce order. In order to send that dollar amount back to Google Analytics or to Facebook, it has to be put into static code.
However, we are not able to write the code today, with the value of an order tomorrow, because we have no idea what they will buy?
We will use a Variable as a placeholder that will look into each order value field (or whatever field you’re looking for) grab the contents of that field on a per order basis, and send that information back on an order by order basis.
Elements of the Facebook Pixel
By itself, the FB pixel can be used to record individuals who have visited your site, much like Google Analytics.
The default Facebook pixel and functionality are called your Base Pixel.
If you just install the Base Pixel on a site, it will be available to be used to mark any events you like. The simplest version of this is a simple pageView.
Firing the Base Pixel and recording a page view is useful if you just want to put a person on a remarketing list, or into a custom audience, but it doesn’t really give you any of the gold, or… additional details.
To get the true value from Facebook pixels, it is necessary to set up events that correspond to things that you want to track, like purchases, downloads, submissions, or video views, etc.
The beauty of installing the pixel through Google Tag Manager is we have complete control to determine what type of action(Trigger) will cause GTM to run a script (Tag). We can use any of the default Triggers, or, create our own.
In this example, we are going to create four separate events; PageView, Five seconds on a page, Add To Cart, and Purchase.
We will be able to use these events in Facebook to do things like creating custom audiences of people who have purchased, purchased 3 times, spent over $500, added items to their cart but did not purchase.
With the information we get from the FB pixel, we can set up personalized email messages, campaigns, or even remarketing product ads.
Creating the Base Pixel Sequence.
Every GTM sequence starts with a Tag. Every FB Pixel starts with the Base Pixel Tag.
We will create our new Tag and give it a name. I like to use a naming convention that describes what my item is for, a description, and then what it is. So for the Base Pixel Tag, I would name it FB – Base Pixel Tag.
I find naming Tag, Triggers, and Variables with Tag, Trigger, and Var in the titles makes it easier to read and understand what’s going on.
Inside our First Tag, we will put the basic script that you will see on any typical Facebook pixel install for the Facebook script with a couple of changes which I’ll talk about in a minute.
Since we’re customizing this, we’re going to add all of our custom tags as “Custom HTML” tags instead of a pre-determined tag type.
Inside the Custom HTML tag, I would put the following:
Finally, I also removed the typical addition of the pageView event you see in most installations. We will add that as a separate Tag for better control and reduce possibilities for errors.
What this tag does, is initialize the Facebook pixel on every page of your site. This is now available to be shown on the website, however, it is not shown until we give it a trigger.
<!– End Facebook Pixel Code –>
<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', '{{Facebook Pixel Variable}}');
</script>
<!– End Facebook Pixel Code –>
The Changes
First, the typical Script directly from Facebook:
<!-- Facebook Pixel Code -->
<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', '{your-pixel-id-goes-here}');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
1. In the example I used above (in black not orange), I’m using a custom variable named “Facebook Pixel Variable” instead of the current: {your-pixel-id-goes-here} that is listed in the general Facebook example.
The Variable contains my actual FB pixel code.
This step is really optional. In this case, since this string never changes, I could have just used the actual pixel code itself instead of a variable.
Had I used the actual pixel, that section of the script above would have looked something like this:
Finally, I also removed the typical addition of the pageView event you see in most installations. We will add that as a separate Tag for better control and reduce possibilities for errors.
What this tag does, is initialize the Facebook pixel on every page of your site. This is now available to be shown on the website, however, it is not shown until we give it a trigger.
‘https://connect.facebook.net/en_US/fbevents.js’);
fbq(‘init’, ‘2111234567890’);
instead of what I’m using which was:
‘https://connect.facebook.net/en_US/fbevents.js’);
fbq(‘init’, ‘{{Facebook Pixel Variable}}’);
Notice that variables are always surrounded by two Curly Brackets.
2. Your typical Facebook script looks like the orange script above.
We already talked about optionally using your Facebook pixel or a variable for your Facebook pixel as a placeholder instead of the current: {your-pixel-id-goes-here} that is listed in the general Facebook example.
The next thing we’re going to do is remove the entire noscript section.
We don’t really have to, but it’s not going to work anyway. As we mentioned, that section is for people who do not have JavaScript enabled, but since we’re using JavaScript to display GTM, it’s not even going to show so might as well remove it.
3. The last change we are going to make is to remove the fbq(‘track’, ‘PageView’);
The reason we are going to remove this is that we are going to fire that in its own tag. Without doing that, you can cause issues with the order that tags fire, specifically if you have multiple tags on the page.
Finally
The last thing we have to do is just tell GTM when it should fire this script. Easy Enough.
We want this to fire on every page of the site.
When all is said and done, your first Tag with trigger should look very similar to this:
Creating the PageView Event Tag.
In most basic installs, the track page view code is included in the script above. This is not actually the best way to do this because we want to control when and how often all of our events happen, and they will happen based on different conditions.
For that reason, every time we fire a tracking code, including the page views, we will do it with a separate tag.
For the first most basic tag, we will again create a new tag with a Custom HTML tag.
We will name it something like FB – Pixel PageView Tag.
For this tag we are going to include the basic script:
<script>
fbq('track', 'PageView');
</script>
For our Trigger we’re going to use PageView – All Pages.
What we’ve done so far is activated our Facebook pixel on all pages, then in our second tag, we specifically tell the pixel to track this page view in our data.
Your final Pageview tag should look like this.
Standard Facebook Events
Facebook comes pre-defined with several types of events. These are called “Standard Events”. these are common events that are frequently used like; contact, search, subscribe, and viewContent. The full list of standard events can be found here:
https://developers.facebook.com/docs/facebook-pixel/reference
Many of these events support additional data other than just tracking that it was fired, for instance, the purchase event allows you to send details about the actual sale.
Creating Custom Events
Along with the standard events, Facebook pixel allows us to create custom events. Let’s say we want to track users who have been on our site for at least 5 seconds.
We will start off with our basic GTM Custom HTML Tag again.
Let’s name it; FB – Pixel 5sec Tag.
The script for this will be very similar to the PageView Script except we will give it our own made-up name, 5 seconds.
<script>
fbq('track', '5 seconds');
</script>
We’ve now created a script that will track an event called “5 seconds”.
Again, this won’t do anything until we give it a trigger and the trigger is activated.
If we triggered this to happen at PageView, we would get a 5 seconds event on every page no matter how long they were on the page. If we triggered this to happen after the person was on the page for 30 seconds, our 5-second event would only show up for people that were on the page for 30 seconds, and if we triggered this only to fire when someone clicks a button, that would be the only time we would see the event.
So, for simplicity’s sake, since we’ve named our event 5 seconds, let’s trigger this to fire after the user has been on the page for 5 seconds.
For our trigger, we are going to create a new trigger, and name it something like 5-second Trigger. For the trigger type, we’re going to choose “Timer”.
For the interval, we are going to set it to 5000 milliseconds (5 seconds), then we will set our limit to 1 so it doesn’t fire every 5 seconds,
Our Final 5 Second Tag will look like this:
Creating The Add To Cart Tag
The Add To Cart Tag is a pre-defined standard event so that the tag will be easy.
<script>
fbq('track', 'add to cart');
</script>
The tricky part about the Add To Cart sequence is not the script but instead, the Trigger. We need this to fire when the user adds an item to their cart, specifically when they click the add to cart button.
We’re going to make a new Trigger give it a name like addToCart Trigger. This time, we are going to choose the trigger type, “Click – All Elements”.
But, …. we don’t actually want this to fire when anything is clicked. In this case we only want it to fire when the add to cart button is clicked.
So… we’re going to add a condition.
We could have this trigger fire based on class, page URL, or even the button text (click text) by telling it to fire only when that situation is true.
For this example, we will have it fire when the user clicks > some clicks > Click Text > equals > ADD TO CART.
Finally, our final TAG should look like this.
Creating The Purchase Tag with Data
Now comes the final Tag hurdle. The purchase icon has several pieces of data it “can” hold and communicate back to your reports. More importantly, it has two pieces of data that are required.
Those two values are currency and value.
If you are only using one form of currency, you can actually hard code currency. In our case we went ahead and just put in “USD’ for U.S. Dollars.
For the value, that number will always change so we will have to use a dynamic variable.
Our Tag script will look like this:
<script>
fbq(‘track’, ‘Purchase’,{
value: {{FB Purchase Value Var}},
currency: ‘USD’,
});
</script>
The variable we used here is called FB Purchase Value Var. FB Purchase Value Var is just the name I decided to give it, you can make up whatever you like that fits your naming convention to make it easy for you.
The Variable
For the variable, we are going to create a new user-defined variable. Give it a name and then choose the Page Variable type “Data Layer Variable”.
Now it’s going to ask you for the Data Layer Variable Name. Here is where it can get a little tricky.
Depending on the version of WordPress and WooCommerce that you’re currently using, this variable name is usually orderData.totals.total so that’s what you would put into as your Data Layer Variable Name.
For Data Layer Version, at this time Version 2 is the appropriate setting.
If this is not working you will need to troubleshoot to see what the name of the variable is that’s getting passed in the Data Layer.
If it’s an older version, you may need to use transactionTotal instead of orderData.totals.total, and you may have to set it to Version 1.
The Trigger
The trigger to make all this happen seems pretty simple. We’re going to use our old standby pageView but with a qualifier.
Create a new Trigger named something like FB – Purchase Trigger. For the Trigger Type, select Page View, then choose “Some Page Views”. Now we’re going to change this to Page URL contains order-received.
At the time of this writing, The order-received URL is only available after purchase.
The final Purchase Tag should look like this:
Troubleshooting and verifying everything is awesome.
Facebook Pixel Helper
If you’re going to be working with, or even verifying facebook pixels, the Facebook Pixel Helper is a critical tool. This will allow you to see what pixels were fired on a page when they were fired and what if any variables or data was passed with them. if you don’t have this installed yet, do it now!
Smart Tag Assistant
Google Tag Manager has one of the coolest ways to check your work, which is almost cathartic after you’ve struggled to get all your Tags set up!
Once you’ve created your Tags, Set up all your Triggers and Variables it’s time to see if it’s all working properly.
From the main Google Tag Manager Dashboard, you will see a Preview button in the top right-hand corner. The Preview button will launch the Smart Tag Assistant.
When you click Start and then Continue, it will launch your website in another tab.
Your current tab will still be open. If you have two monitors, I highly suggest separating these tabs into different screens so you can see the Smart Assistant and the test page at the same time.
On your Smart Tag Assistant page, you will see all of your tags on the right side of the page in the Summary section.
The Tags will be in two rows, the top row of Tags has been fired, the bottom row is waiting to be triggered.
If you’ve set up your Tags like this walkthrough, the pageView, and basePixel tags should move to the top immediately. If you watch for 5 seconds, you should see your 5-second tag jump from the bottom tags not fired to the top Tags Fired Section.
If you proceed through your site, you should see the Add To Cart Tag jump to the top when you put something in your cart.
Finally, if you put through a test transaction on the order confirmation page with order-received in the URL you should see the last Tag jump to the top.
Final Thoughts
This is going to be one of those tutorials that I will always come back to reference when I’m installing a new WooCommerce implementation with Facebook Tracking.
If you are having any trouble with this implementation, or questions, or even better,… suggestions, please comment below!
