How to use variables in tags and triggers

Tag Manager

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 Piwik PRO

Variable in a custom tag

A variable in a custom tag in Piwik PRO

Variable in a trigger

A variable in a trigger in Piwik PRO

Ready-made variables

  • Page URL: The full page URL. For example, https://clearbank.com/product-tour.
  • Page path: The part of URL that comes after the hostname. For example, /product-tour/.
  • Page hostname: The part of URL that shows the hostname. For example, clearbank.com
  • Click classes: Class(es) of the clicked element.
  • Click ID: The ID of the clicked element.
  • Click URL: The URL of the clicked element.
  • Form classes: Class(es) of the submitted form element.
  • Form ID: The ID of the submitted form element.
  • Form URL: 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 that linked to your current website. The page is hosted on a different domain than yours. For example, https://medium.com/.
  • Campaign: Based on the utm_campaign parameter from URL. You can use it to fire a tag for users who reached your page from a given campaign.
  • Traffic source: One of the following traffic sources: campaign, organic search, social, website, direct.
  • Returning visitor: A new or returning visitor.
  • Consents: A JSON file with information about visitor’s consent. It contains the current state of consent types, the previous state of consent types, form language, timestamp.

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?

    Technical support

    If you still have some questions, visit our community.
    There’s always someone ready to help!

    Back to help center