Skip link tracking with the data-disable-delay attribute

The <a> element (or anchor element) creates a hyperlink to web pages, files, email addresses, locations on the same page or any other URL addressable item via its href attribute.

To make sure tags have time to fire before the redirect occurs, our container includes a delay mechanism.

Delay mechanism

Each app or site you create has the option to delay loading the next page. You can set it up in Administration > Sites & apps > Data collection > Other > Other options > Delay loading the next page. The default value for each app is 500ms. Once you assign a trigger and a tag to an anchor element, this mechanism will make sure the tag fires and has time to execute before the visitor is redirected to the target page.

However, not every anchor element is meant to perform a redirect. For instance, in Single Page Applications (SPAs), <a> elements may function as buttons. In these cases, the action inside the container might interfere with the page’s functionality. This is where the data-disable-delay attribute is useful.

data-disable-delay attribute

The data-disable-delay attribute is a custom attribute recognized by the container. When an anchor element with this attribute is clicked, the container bypasses the delay logic, allowing any attached listeners to execute immediately.

Example

1. Let’s assume your Tag Manager setup includes a Custom code (async) tag (the tag's content doesn’t matter here) and a basic click trigger assigned to it.
2. The following code is present on your page:

<a
    id='link-id'
    href="/"
>
    link
</a>
<script>
    window.setTimeout(function() {
        document.addEventListener('click', function(event) {
            if(event.target.id === 'link-id') {
                event.preventDefault()
            }
        })
    }, 1000)
</script>

3. When the visitor clicks the link, a redirect occurs. However, this is not desired because the listener uses preventDefault to stop the redirect.
4. Now let’s change the anchor element to look like this:

<a
    id='link-id'
    href="/"
    data-disable-delay
>
    link
</a>

5. After the change, clicking the link no longer triggers a redirect and instead activates the click listener immediately.