There are times when you’d like to take some actions but at specific times. This is when Event Variables become handy. This post will explain how to use Event Variables to achieve that.
We are going to take a look at and learn how to use 2 event variables that are in Google Tag Manager: the auto-event variable and the custom event variable.
We are going to talk about two variables. One that you don’t need and another that is definitely more important.
You might be wondering why should we spend time on variables that we probably won’t use that often. The truth is that It’s one of those subjects that you should still know about even if its applications are limited. The other variable however happens to be very useful.
This is a variable you don’t need because GTM by default already has variables that do the same job automatically.
Let’s say that i’m using a Custom Variable:
Go to User-Defined Variables >> Custom Event
Note : you’ll noticed that there is no configuration for this one.
Name it and go to your preview mode and web page.
You’ll see that we have default event variables that do the job already (in orange) just like this Custom Variable (in green):
Learning about this variable is simply to remember that we won’t need it. For now, there’s no use cases where it could be meaningful.
Auto Event Variable
In the auto-event variable, below you’ll see an area called “variable type“. You’ll have a selection list with the following options: element, element type, element attribute, element classes, element ID, element target, element text, element URL, and multiple history elements. If these seem not unknown to you you’re absolutely right. This is because they exist and are GTM’s built-ins with the exception of one.
For example, let’s say we wanted to create a Click Trigger that fires only when you click on an “add-to-cart” button for a product.
I’ll use one of my dummy product and I’d like to set up a click as a trigger. What it means is that when someone clicks on that button it will “fire” add to cart.
For now, I can see the details around this button.
To see these details you can do the following:
CTRL + LEFT MOUSE CLICK
Then hover over the button and do right-click > inspect and go-to elements.
We’ll see different details about it.
We can also see what GTM sees about this “add to cart” button by going to gtm.click (in the left event panel), select the “variables” tab.
GTM captures attributes like your right-click >> inspect does.
But sometimes GTM doesn’t capture all of them.
For example, you see the attributes below in the image?
We have type, name, value, class.
GTM doesn’t have the name attribute.
But it has others like class, text etc:
So its really easy to set up:
Rename it : AEV – Name
Now refresh everything
Got your web page, and on your product “add to cart” button do CTRL + CLICK
And check this :
So now, what I can do is to set a rule that says when this variable (AEV – name) equals “add-to-cart” or when it contains “add-to-cart” (or any other rule I decided to set up around the “AEV – name” variable) we want it to add a click, then add to cart. There are options, like a data layer push for enhanced e-commerce that then reports it to Google Analytics of Facebook. The point is this is how you can take this information.
On the other hand, auto-event variables are variables you will not use frequently. However, when you do it will be to extract an attribute that is not being tracked. So value for example here will be the attribute. The name is the attribute in this case. “Type” is also an attribute you could get if you wanted to. You also have class. So all the ones we’re familiar with are already there.
But you can already execute what you want with what is already available to you in GTM. So before creating any additional variables, make sure to see what is already there in Google Tag Manager. What I mean is the information that GTM shows in the preview mode for variables at a certain point in time when you want something to happen (in the left event pannel). If GTM can’t see anything, if it’s not showing the details you’re looking for then you can proceed to add a variable to give you this visibility.
In our case, this was to use the name attribute so you could see more details coming under “Variables” in GTM. So we used the name attribute that you see in the “Elements” section.
And you’d see the values for the name attribute (which is “add-to-cart“) appear here in GTM:
Finally, we have looked at the auto-event and the custom event variables. Don’t forget that you certainly won’t be using custom event since you already have built-in variables that do the exact same job.
Most of the auto-event variations are built-ins too except for anything that is customized and distinct to your setup. This will be an attribute that you and you can use the auto-event element attribute to extract its information when needed.
Here are the top of the food chain resources from Simo Ahava. There is Simo’s variable guide for Google Tag Manager that is always updated. This is an awesome guide detailing all the different variables.
As Chris Mercer puts it:
Half of this tool is just knowing what’s possible.Chris Mercer
This is important to remember because it doesn’t suggest that you should be all-knowing about each facet of GTM, but knowing what is possible is already a step closer to what you could do in the future. You then have an understanding of how GTM operates which can prepare you to address a situation like the one we’ve covered today whereby there’s a custom attribute. Then you might think of custom event, and in this scenario, it’ll be easier and faster for you to search through your resources like this post to find your solution.
Simo also has a guide on tracking form engagement that you should read.
Now what’s left for you to do is to practice and use your dev tools because you probably noticed that we used it multiple times for this post.
Right-click and inspect, look at the attributes that are available and find one that may be useful to you and that you can use to pull in details from. The auto-event variable connected to the “Elements” attribute will help you pull it in into GTM.
Remember to first make sure to verify if your variables that are already in GTM have the value you need. This may require a discussion with your developer who can help you with this matter.