A simple way to describe variables, is to think of them as buckets where you can store information. The type of data you want to store will dictate what variable you use. For instance, Google Tag Manager has a set of built-in variables to retrieve data like IDs, URLs, clicked texts and much more. Think of them as a shortcut to the most common variables so that you won’t have to create them each time you manage a new container.
You can also create your own variables, this can be especially useful if you are working with data layers (check the data layers beginner overview). Custom variables are handy because they can provide you with the data which can’t be accessed by Google Tag Manager.
Variables can be used to retrieve data at the tag level. For example, you want to know the texts on your website, which the user clicks on. There is a built-in variable for this called {{Click Text}}.
Since each variable can only retrieve a certain data type, you can’t use {{Click Text}} variable to get an ID of an element. You need to work with the variable {{Click ID}}.
They can be used as triggers to fire an event when the value of the variable meets the condition you set. Using our recent example, you can use the Click ID of an element, let’s say a button, to fire an event when the user clicks on it.
Custom variables add a whole other level of control to what data you can retrieve. There are quite efficient in retrieving the data if handled properly.
The data layer can be the most time-efficient way to get the data you are looking for, without wasting time trying to find CSS selectors to retrieve the information you want. The only downside is that you need to push the information you want into the data layer, which may require the intervention of a developer if you aren’t a technical person.
Let’s say you have a blog with multiple contributors, you might want to know the authors who drive the most engagement. This can be done by adding a parameter, let’s call it “blog_author_name”. This requires working with a developer as this variable will need to be pushed via a data layer.
Once this done, you can retrieve the author name by creating a data layer variable “blog_author_name” to access the name of the post author.
The custom JavaScript can help you return variables, and modify them, for example you can turn clicked text using the following variable:
Every custom JavaScript must start with expression function () {, and must include a return value (what you want to get from your website).
This custom variable is very handy when it comes to accessing variables that load on a page. Let’s say there is an <h1> title you want to retrieve from the website, but you don’t have access to a developer to push it to the data layer. Using the DOM variable, you can access the variable when the <h1> title loads on the page.
In most cases, you will rely on built-in variables. They will save a lot of time, and they don’t require special knowledge to set up. Getting more out of GTM will require some additional knowledge on how custom variables work and basic coding skills.