Top 10 Google Tag Manager Variables

In this guide, I’ll be going over my top 10 Google Tag Manager variables and give you a brief overview of each one.

I won’t get too much into how each variable actually works but I will go into some of the ways you can use them in GTM.

What are Google Tag Manager Variables?

Variables are like placeholders within Google Tag Manager that let you fill your tags, triggers, and other variables with this placeholder information. These variables get resolved during the page load and can hold different values.

The Top 10 GTM variables are:

  1. Data Layer Variable
  2. Auto-Event Variable
  3. Constant Variable
  4. Google Analytics Settings Variable
  5. Refer URL Variable
  6. 1st Party Cookie Variable
  7. DOM Element Variable
  8. Lookup Table Variable
  9. Regex Lookup Table Variable
  10. Custom JavaScript Variable

1. Data Layer Variable

The first variable is the Data Layer Variable. If you have a Data Layer already set up on your page, you’ll be able to pull out the data stored in the value of Data Layer and transfer it to a Data Layer Variable as shown in the visitorType example below:

Screenshot of Google Tag Manager showing the Data Layer value of visitorType

Once you have set up your Data Layer Variable, you will see it under Variables.

Screenshot of Google Tag Manager showing the value of  visitorType upon transferring  to the DataLayer Variable.

How to Set Up a Data Layer Variable?

To set up your Data Layer Variable, simply go over to Google Tag Manager and on the variables panel, create a new variable of the type Data Layer Variables. In this case, we want to pull out the value of our visitor logged out and store it in a Data Layer Variable. 

Screenshot of Google Tag Manager showing a variable of the Data Layer type

To do this, simply enter the key into the Data Layer Variable Name field and you’ll be able to then pull this out of the Data Layer and store it in a variable.

Screenshot of Google Tag Manager showing visitorType as the key in the Data Layer variable

Once done, you will see that you’ve successfully set up the visitorType Data Layer Variable.

Screenshot of Google Tag Manager showing the setup of visitorType DataLayer Variable.

There are a few other tricks to this Data Layer Variable. You can check it out here: 

2. Auto-Event Variable

If you don’t see auto-event triggers available in this list – for example, the Click Trigger – then you need to enable all your auto-event tracking variables before moving forward.

Screenshot of Google Tag Manager showing different trigger types.

How to Enable Auto-Event Variables?

To enable Auto-Event Variables, go over to your variable menu and Configure your built-in variables. 

Screenshot of Google Tag Manager showing the variable menu and the configure button.

Here you will find certain Auto-Event Variables that you can enable, just click them and they will be enabled for you in your account. 

Screenshot of Google Tag Manager showing the different Auto-Event Variables you can enable.

Head back and try your click trigger. If it’s already installed, just head over to your page and reload it. You should see in your variables menu, the enabled Auto-Event Variables. 

Not all of them always get filled. But if they get filled, they have some important information that lets us distinguish our different clicks from each other. And make sure our filter within our auto-event trigger is correctly filled.

Screenshot of Google Tag Manager showing the variable menu with the enabled Auto-Events Variable.

3. Google Analytics Settings Variable

The third is the Google Analytics Settings Variable. Google Analytics Settings Variable is simply a variable that will fill out any areas that use this variable with the same value. If the value of this variable is then changed at a later date all the areas that use this variable will be updated.

This saves a lot of time manually updating and keeping track of important fields in your account.

Why Is Using the Google Analytics Settings Variable so Useful?

If you have Google Analytics installed through Google Tag Manager, and you have several tags that are sending data over to Google Analytics, you can use the Google Analytics Settings variable to fill out fields in GTM with your Google Analytics Tracking ID from one centralised location, making it easy to swap out this value for something else down the road. 

Setting Up a Google Analytics Variable

Below is an example of Tracking ID. This is something we would need to repeat all over again. For convenience, we can simply build a new Google Analytics Settings Variable that will prefill this Tracking ID field.

Screenshot of Google Tag Manager showing a sample of a tracking ID.

To build a new Google Analytics variable  you should fill the Tracking ID and press Save

Screenshot of Google Tag Manager with the new Tracking ID and the Save button.

Here in the settings variable drop down, choose the variable you made. Turn off the enable override settings in this tag so all the settings that would normally be put into these fields here are now governed by one central variable, the Google Analytics Settings Variable. 

Screenshot of Google Tag Manager showing the new Google Analytics variable and the disabled override settings.

4. URL Query Variable

Next variable is the URL Query Variable. This variable is particularly useful if you see any kind of query string in your URL and would like to get its information.  Learn more about URL variable in this post:

How to Pull Information through the URL Query Variable?

To pull out information through the URL Query Variable, go over and create a new variable of the type URL.

Screenshot of Google Tag Manager showing the URL variable type.

Choose Query as the component type, then type in the Query Key.

Screenshot of Google Tag Manager showing Query as the component type and a blank as the Query Key.

The key is whatever is in front of the equal sign of your desired value. In this sample, it would be simply s.

