New in version 14.0.
Skip link tracking with data-disable-delay attribute¶
Introduction¶
As per the MDN definition:
The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
If you wish to trigger tags, when the anchor element is clicked, they need time to execute before the redirect happens. That is why our container is equipped with a delay mechanism.
Delay mechanism¶
Each app or site you create has the option to Delay loading the next page in
its settings. You can adjust this value in Data collection -> Other options
section in your app settings under Administration -> Sites & apps. The default
value for each app is 500ms
. Once you assign a trigger and a tag to an anchor
element on your page, this mechanism will ensure that the tag fires and has time
to execute, before the visitor is redirected to the desired page.
However, not every anchor element is supposed to perform a redirect. One such
example can be SPA pages where a
elements can serve as buttons. In such case,
the action performed inside the container can break the functionality of the page.
That is where the data-disable-delay
attribute comes in.
data-disable-delay attribute¶
data-disable-delay
is special custom attribute that is recognized by the
container. Once the anchor element is clicked and the aforementioned attribute
is detected on the element, it tells the container to skip the execution of the
logic responsible for delaying the default action. Listeners attached to the
element are executed immediately after clicking.
Example¶
Let’s assume that your Tag Manager setup includes a Custom code (async) tag (the contents of the tag does not matter in this case) and a basic Click trigger assigned to the said tag.
On your page, the following code is present:
<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>
Once the visitor clicks the link, a redirect happens. This is not desired, since the listener performs a preventDefault action.
Now let’s modify the anchor element to look like this:
<a id='link-id' href="/" data-disable-delay > link </a>
After the modification is done, clicking the link no longer performs a redirect and fires the click listener immediately.