Is it possible to delay the loading of a tag until after the onLoad event has fired?

[rich_howard]

The Wait flag in the Tealium UI seems to delay until domReady, but we need finer grained control of a particular tag. Ideally we would like to do this without editing the tag template. Thanks!

[fiann_ohagan]

It's possible to do this, but only using some custom JavaScript code. There are 2 steps, and we can put both of them in a single JavaScript Code extension.

1) Fire the single tag. You can do this using the syntax utag.view({ ..data.. }, [ tag UID ]);

There is some more information here How to trigger exclusively one tag

You could use a setTimeout or an event listener on the onLoad event to fire the utag.view();

2) Suppress the normal firing.

If you put "return false;" in a JavaScript Code extension, then the tag that it is scoped to will not execute.

[craig_rouse]

Also, the "dom_complete" flag can be used to delay all tags until the load event, but this can't be controlled on a tag-by-tag basis.

To use this flag, put the following in a preloader scoped extension:

window.utag_cfg_ovrd = window.utag_cfg_ovrd || {};
window.utag_cfg_ovrd.dom_complete = true;

[son_hoang]

But you could turn off 'wait' for each individual tag to compensate if you do not want all tags delayed.

[rich_howard]

Hi Fiann, it would be great to work this up as a full coding example for our markets. Moving forward, it would also be a very useful feature in the Tealium console (tag configuration) to have fine grained control over tag firing at key page events such as onLoad(). The solution here is dependent on a tag UID, which will involve a bit of extra manual work from our teams, and is not 'business friendly' although it would work ok for now.

[stuart_roskelle]

For future users looking at this question, here is an option that will work on a tag-by-tag basis.

1) The following code needs to be placed in a javascript extension
2) any tag(s) that you would like to trigger at onload instead of dom ready should be scoped to this extension

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
};
}
}

utag.onload_flag = utag.onload_flag||{};
if(!utag.onload_flag[id]) {
if(document.readyState!="complete") {
addLoadEvent(function() {
utag.view(utag_data,null,[id]);
});
return false;
}
utag.onload_flag[id] = 1;
}

[samrat_dsouza]

Hi @stuart_roskelle,

Can this be modified to be a timeDelay (5 seconds, 15 seconds and 30 seconds) than onLoad?

e.g.

Tag1 fires on page2 after 15 seconds

Tag2 fires on page2 after 30 seconds

Tag3 fires on page1 after 5 seconds

Tag4 fires on page1 after 30 seconds and so on... another 10-20 tags of simialr config.

Thanks

Sam

[stuart_roskelle]

@samrat_dsouza, It may be possible to do, but it sounds like there will be a significant amount of workarounds since it appears you'll be adding various loading rules into the mix. I would suggest to submit this as a support ticket if possible to see if there is an alternative solution that may meet your needs better. One possible solution may be by combining tags and handling logic directly in a custom container, rather than multiple tags and extensions.

[samrat_dsouza]

Hi @stuart_roskelle,

Thanks, I thought so, I'll raise a ticket.

Thanks
Samrat

[trunguyen]

Hi @stuart_roskelle, with your solution above, does 'id' needs to be defined?

[petebradley]

Hi - just wondering if this is still the recommended way to delay tags until onLoad?