Go Back

Using Variables in Tag Manager

January 29, 2018

Tag Manager is smart enough to properly handle variables in tags. There are 4 different contexts of using Variables. By contexts, we should understand a place where the Variable is used.

HTML
JS
not part of URL
in string outside string

As long as contexts are not mixed everything will work properly.

Let’s see each case separately:

  • custom tag, HTML, variable in URL
  • <img src="//ab-testing/images/banner_{{abVersion}}.png">
    custom tag, HTML, variable not in URL

    <div class="layout-{{abVersion}}"> ... some content here ... </div>

    custom tag, JS, variable in the string

    <script type="text/javascript">
    (function (d) {
    setTimeout(function () {
    var f = d.getElementsByTagName('script')[0], s = d.createElement('script'); s.type = 'text/javascript';
    s.async = true; s.src = '//example.com/{{ customerID }}/{{ siteToken }}.js'; f.parentNode.insertBefore(s, f);
    }, 1);
    })(document);
    </script>

    custom tag, JS, variable not in string

    <script type="text/javascript">
    var _paq = _paq || [];
    _paq.push(['setCustomUrl', {{ url }}]);
    _paq.push(['setDocumentTitle', {{ title }}]);
    _paq.push(['trackPageView']);
    </script>

    Example of mixed contexts would be when in script dynamically is generated another script with src attribute and injected with document.write. Lets see the code:

    custom tag, mixed context example

    <script type="text/javascript">
    document.write(decodeURI('%3Cscript%20src="' +
    (document.location.protocol === 'https:' ?
    'https://example.com/{{ partition }}/path/{{ guid }}.js' :
    'http://example.com/{{ partition }}/path/{{ guid }}.js') + '"%20type="text/javascript"%3E%3C/script%3E'));
    </script>

    As you can see both variables (partition and guid) are used in JavaScript code, but in fact they are part of URL of HTML tag script. Additionally, everything is expected to be URI encoded. This will work as long as variables contain only letters and numbers. If that’s not the case tag have to be rewritten so variables can be escaped properly.

    custom tag, mixed context example fixed

    <script type="text/javascript">
    var partition = encodeURI(encodeURI('{{ partition }}'));
    var guid = encodeURI(encodeURI('{{ guid }}'));

    document.write(decodeURI('%3Cscript%20src="' +
    (document.location.protocol === 'https:' ?
    'https://example.com/' + partition + '/path/' + guid + '.js' :
    'http://example.com/' + partition + '/path/' + guid + '.js') + '"%20type="text/javascript"%3E%3C/script%3E'));
    </script>

    What we have done here is we double encoded variables. That is because the whole script is passed via decodeURI function but we need URI encoded string to pass it safely to scripts URL.

    Caution! You may wonder why variable in a string example is not a mixed context. That is because we are in JS context all the time. We build script tag only with JavaScript, we do not output ready HTML.

    Predefined Variables

    Some variables are predefined for you to use. You could use one of your own or use an already defined one.

    For list and details for predefined variables please consult Triggers section

    Using in custom tags

    The custom tag is nothing more than some piece of HTML. You can have all 4 upper examples as one tag and it will work perfectly fine.

    Lets see example of custom tag:

    This example will log into the browser’s console variable’s value type and value, for example:

  • for value 5 will log:
  • test-var: [ number ] | 5 |

  • for value true will log:
  • test-var: [ boolean ] | true |

  • for value {user: ‘john@example.com’, name: ‘John’} will log:
  • test-var: [ object ] | {user: 'john@example.com', name: 'John'} |

    Using in tag templates

    Tag templates are predefined tags for specific vendors. Any of them could be replaced by a custom tag. They are created to ease your work. The same rules apply to them as to custom tags.

    Lets see example of tag template:

    From the drop-down list, you can select any existing Tag Manager’s variable. You can also fill it with one by hand.

    Using in conditions

    In Conditions, you can only use tag managers variables. You can choose them from a list.

    Note: You can choose from predefined variables as well as custom variables defined as presented in the article Creating a variable in Tag Manager.

    You can also choose conditions:

    To see detailed information consult Conditions articles.

    Predefined variables:

  • Page Url – Contains the whole URL of the current page.
    Example: https://piwik.pro/contact
  • Page Path – Contains an initial ‘/’ followed by the path of the URL.
    Example: /contact/
  • Page Hostname – Contains the domain of the URL.
    Example: piwik.pro
  • Click Classes – Contains the class(es) of the clicked element.
  • Click ID – Contains the ID of the clicked element.
  • Click Url – Contains the URL of the clicked element.
  • Form Classes – Contains the class(es) of the submitted form element.
  • Form ID – Contains the ID of the submitted form element.
  • Form Url – Contains the URL of the submitted form element.
  • Event – The name of the event emitted on dataLayer.
  • Referrer – The URL of the page that linked to the current page.
    Example: https://piwik.pro/
  • External referrer – The URL of the page from website with different hostname that linked to your current website.
    Example: https://clearcode.cc/
  • Campaign – base on utm_campaign parameter from URL.
    Example: can be used to fire a tag for users who got to your page thanks to your specific campaign.
  • Traffic source – Contains traffic source (campaign, organic search, social, website, direct).
  • Returning Visitor – Logical condition which says if this is the user’s 1st visit or not