Screenshot of Google Tag Manager showing a URL path.

5. Referrer Variable

The Referrer Variable is a variable that is already built in and also enabled by default. You could find it under your variable menu shown below: 

Screenshot of Google Tag Manager showing the variables with the Referrer Variable.

What is a Referrer Variable?

Referrer Variable is the URL that the user just came from, before he entered a page. We could utilize this to always fire a tag when somebody comes from google.com, for example, or we could also utilize this in our other tags to send that data to our analytics tools.

6. 1st Party Cookie Variable

If you navigate around with Google Tag Manager on your page, you’ll know that the preview mode reloads every time you go to a new page. That also means that the Page View, DOM Ready and Window Loaded, appear new in your preview mode, and the data layer gets filled with new data. 

Screenshot of Google Tag Manager showing the Data Layer with data.

Unfortunately, Google Tag Manager cannot remember anything that was going on beforehand. Each page load means a new loading of Google Tag Manager. With web development, you can persist the data. And commonly there are cookies used to do this. You can set cookies with Google Tag Manager, but that will be for another post. 

How to View Browser Cookies? 

To view the cookies set on our browser, you need to open the chrome menu and go to Developer Tools

Screenshot of Google Tag Manager showing the Chrome menu and the Developer Tools button.

Here we get some useful information under the application tab. And Cookies right here we can see what data was set through different code on our website. 

Screenshot of Google Tag Manager with the cookie newsletterSubscriber

Now in some cases, there’s more useful information. In other cases, it’s unusable because you don’t really know what it exactly means. But as I said, you could actually also set your own Cookies. 

For example, this Cookie here is this user newsletterSubscriber was set to true. Probably he came from a newsletter source. 

Screenshot of Google Tag Manager showing the cookie newsletterSubscriber with the value true.

Building 1st Party Cookie Variable

To build a 1st Party Cookie Variable, all you need to do is go over to Google Tag Manager and under the user-defined Variables will choose a 1st Party Cookie Variable as our type. 

Screenshot of Google Tag Manager showing 1st Party Cookie as the selected variable type.

In this sample, the Cookie Name is newsletterSubscriber. And this should now pull out the right value from our Cookie. 

Screenshot of Google Tag Manager showing a blank as the Cookie Name.

And voila, here we go. 

Screenshot of Google Tag Manager showing the Variables with the 1st Party Cookie Variable which is the newsletterSubscriber.

7. DOM Element Variable

DOM stands for document object model. This is how our site is marked up and we can simply right click on any element on our website and click on Inspect in Chrome.

Screenshot of Google Tag Manager showing the Inspect element.

This will open up the elements pane here and give you the visual representation of the document object model. With the DOM Element Variable you’ll be able to pull out any kind of node that you are interested in and get either an attribute or the text in between those elements. 

Screenshot of Google Tag Manager showing the Elements pane with data.

How Does It Work?

An example will be pulling out the cart menu, and the amount of the cart menu. You would need to either know the ID or the CSS Selector. Luckily in this sample there is a class called amount which you can utilize in your variable really easily. 

Screenshot of Google Tag Manager showing a CSS class of amount.

So let’s head over to Google Tag Manager. And under variables, we’ll go into our new user defined variables and click on the DOM Element for variable type. 

Screenshot of Google Tag Manager showing DOM Element as the variable type.

The selection method is CSS Selector because we don’t have an ID, and we have a class so in the element sector, you put a dot first then the amount. Note that you need to know a little bit about CSS Selectors in order to do this.

And then we can choose the attribute that we want to pull out. Since we want to pull out the text, we can leave this empty for now. Then press Save

Screenshot of Google Tag Manager showing a variable configuration with CSS Selector as the Selection Method, . amount as the Element Sector and a blank for the attribute name.

Screenshot of Google Tag Manager showing a variable configuration with CSS Selector as the Selection Method, .amount as the Element Sector and a blank for the attribute name. 

Try it out!

Screenshot of Google Tag Manager showing the DOM Element in the variables.

8. Lookup Table Variable

Getting more advanced, we’re gonna take a look at the Lookup Table Variable. The Lookup Table Variable has different use cases, but the easiest would be to simply rewrite an existing variable. 

How to Rewrite an Existing Variable?

An example would be the variable we created earlier that would pull out the value from our cookie newsletterSubscriber, true. 

Now if you use this inside of an event tag, for example, you would simply see true in the action and you wouldn’t quite know what this means. So you would like to rewrite this variable into something more recognizable like subscriber. This is easily possible with the Lookup Table variable.

Now, let’s head over to Google Tag Manager and build a new user defined variable. And this time, we’ll go with the Lookup Table.

Screenshot of Google Tag Manager showing Lookup Table as the selected variable.

In the variable dropdown, choose cookie

Screenshot of Google Tag Manager showing cookies as the chosen variable in the variable dropdown.

