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 image to expand):
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!