How to use variables in tags and triggers

In tags and triggers, you can use built-in variables — like a page URL, page path, referrer — or custom variables. You can access them from the list in a tag or trigger.

Variable in a tag

Variable in a custom tag

Variable in a trigger

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.