GTM variables part 1: built-in variables in GTM

GTM variables activation

Introduction

In one of my posts I briefly described purposes of using variables in Google Tag Manager.
It includes two important types of variables:

  • Built-in variables;
  • User-defined variables.

This article will cover built-in variables.

Built-in variables are a category of variables that are created automatically in each container and can’t be changed.
Practically, it is set of “ready-to-use” variables that may be useful for many GTM users.
Working process with such variables has no difference from user-defined variables.
The only thing worth noticing is that many of built-in variables are disabled by default. In this case, you couldn’t see them on drop-down list of variables when you create a trigger, for example. It’s very easy to enable them: just click on “Variables” menu on Google Tag Manager Interface and enable variables that you are going to use.
GTM variables activation

Built-in variables

At the moment there are 6 categories of built-in variables in GTM:

Pages

In my opinion, it is one of the most simple and often used categories of GTM variables.
These variables are used to define, where the user is at the moment regarding the website URL structure.

Page URL – variable returns full URL of current page.
Example: if user loaded page http://mysite.com/posts?category=gtm#vars this variable returns value: http://mysite.com/posts?category=gtm (all, except hash).

Page Hostname – variable returns host name for URL in current page.
Example: for page http://mysite.com/posts?category=gtm, this variable returns value: mysite.com.

Page Path – variable returns path to page in current URL.
Example: on page http://mysite.com/posts?category=gtm#vars this variable returns value /posts.

It’s important to note the difference from Universal Analytics, where Page Path includes GET-parameters by default.

For example, in GTM for pages:
http://mysite.com/posts?category=gtm
http://mysite.com/posts?category=ua
value of variable {{Page Path}} will be /posts.

But in Universal Analytics for the 1st page Page Path = /posts?category=gtm, and for the 2nd Page Path – /posts?category=ua.

Referrer – full URL of transition to the current page.
For example, if user from page http://mysite.com/examples went on page http://mysite.com/about, the value of variable will be http://mysite.com/examples.

Clicks

This category of variables is used to track clicks on web elements.
Google Tag Manager automatically collects data about clicks and forms sent, stores this data in built-in variables and in dataLayer.

Click Element – variable returns data object for HTML-element that was clicked by user. In dataLayer it can be found as “gtm.element” (only few of its properties are shown on screenshot):
GTM gtm.element object structure in console

This data object contains a lot info about HTML-element that was clicked by user.
Most useful fields are id, class, innerText, parentElement.
In my opinion, this variable will be interesting for users with JavaScript-programming experience and basic knowledges of JS-objects.

For example, it is possible to get property “className” of clicked element inside GTM tag:

Click classes – returns HTML-attribute class for clicked element.
For example, after click on element this variable will have value myspan red.

In fact, this variable is the same as {{Click Element}}.className but in more convenient format.
Click ID – returns HTML-attribute id for clicked element.
For example, after click on element this variable returns value top-menu.
It’s analog of {{Click Element}}.id.

Click Target – returns HTML-attribute target for clicked element.
Example: after click on link returns _blank.

It is analog of property {{Click Element}}.target.

Click URL – returns attribute href(for links) or action(for forms).
Example: after click on link variable returns http://google.com.

It is analog of property {{Click Element}}.href for links and {{Click Element}}.action for forms.

Click Text – returns text of clicked element.
Example: after click on <a href=”/about”>About me</a> this variable returns value About me.
It is analog of property {{Click Element}}.innerText.

Utilities

In my opinion, this category belongs to service categories of variables.

Event – returns substring, which contains type of event that happened on website and was triggered by Google Tag Manager.
Examples:
– After click on every element returns gtm.click
– After click on link returns gtm.linkClick,
– After form submission returns gtm.formSubmit

Container ID – returns number of GTM container in format GTM-XXXXXX.
Value (example): GTM-TB7984.

Container Version – returns number of current version of contained GTM.
Value (example): 19.

Random Number – returns random number from 0 to 2147483647.
Value (example): 12323.

Errors

Sometimes JavaScript creates errors, so it is helpful for developers to know reasons of these errors.
Using “Errors” category of built-in variables within combination of Google Tag Manager and Google Analytics can help you to analyse website errors (up to analysis of certain pages, browser versions, screen resolutions, device types).
It’s important to know that they should be activated and it’s necessary to create at least one GTM-trigger with type “JavaScript Error” to use such variables.

To check how it works I created JS-file error_js_runner.js which included JavaScript-error.
I added this script to website template.

File contained following strings:

This code just run non-existing function (“unknown_function”) with 3 sec delay.
This delay (“setTimeout”) was used to define that GTM will be loaded to this moment and it will be possible to track error.

After running GTM debug mode I saw following variable values of “Errors” category:

Errors - dataLayer

Error Message – message with text about JavaScript error.
In my example this message is: Uncaught ReferenceError: unknown_function is not defined.

Error URL – path to file where error was caught. I uploaded this file on my own server, so value of variable is: http://konygin.net/error_js_runner.js.

Error Line – number of string, where error was caught.
In my example above this variable has a value 3.

Debug mode – returns true if GTM debug mode was enabled and false if this mode is disabled.
In my example this mode was enable, so value of this variable is true.

Forms

This Event category is very similar to “Clicks” category.

Form element – returns JS-object for form that was sent. For example, attributes class, ID, data for parent and child elements.

Form classes – contains set of “class” attributes for form that was sent.

For example, after sending the form <form class=”feedback” class=”ajax-form”>…</form> this variable will contain value feedback ajax-form.

Form ID – contains id attribute for form that was sent.
After sending the form <orm id=”contact” class=”ajax-form”>…</form> this variable will contain value contact.

Form Target – contains value of target attribute for the form.
After sending the form <form id=”contact” target=”_blank”>…</form> this variable will contain value _blank.

Form URL – this variable contains value of action attribute for forms. It can be very useful if form does not contain id or class attributes but may be identified by URL handler.
After sending the form form <form action=”/contact_handler.php”>…</form>was sent this variable will have value /contact_handler.php.

Form Text – variable contains text of sent form.

For example, after form with following text was sent:

variable will have value Search for:.

History

This category of variables will be useful for people, who is working with one-page and/or AJAX websites, where website content may be loaded dynamically without reload of the whole page. Usually, on such websites hash changes after clicks on links or content reload (e.g. /about#bio, /about#projects). To use variables from “History” category at least one trigger “History Change” should be created in Google Tag Manager.

New History Fragment – hash value after History Event.
For example, if user goes from checkout#step1 to /checkout#step2 (URL of page was not changed, but hash was).
Then value of variable will be step2 (the new hash).

Old History Fragment – hash value before History Event.
Let’s say user goes from /checkout#step3 to /checkout#step4.
In this case, value of variable will be step3 (previous hash).

New History State – History Object after History Event happened.
(And JS-method history.pushState() was fired).

Old History State – state of History Object that was active before History Event happened.

History Source – returns string with Event that changed History Object.

Summary

Google Tag Manager contains many pre-defined variables that are often used for creation of tags, triggers and other variables. It’s a very easy-to-use tool that can save a lot of time and opens a lot of possibilities for programmers, analysts and digital marketers.

Digital analytics consultant.

Want to improve your website performance?
Contact me!