If the input is true, then we want to rewrite it into Subscriber. If the input is false, rewrite it into a Non Subscriber. And for the default value, we can just set it to Unidentified.

Screenshot of Google Tag Manager showing true and false as the input and Subscriber and Non Subscriber as the output.

Alright, let’s try this out! Our variable that we had before shouldn’t change. We still have cookie newsletterSubscriber true, but rewritten, we should have this in our Lookup Table as Subscriber

Screenshot of Google Tag Manager showing the Variables with the Lookup Table.

9. Regex Lookup Table Variable

The next variable is the Regex Lookup Table Variable. What you might have noticed is that when we created our Lookup Table subscriber variable, we need to be very precise with the names. 

If I type in anything extra or put a white space, it wouldn’t match up anymore. And we’ll just get undefined in our field value.

Therefore, the matching option that we have in this first input column is similar to “equals true” so the cookie newsletterSubscriber needs “equals true” in order for it to go into the output subscriber.

But what we also have available is a variable type of Regex Lookup Table. 

What is Regex?

Regex stands for regular expression. And if you’re familiar with Regex, you know that you can really get detailed in your search query, which can be very powerful. 

How Does It Work?

For example, we would like to classify all product pages into a product category. So we would like to have an output of “product”, simply to classify our product pages. And we can have one for category pages as well. We can easily do this with a Regex Table Variable

Screenshot of Google Tag Manager showing the RegEx variable type.

In the variable Configuration page, the input would simply be Page Path. If the Page Path contains anything like / product then the output should Product. And if there’s a /category in there, then the output should be Category.

Screenshot of Google Tag Manager showing the input variable with Page Path, pattern with \/product\/ and -category/ and output Product and Category.

So what I will do here is put around dot stars, which means everything multiplied. So let’s put this in the front and the back here and see if this works. Let’s save this, and refresh the page. 

Screenshot of Google Tag Manager showing the input variable with Page Path, pattern with .*\/product\/.* and .*-category/.* and output Product and Category.

And in all variables we now see the Regex table has the name Category that matches up the category page based on the URL path. 

Screenshot of Google Tag Manager showing Regex Table variable matching the page URL.

And if you go to a product page, it also matches the name, Product,  in the Regex Table. 

Screenshot of Google Tag Manager showing RegEx Table variable matching the page URL.

You can become more sophisticated with Regex Table than you are with the normal Lookup Table. And this can be very valuable, for example, for content grouping and Google Analytics or to look at the Referrer.

You could also do channel grouping really effectively, and send this on to Google Analytics easily. So Regex Table is really an advanced feature, which can be quite powerful in Google Tag Manager.

10. Custom JavaScript Variable

And we have come to, champion, the variable that rules them all, which is the Custom JavaScript Variable. Now, the Custom JavaScript Variable is probably the most versatile, but also the most complicated to write yourself (or the easiest to use if you just copy the code you need). 

To be honest, the Custom JavaScript variable could potentially be used to replace all the variables that you have seen in this post, because JavaScript is the technology that is powering Google Tag Manager, and therefore will be able to do everything that Google Tag Manager does with only using JavaScript in this Custom JavaScript Variable. 

How Does it Work?

Let’s go with a little example. In Google Tag Manager, I can simply go over to the user defined variables again, and create a new Custom JavaScript Variable.

Screenshot of Google Tag Manager showing the Custom JavaScript variable as the variable type.

Here, we need to adhere to some conventions. One is to write an ominous function that returns a value.

To put this in right from the start in between, you can execute any kind of JavaScript code, you obviously would need to know a little bit of JavaScript. And also you need a return value.

Screenshot of Google Tag Manager showing the function and return values.

As an example, let’s go with the current time, which we can get by writing a new Date and it’s return value as time

Screenshot of Google Tag Manager showing the function of new Date and return value set as time in the variable configuration page.

Refresh your page and in the variables, you’ll see a variable of the Return Type date with the current date and time as the Value. And this should dynamically change. You see here at the second level, that some of these are changing, depending on when the event loaded. 

Screenshot of Google Tag Manager showing variable of the type date with the actual current, date and time.

Again, with a little bit of more JavaScript code, you could probably make this quite useful. I just hope that you understand the potential of this Custom JavaScript Variable.

Summary

Alright, so there you have it. These are my Top 10 variables that I use within Google Tag Manager. There are more out there and there are also many other use cases for these specific variables. 

I leave it up to you to give me your tips down in the comments below. I’d love to hear from you as always. 

And for more advanced lessons like this consider checking out our MeasureMasters program here.

Julian Juenemann
About the author: Julian Juenemann

Julian started and grew venture-backed startups with his unique 'data first' approach to Online Marketing. He then founded MeasureSchool.com to help marketers, like him, the data-driven way of digital marketing.

guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Charles Meaden
Charles Meaden
1 month ago

In the regex table variable you suggest using page path when creating variables for a content group

The one challenge with that if the URL contains query strings, they won’t get picked up, so I recommend using Page URL instead as it contains everything