Getting started with Variables
Variables are values that can change depending on what’s happening on your website. You can use these in both tags and triggers, and even inside other variables.
Variables
Variables present an almost endless amount of possibilities, you can create variables from most components of your website – including the Data Layer.
GTM comes equipped with a set of pre-set variables, to see and use these you can navigate to “Configure” on the Variables section, then simply tick the ones you’d like to use.
You can also create your own using Custom JavaScript, Data Layer values and more. You can also create variables that group and rename other variables, using the Lookup Table or Regex Table type.
Custom JavaScript Variables
Here the possibilities really are endless. If you’re savvy with JavaScript, you can create variables that do anything from finding the closest element of whatever your user clicked on, to returning something a user had selected from a dropdown. You can also incorporate other variables in your Custom JavaScript Variable by typing them in with curly brackets, like this {{
URL Variables
If you want to return only part of a URL, or part of a query string, this is the ideal variable type for that.
The Component Type lets you choose what part of the URL to return, and you can even alter the output with settings like:
- Change Case to...
- Convert null to...
- Convert undefined to...
- Convert true to...
- Convert false to...
Data Layer Variables
The Data Layer would typically be set up by your web developer. A data layer is a JavaScript object that is used to pass information from your website to your Tag Manager container. It is made up of a list of key/value pairs – the key being a static name and the value being variable.
Some common uses for the Data Layer in an Ecommerce setting are:
Information gathered | Key | Value |
---|---|---|
Is the user logged in? | user_logged_in | Yes/No |
Is the user a returning customer? | returning_customer | Yes/No |
What’s the customers encrypted email/ID? | encrypted_email_address | {{returns an encrypted string of letters and/or numbers}} |
What type of page are they viewing? | pagetype | Homepage Article Product Listing Product Page Etc |
To use the Data Layer as a variable in GTM, create a new tag and select Data Layer Variable from the Variable Type options. Then paste the Key (like user_logged_in) into Data Layer Variable Name.
This will now return the value of that key.
JavaScript Variables
Not to be confused with Custom JavaScript variables, this type only requires one string – a Global Variable Name - and not an entire script.
Take a look at the scripts you have in your websites source. You’ll see variables used by the script defined as: var variableName = “Variable Value”;
Generally speaking, there are two types of variable, which determine whether it can be used outside of the script or not.
If the variable is defined outside of the script function, it is a Global JavaScript Variable. If it is defined inside the function, it is a Local Variable.
Global Variables can be used outside of the script, including GTM – Local Variables cannot.
Here’s an example:
function myFunction() {
var catBreed = "British Shorthair";
}
Here, we can use the variable catName because it sits outside of the function.
To call this variable into GTM, select the variable type JavaScript Variable, then paste the Global Variable Name into the field provided.
This will now output whatever the value of that script’s variable is, in this case we would get the string “Zavala”.