Go Back

Variable types

August 9, 2018

When creating a new Variable you can choose from the following types:

Custom JavaScript

This is the most powerful Variable type. To create a Variable you have to write a JavaScript function that ends with a return statement. What is returned from this function will be assigned to the Variable.

Since this is JavaScript run in the browser you have some predefined objects available:

  • window
  • document
  • location
  • localStorage
  • Value specification: any type you have available in JavaScript. Additionally, same string conversions are made:

  • all numeric strings are converted to numbers,
  • TRUE, true, FALSE, false string will be converted to boolean value.
  • Attention! It may be tempting to use Variables inside Custom JavaScript variable type, but it’s not yet supported.

    Please see the following examples to understand how powerful Custom JavaScript Variable type is.

  • the random number between 0 and 10
  • function () {
    return Math.floor(Math.random() * Math.floor(10));
    }

    The assigned value will be of type number.

    constant array (10 primes)

    function () {
    return [2, 3, 5, 7, 11, 13, 17, 19, 23, 29];
    }

    The assigned value will be of type Array.

    DOM element

    function () {
    return null !== document.getElementById('main-header');
    }

    The assigned value will be of type boolean. True if an element with id main-header exists, false otherwise.

    URL hash

    function () {
    return location.hash.replace(/^#/, '');
    }

    The assigned value will be of type string. For URL https://example.com/#about we will have about assigned to the Variable. If there will not be a hash in URL, the empty string will be assigned.

    Constant

    This is probably the simplest way to create a Variable. Constant Variable gives us the possibility to define for example public API keys for your tracking script in a single place. You have to type its value into the input.

    Value specification:

  • all numeric strings are converted to numbers,
  • TRUE, true, FALSE, false string will be converted to boolean values.
  • Cookie

    This Variable type allows us to read cookie values. You just need to put cookie name into given input.

    Value specification: cookies are actually strings, so one would expect a string as a result. But we recognize string is not always what we expect, so:

  • all numeric strings are converted to numbers,
  • TRUE, true, FALSE, the false string will be converted to boolean values.
  • If your cookie is more complex than that (e.g. JSON) unfortunately you have to handle that yourself.

    dataLayer

    dataLayer is a very powerful feature that allows you to pass data from your CMS or another source available via JavaScript on your page to Tag Manager. This is the only way to use this data in your triggers’ conditions because only Tag Manager’s Variables can be used there.

    You just have to fill in data layer variable name into input and we are done here. Now to make it work you have to create data layer variable in the code of your page:

  • set test variable with value my string (setting up string type variable)
  • <script type="text/javascript">
    window.dataLayer = window.dataLayer || []; // make sure dataLayer is initialized
    dataLayer.push({test: 'my-string'});
    </script>

    With this on your page the solution is complete and our Tag Manager’s variable will be assigned the value my-string.

    Some more examples of different data types that can be assigned to variable.

  • set test variable with value true (setting up boolean type variable)
  • <script type="text/javascript">
    window.dataLayer = window.dataLayer || []; // make sure dataLayer is initialized
    dataLayer.push({test: true});
    </script>

  • set test variable with value 153 (setting up integer type variable)
  • <script type="text/javascript">
    window.dataLayer = window.dataLayer || []; // make sure dataLayer is initialized
    dataLayer.push({test: 153});
    </script>

    Value specification: One can push anything to dataLayer, so we can have all data types here, even a function.

    DOM element

    Type Description
    Element ID You can select HTML element by its ID attribute. Just write it’s value into input field.

    ID attribute is unique on the page, so only one element will be used to derive the variable value.

    Attention! Please remember to paste element id without any additional characters. It should not be preceded by element’s tag name nor #.

    CSS selector You can select one or more elements using CSS selectors.

    Examples:

  • div.section – will return all div elements that have section class (this is hard with XPath)
  • a[title] – will return all a elements that have title b/li>
  • #main – will return element with id main
  • XPath You can select one or more elements using XML Path Language.

    Examples:

  • //div[contains(@class, ‘section’)] – will return all div elements that have section as a substring of class attribute
  • //a[@title] – will return all a elements that have title attribute
  • //p – will return all p elements with an a child (this is impossible to select with CSS selectors)
  • Value specification:

  • if Extract text content of an element is unchecked then variable will hold a value of the boolean type, true if the element is found, false otherwise.
  • if Extract text content of an element is checked then variable will hold text extracted from the element (and all its descendants) if the element is found, empty string otherwise.
  • Document

    With Document Variable type you can access any document object property.

    As seen on the screenshot you can assign objects properties after the dot sign. Of course, you could pass also a location and in your custom tag, you will have a location object.

    Most common properties you would want to use are:

  • title
  • location
  • protocol
  • host
  • href
  • hash
  • pathname
  • search
  • domain
  • URL
  • documentURI
  • referrer
  • Variable always has a value and its type depends on document property assigned. All mentioned above are of string type.

    Random number

    This Variable type provides a random value between 0 and 1 (inclusive of 0, but not 1). Variable has always a value and its type is numerical.

    Example values:

  • 0.8452040655517055
  • 0.6075614549571422
  • 0.44718786263204824
  • 0.13507537026019567
  • URL

    Type Description
    GET pararmeter You can pass selected GET parameter to this variable. For example for URL https://piwik.pro?source=newsletter&medium=email you can choose source to have newsletter passed to your Variable.

    Value specification:

  • when your get parameter is not present or has no value, then the Variable value will be an empty string,
  • numeric strings will be converted to numbers,
  • TRUE, true, FALSE, false string will be converted to boolean values.
  • Query With this option our variable will get full query string. For example for URL https://piwik.pro?source=newsletter&medium=email you will get source=newsletter&medium=email as your variable’s value.

    Value specification:

  • when your query string is empty, this value holds empty string
  • Protocol Here your variable will receive http or https as a value.

    Value specification:

  • this variable will always hold either http or https