How to use variables in tags and triggers

In tags and triggers, you can use ready-made variables, such as a page URL, page path, referrer, and more. Or, you can create your own variables.

In this article, we’ll explain how you can use variables.

Access a variable in tags and triggers

Both ready-made and custom variables can be accessed from the list of variables in tags and triggers.

Variable in a tag

A variable in a tag in Tag Manager.

Variable in a custom tag

A variable in a custom tag in Tag Manager.

Variable in a trigger

A variable in a trigger in Tag Manager.

Ready-made variables

  • Page URL: Contains the whole URL of the current page. For example, https://clearbank.com/product-tour
  • Page path: Contains an initial / followed by the path of the URL. For example, /product-tour/.
  • Page hostname: Contains the domain of the URL. For example, clearbank.com
  • 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 data layer.
  • Referrer: The URL of the page that linked to the current page. For example, https://clearbank.com/blog.
  • External referrer: The URL of the page from the website with a different hostname that linked to your current website. For example, https://medium.com/.
  • Campaign: Based on the utm_campaign parameter from URL. For example, it can be used to fire a tag for users who reached your page from a given campaign.
  • Traffic source: Contains traffic source: campaign, organic search, social, website, direct.
  • Returning visitor: Logical condition which says if this is the user’s first visit or not.

Variables and a context in a custom tag

When you’re using a variable in a custom tag, you need to pay attention to the context. By context, we mean a place where the variable is used. As long as contexts are not mixed everything will work correctly.

Now, we’ll show you a couple of examples of a proper context, and one example of an incorrect context.

Correct context

A custom tag, HTML, a variable in the URL.

<img src="//ab-testing/images/banner_{{abVersion}}.png">

A custom tag, HTML, a variable not in the URL.

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

A custom tag, JavaScript, a variable in the string.

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

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

A custom tag, JavaScript, a variable not in the string.

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

Incorrect context

A custom tag, mixed context.

An example of a mixed context would be when in one script there is another script dynamically generated with src attribute and injected with document.write.

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

As you can see both variables — partition and guid — are used in a JavaScript code, but in fact they are part of the URL of the HTML tag script. Additionally, everything is expected to be URI encoded. This will work as long as variables contain only letters and numbers.

If we were to fix this code, it would look like this:

<script type="text/javascript"><br />
    var partition = encodeURI(encodeURI('{{ partition }}'));<br />
    var guid = encodeURI(encodeURI('{{ guid }}'));</p>
<p>    document.write(decodeURI('%3Cscript%20src="' +<br />
        (document.location.protocol === 'https:' ?<br />
            'https://example.com/' + partition + '/path/' + guid + '.js' :<br />
            'http://example.com/' + partition + '/path/' + guid + '.js') + '"%20type="text/javascript"%3E%3C/script%3E'));<br />
</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.

Was this article helpful?

Be the first to rate this article.

Technical Support

If you have any questions, drop us a line at support_SPC@piwik_SPC.pro.

We’re happy to help!