Preload jQuery

[pceric]

My site used to use jQuery but we are moving away from it and no longer want to have any references to it in our site code.  Our analytics team wants to keep using it, so we are basically telling them "fine, but you have to load it".  What is the best way for them to load it in Tealium, to make sure any tags and extensions that require it will have access to it?

Here is what I currently did, but I don't think this 100% ensures synchronous loading so could be subject to timing issues where jQuery still isn't loaded before other Tealium scripts try to use it:

Created a "pre loader" scoped JavaScript extension with this code in it:

if(!window.jQuery) {
  var script = document.createElement('script');
  script.src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
  script.async = false;
  document.body.appendChild(script);
}

On the surface, "it works", I can see window.jQuery is set after the page loads, tags that use jQuery are working... just worried about timing issues I might be missing.

Sorry if asked and answered but hard to find via search because "jquery" has 1,000s of hits and so does "preload" or anything similar.

[UnknownJ · Accepted solution]

Hi @pceric,

Personally, I would just stick jQuery into TIQ and have done with it. Drop the full (minified) jQuery library into a preloader extension, and then end it with:

window.utag.$ = jQuery.noConflict( true );

Means there's no risk of collisions between your version and anyone else's, keeps the $ variable clean on the site if you don't want it to run jQuery (and don't want people mistakenly thinking that it's built in rather than something that Tealium is dropping on) and prevents any timing issues. Increases the size of utag.js but removes the need for an additional network connection over HTTPS to a domain that's probably not being accessed otherwise, so you're saving a whole secure handshake out of the network traffic for basically the same overall file size.

[BenStephenson]

There is a jQuery tag that can be used. From the docs:

This tag inserts jQuery (version 1.9.1) as a Preloader Scope (the jQuery library is included at top of utag.js file)This tag will load on every page and is not compatible with load rules.

I've used that a few times, along with a preloader scoped extension containing:

window.jQueryTealium = jQuery.noConflict(true);

We then used jQueryTealium in other extensions rather than $.

This was to work around the site developers lazy-loading the jQuery library so it wasn't always present when we needed it in Tealium extensions.

[pceric]

Thanks @BenStephenson and @UnknownJ!  So far this is testing out well.  At first glance it appears that tags and extensions using $() and jQuery() are working without modifications.  At first I would think I would have needed to conver those to use window.utag.$ or utag.$ instead of just $ or jQuery, because of the noConflict line -- but maybe some scoping things going on that I do not yet understand.

Worst case I'll just remove the noConflict part and still use this idea to inline the script, for the other benefits you mention.