5 Nov 2015
Reading time: 6 mins.
|
Difficulty:

4 key variables in Google Tag Manager

When you begin working with Google Tag Manager, it is possible to get quite far without requiring custom Variables (or Macros in GTM v1). However, as soon as you start using it professionally, you’ll soon find it’s highly advisable to start using these kinds of variables right away:

1. Constant variable in Google Tag Manager

Constant GTM variables are used to store values (static or dynamic values) that are frequently needed.

At least, it is essential to create constant variables to set Client/Company/Conversion… ID  fields on common tags. E.g. Universal Analytics UA- number, AdWords account ID, DoubleClick, etc.

gtm-constant-ua-analytics

However, they can be used for a wide range of fields and settings.

Why should we use constant variables in GTM? Let’s continue with the Google Analytics example:

  • It is easier to remember {{ID analytics}} variable name than resorting to Google Analytics Admin (to copy and paste it) each time you want to configure an Analytics tag.
  • They are time saving solutions when you wish to make an overall change or update in the future. For example, in case of migration to Universal Analytics or property change (UA number change) in Google Analytics.
  • Let’s remember that containers can be exported if we wish. When importing you will just need to change the UA- code once.

Another Google Tag Manager constant variable example could be Currency Code for some conversion tags:

gtm-constant-currency-code

2. Lookup Table variables in Google Tag Manager

Do you have several GTM tags whose only difference is a single setting field? Does this field depend on the same condition – variable – in all cases? For instance, we can use different UA- number for different scenarios: preview and debug mode VS published GTM container, live VS development hostnames, etc. But the rest of Universal Analytics tag settings are just the same.

According to Google Documentation: “The Lookup Table type allows you to create a variable for which the value varies according to the value in another variable”.
Another example, it is very common to find different Google AdWords conversion codes where a parameter called “Conversion Label” is the only difference between them. In case they are website conversion codes prepared to be added on page loads, the AdWords Conversion Label value will vary according to the activation page condition. That is to say:

GTM adwords label lookup table

More similar Lookup Table variable examples in this post about conversion pixels for AdWords and DoubleClick.

This variable is more difficult to understand but it is incredibly useful. Tagging will become an easier and less time consuming task.

Given separate development and live environments -as you should do ;)- you may wish to send data from both sites to different Google Analytics properties.

We can use Constant variables as Output instead of static UA- values:

GTM lookup table domain

*Set Default Value: active this setting and you will catch errors and exceptions in an easier way.

Besides, if you want to see your test GA sessions made on GTM debug mode tracked in your test Analytics Property, you may nest a Lookup Table inside another one in order to achieve the desired conditional sequence.

GTM lookup table debug domain combined

Condition and results summary:

  • If I am in the development domain or debug & preview mode → always UA-88888888-1 == {{ID Analytics Debug}}
  • I am in the live domain. Two options:
    • GTM Preview and Debug mode: UA-88888888-1 == {{ID Analytics Debug}}
    • Normal web view: UA-111111111-1 == {{ID Analytics Debug}}

preview-and-debug-tag-manager

3. Data Layer variable in Google Tag Manager

DataLayer variable is often the most important one, since it allows us to send data easily from our website source code to Google Tag Manager. After that, the data can be collected in GTM, sent to other applications, used in as many triggers, variables and tags as we need.

For example: imagine you dynamically register the order value on a e-commerce site built with WordPress. You want to populate this value into Google Adwords using the AdWords Conversion Tag on GTM.
dataLayer Variable - Tag Manager

EXAMPLE # 1: dataLayer code snippet to send the order value to Google Tag Manager:


<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'order',
'revenue': '45'
});
</script>

Note: Revenue = 45 is just an static value example, but most values will be dynamically collected and populated with code.

The GTM variable to capture the price for the example above would be quite simple:

order-value-datalayer-gtm

In Data Layer Variable Name field, write the name of the dataLayer variable as it appears in the JS code snippet. In this case, revenue.

EXAMPLE #2:in case we are already pushing a full Enhanced Ecommerced dataLayer, we can see a more complex -but also more interesting- dataLayer variable example.


<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'purchase',

'ecommerce': {
'purchase': {
'actionField': {
'id': '1234',
'revenue': '45',

'tax':'',
'shipping': '',
'coupon': ''
},
'products': [{
'name': '',
'id': '',
'price': '',
'brand': '',
'category': '',
'variant': '',
'quantity': 1,
'coupon': ''
}]
}
}
});
</script>

Notes:
If possible, always send the transaction push with a custom event (same goes for every other data push, really). It will contribute to create a GTM trigger easily, based on that event. More importantly, if you trigger the transaction tag on the custom “purchase” event (instead of pageview event), you will avoid repeated transactions when pressing F5 or accessing the confirmation URL using another path.

In this example, collecting the revenue (from Enhanced Ecommerce dataLayer) into a GTM variable is quite more complex. In this case, we will use a fundamental feature of dataLayer Version 2:

tagmanager-datalayer-version-2

The values of nested variables can be extracted and separated using a dot “.”. If we wish to extract revenue, we have to use the following nested variable combination: ecommerce.purchase.actionField.revenue

transaction-revenue-datalayer-gtm

It is interesting, isn’t it? 🙂
It is possible reuse to resources and optimize your workflow using variables in Google Tag Manager.

4. Custom JavaScript Variable in Google Tag Manager

A Custom JavaScript Variable uses a JavaScript function that returns a value. As a result, you can remotely insert almost any useful JS code to collect or transform data on your website, in order to process this data to serve better your own goals in the GTM tags

Custom Javascript Variable Tag Manager

This is the variable code structure:


function() {
var now = new Date();
return now.getTime();
}

Here’s a simple example that returns a transaction value stored into an HTML tag with id=”orderValue”


function() {
return document.getElementById('orderValue').innerHTML;
}

This function is evaluated on real time and recalculated every time the variable is read, a common procedure in all GTM variables. If an element containing id=”orderValue” exists on the page, the variable returns its content. If not, an undefined or null value will be returned.

How can we verify that variables are working?

We can verify the current value of our GTM variables easily. In GTM, go to Variables tab in the Preview and Debug console. This tab displays all existing GTM variables and their values for each event (Page Load in the example below, you must select the event on the left side menu).
variables-tag-manager-vista-depuracion