How to pre-load individual tag JS files to optimise page load

Tealium Expert
Tealium Expert

Let's say I've got a website, let's call it "Realium IT". It has a two-step logon journey, and I want to add a new tag to the second page (after primary authentication has been successful) in order to build an audience of "existing customers". But, I've got an IT team who will go spare if I increase their "End User Response Time" metric by adding another tag JS file to the page (meaning an additional 4kb to be downloaded but also another HTTPS socket to open). The logon journey is a critical one, we can't be going around slowing it down.

What we can do is pre-load that tag file on the preceding page (in the background, after page load has completed) so that it's already cached when the customer reaches the page on which the tag should fire. This can be done by adding an additional function to TIQ, e.g. through a DOM Ready JS extension:

utag.loader.preloadTag = function(t,o,u){
  u = utag.cfg.path + "utag." + t + ".js?utv=" + utag.cfg.template + this.cfg[t].v;
  try{
    o = document.createElement('object');
    o.data = u
    document.body.appendChild(o);
  } catch(e){
    // msie fallback? or don't bother?
  }
};

So if I want to load Tag ID 27 in an inert state, without it being loaded into the utag object, I can then simply run:

utag.loader.preloadTag(27);

So I could, for example, create another JS extension that runs the following convoluted script:

if(window.location.pathname === '/login_1.asp'){
$(window).on('load', function () { window.setTimeout(function() { utag.loader.preloadTag(27); }, 1000); });
}


Which effectively says "if we're on the first login page, wait until the window has finished loading, then wait another second, and then pre-load tag ID 27". Upon hitting the second login page, the user's browser will simply retrieve the tag from the cache, and they won't need to request or download the file, moving those activities out of the critical path to page loading on the second page, and into spare time on the first.

1 REPLY 1

How to pre-load individual tag JS files to optimise page load

Tealium Expert
Tealium Expert

Thanks for this write up @UnknownJ.  How can we mark it as a [possible] Solution to help other readers/users?

Tealium Expert
Public