Inside This Post
How do we fire tags on non-pageview events?
Rob Strait posed a great question on my previous Facebook pixel post: What about the times where you don’t have a unique pageview to differentiate the situation where you want to fire your Facebook “conversion events”?
He’s exactly correct: in the real world, you don’t always have a nice confirmation page or thank you page that you can uniquely earmark to trigger the conversion event.
Maybe you have an AJAX-based form submission… or you want to fire a tag on an event that’s driven by a button-click (like add-to-cart).
Additionally, if your website is built with an SPA (Singe-Page-Architecture) framework, you might not have the ability to rely on URLs as actionable triggers.
Worse still, what if you work at a larger company with many developers, and you start relying heavily on the URL constructs?
Unless your organization has amazing coordination between marketers and developers, you will eventually run into an issue of URLs going missing or being renamed.
Plus, to Rob’s point: wouldn’t it be great to be able to fire your tags on any event?
This is actually not a limitation of Facebook’s tracking pixel (or any other tracking pixel for that matter).
All we need is a little jQuery or GTM to make it happen.
As you probably already know, I’m a huge proponent of GTM, so let’s use GTM and turn the rest of this blogpost into an “Event Lab”, where you can see some “event-based” tracking in action.
In this post, you’re going to learn how to fire Facebook events “onClick”. In part II of this mini-series, we’ll cover form submissions.
First, let’s be sure we understand what events are, and how we’re going to use them.
If you already have a basic understanding of jQuery and event-handling (or you just want to get right to the actionable walkthrough) click here to jump straight to our instructions on using GTM to set up your new onClick Facebook tag to capture “AddToCart” events.
What Are Events And How Are They Acted-Upon?
Before we start covering how to implement your “on-event” tracking, let’s talk briefly about what events are and how they can be acted-upon.
“Events” are basically the user’s interaction with the browser.
These interactions are usually driven by the user’s actions(clicks, form submits, hovers, input field changes, scrolls etc.).
Learning jQuery is a little beyond the scope of this article, but jQuery essentially works like this:
You designate the “target” element(s)
You specify the “event” you’re listening for.
You indicate what you want to happen after that event occurs.
Here’s an example:
In this case, when a “DOM Element” with the id attribute “keybutton” is clicked, I want to log a message to the console that says “button clicked”.
Note: the “DOM Elements” are simply the HTML elements that make up your webpage. Some examples are p (paragraphs), a (anchors), div, img, etc. The “attributes” are the parameters you set to style and describe the elements, like class, id, data-*, href, style, etc..
The real key to that whole statement is the bit right after the $ and inside the first set of parenthesis, The targeting. You’ll see why this is very important when we get to the Google Tag Manager implementation steps.
jQuery can be used to manipulate the way the page looks, create animations, send a data request (fire a tag) and more.
Ok, so what does this have to do with Google Tag Manager and firing Facebook events?
Let’s take a step back into the Wild West days of about 3-5 years ago.
Back in those days, when tag management systems were in their infancy, let’s say you, as a marketer, wanted to introduce some onClick tracking to a button-click.
You could go directly into the page-source and add your jQuery function, much like the one in our example above.
Or, you might create a file like ‘tracking.js’ which loaded with the page and contained all of your tracking in one place.
Ultimately, both of these methods are a major pain.
If you code directly in the page source, maintenance and upkeep are a nightmare.
Thus, we lean on the most clean and maintainable solution: the Tag Management System.
Google Tag Manager (and other TMSs) provide a nice UI and layer of abstraction that the marketer or developer can use to stay “off the page source”. This helps separate your tracking from your “functional” website code, which is great for testing / debugging, speed-to-market, and enhancing capabilities.
Now, we understand what events are and why we’re going to use GTM. Let’s get into specifically how GTM can be used to fire our “onClick” events.
Lab Demo 1: The “on-Click” Event
The most common situation where you might want to fire a tag on something other than a pageview would be an “on-Click” action..
So, let’s say for example that I have a CTA-button for “add-to-cart”.
This is common for a lot of e-commerce shops… I might click “add-to-cart”, but the page doesn’t change. The item is just added to my cart and I can continue on browsing the site at my leisure.
So, in order to fire a tag onClick of the button, we need to find an attribute of this button that makes it unique in the page source. Usually this will be a class, or even better, an ID.
If your button doesn’t have either of these, you might have to get creative with your attribute-targeting, or just get your developers to edit your product template to ensure all of the add-to-cart buttons have a consistent (and preferably unique) class or ID.
Let’s assume we can only work with the button “class” in our situation. So below, I have a button with class “add_to_cart”.
When someone clicks this button, I want to fire my Facebook “AddToCart” event and, if possible, pass in the ID of the product (we can also pass-in the name of the product through the content_name variable; it’s completely optional, but good to have for the sake of the person who has to later create the audience from this event).
A Note: in order to run Dynamic Product Ads on Facebook (mainly for the eCommerce stores out there), you must specify the content_ids variable and the content_type variable for the AddToCart, Purchase and ViewContent events. If you don’t care about Dynamic product ads, these parameters are optional. I recommend at least including content_name so that you can better segment your audiences.
In GTM, we need to perform the following steps to get our tag to work properly:
- Create a variable that captures the class of the element that is clicked
- Check the value of the class against our targeted value of “add_to_cart”
- Tell GTM where to “listen” for this event occurring (not 100% mandatory, but good practice).
- Set up our Facebook event tag (optionally set it to capture the product ID / product name from the dataLayer or page-scraping)
- Trigger the tag to fire when our conditions are met
First, here’s our button. You can inspect it in your browser to see that we have the class applied (in Chrome, right click on the button, choose “Inspect Element”).
Go ahead and click it… I’ve set up the ‘AddToCart’ event to fire and you won’t be redirected away from the page.
Here’s what you see for the element in your inspection:
… and yes, since I have set this button up to fire the “AddToCart” event, so when you click it, I am adding you to an audience in Facebook (we’ll cover how to set-up the audience in just a bit).
now, here’s how we’ll do this in Google Tag Manager.
First, let’s ensure that we capture element classes in a variable in GTM. A full explanation of Variables in GTM is a bit beyond the scope of this post (if you want to learn GTM, I have an upcoming guide / primer as part of my “Advertising Launchpad” Course.. due out Dec. 2015), but the short explanation is Variables contain an often-needed value that you might want to grab in several different situations.
If you want to learn more about variables in GTM right now, check out this post from Simo Ahava. It’s very detailed, but Simo is one of the greatest GTM operators and teachers in the world.
In our case, we’re looking to store the “classes” of any element that is clicked in a variable.
Fortunately for us, GTM provides a lot of common variables “out-of-the-box”, and “Click Classes” is one of them.
To activate this “auto-variable” in your GTM instance, go to “Variables” and you’ll see a section called “Enabled Built-In Variables”.
Check the box next to “Click Classes”.
you’ll see that you also have an option for “Click ID”. You might as well go ahead and enable that one too.
Next, let’s start creating our tag.
In GTM, go to “Tags”, then click “New”.
We need to name our new tag. I try to put the technology (Facebook in this case) first, followed by a short description of what we’re doing.
I’ll call this tag “Facebook – AddToCart – onClick”
In the next section (“Choose Product”), click “Custom HTML Tag”.
Here’s what we have so far:
Click “Continue” and you’ll be staring at a blank code-editing screen (you will grow to love the blank code editing screen. don’t fear it.)
Here’s our code we’re going to use.. note that I’m working under the assumption that you already have the new Facebook Custom Audience pixel (now called “the Facebook Pixel”) set to fire on all your pages.
Now, I’ve “hard-coded” in the values for content_ids, content_name and content_type. If you’re installing this on your ecommerce site, you’d want to grab those dynamically (in my upcoming “Advertising Launchpad” course, we’ll cover how to do this in Shopify and WooCommerce).
Either way, let’s put this code into the code editor box in GTM and keep moving.
Do not click “Support document.write”. We don’t need it for this tag.
Before you click “Continue”, click the little arrow that says “Advanced Setting” and let’s change the “Tag Firing Options” to be “Once per page”. You can leave the rest of the options in this section as-is.
Here’s what we have so far now:
Click “Continue” and now we’re in the “Fire On” settings.
Here’s where things can get a little confusing, so stick with me here.
We’re going to choose “Click” from the list of options.
In the modal window that appears, we’re going to click “New” to setup a new trigger.
Remember that “Triggers” control WHEN the tag will fire.
Let’s call our Trigger “onClick – AddToCart – Class”.
In the “Configure Trigger” settings, you can leave the setting as “All Elements”, but I would recommend changing it to “Just Links”.
The next two options that appear (“Wait For Tags” and “Check Validation”) are mainly for form submissions or when the targeted button will change the page. They’re designed to be sure that the tags have time to fire and that the action doesn’t get cancelled by some other code on your page. Let’s leave both unchecked for now.
Click “Continue” and now we have to set our “Fire On” rules. Select “Some Clicks”.
A new field appears, and this is where we’re going to use the “Variable” we enabled earlier (“Click Classes”).
In the first dropdown, select “Click Classes”, then the next dropdown select “contains”, and then in the last field (text entry), put in “add_to_cart” (or whatever your class is that you’re using to identify your button).
Note that if you’re using the element ID to identify your button, you’ll want to select “Click ID” in the first dropdown.
Here’s what we have now:
Click “Create Trigger” and we’re now ready to click “Create Tag” and start testing it out!
Testing Our Implementation
Now that we’ve created our tag, let’s be sure it works before we publish it live.
In the upper-right corner of your GTM screen, click the dropdown arrow next to “Publish” and select “Preview And Debug” -> “Preview”.
This will activate your newly created tag (but only on your current browser) and give you the GTM debugging window when you visit your site.
In a new tab (same browser.. preferably Chrome), Navigate to a page on your website that has the button you’re trying to use to fire your tag.
You should see the Google Tag Manager “Debug Window” at the bottom of your browser.
Before we go any further, right-click somewhere in the actual page and choose “Inspect Element” to bring up Chrome Developer Tools.
Navigate to the “Network” tab of this window and enter “facebook” into the filter bar.
Now, go back to your actual webpage and let’s try clicking our button to see if our tag fires.
Click your button and watch the left-hand sidebar of the GTM debug window. A new “event” should appear after you click the button called “gtm.linkClick”.
Click that event in the sidebar and it should tell you which tags were fired (and not fired) on the click event. You should see our Facebook tag that we just created in the “Tags Fired On This Event” section (see below)
Great! so the tag is firing.
Now let’s insure that Facebook is getting our data.
Go back to your Chrome Developer Tools window (where we selected the Network tab a few moments ago), and look for a request that has the parameter ev=AddToCart (or whatever your event is that you’re sending to Facebook).
Click that request and a new pane will appear with details on the request. Under the “Headers” tab, scroll down until you see a section called “Query String Parameters”.
You should see your ev: AddToCart, cd[content_ids]: [“abc123”], cd[content_name], etc. with the appropriate values.
Ok, so it looks like everything is working as expected!
If you’re happy with the results, go back to GTM and click “Publish” to make your new changes live on your site!
Setting Up Your Custom Audience for Your New Event
Now that we’re sending this event data to Facebook, let’s build an audience in our Ad Manager so that we can deliver ads to the people who clicked our button!
Go to your Facebook Ad Manager and under the “Tools” tab, select “Pixels”.
Now, if you just ran through our little test, you should be able to navigate to the “Events” tab below the chart, and see your new event is “Active” and collecting data!
If you don’t see your event yet, don’t sweat it. Sometimes it takes Facebook some time to catch-up and re-sync your pixel activity.
Now let’s build our audience.
Click “Create Audience” just above the chart on the Pixels screen.
On the “Website Traffic” dropdown, change it to “Custom Combination”.
In the “Include” section, change the first dropdown from “URL” to “Event”.
Choose “AddToCart” (or whatever event you’re using) from the field below that.
Now, you have the option to filter this audience even further by the value of one of the parameters you set.
For me, I’m going to create an audience who clicked that button on this particular blog post, and if you recall, we set a parameter called “content_name” to “facebookeventpostclick”. So, I’m going to select “content_name” “equals” “facebookeventpostclick”.
Note: if you want to exclude purchasers, you can do-so by clicking “Add Exclusions” and adding your purchase event (with appropriate parameter qualifiers).
Here’s what we have now:
Click “Create Audience”, and you’re the proud new owner of an “Expert Level” Facebook Custom Audience!
Hopefully this post helps you set up your onClick events and you don’t leave here more confused than when you started reading :).
Besides “AddToCart”, what other use-cases can you think of for the onClick event?
Remember that we aren’t limited to Facebook’s nine “Standard Events”.
Another awesome use-case for this method is to fire a “Custom Facebook Event” when someone shares a product or post on your site!
Let’s say we’re selling a laser cannon on our site… when a user clicks the “Share” button, we might fire an event like this:
Then, we could create an audience of people who have shared the product, but haven’t yet purchased it. We might serve them an ad with a special “Thanks For Sharing” discount code.
Get creative with you audiences and you can surprise your loyal fans with some really unique / valuable ads!
In part II of this mini-series, we’ll cover how to fire Facebook events on form submits.
This is useful for opt-in forms, surveys, etc. where you don’t change the page on form submission (you use AJAX or some other method to keep the user on the same page).
This technique is also useful if you want to send some of the form data into Facebook for segmentation.
For example, if you have a form field where the user selects their “Job” from a dropdown, you can capture their selection and send it to Facebook as a parameter to your lead event.
Then, you can later segment your audiences based on their selection (better segmentation is beautiful thing).
If you haven’t checked out my FB Pixel Implementation Guide, you can click here to grab it (edit May 2018: version 2 will be available soon, and it’s fully updated / more robust). It’s free / pay-what-you-want, and I’m actually in the process of adding more content to it right now.
Inside I have video walk-throughs of setting up the base FB pixel with Google Tag Manager, along with a cheat-sheet and videos on how to set up a few of the most common Facebook events.
Please let me know of any questions / comments below, and congrats on making it all the way through this long, dry post :).