How know if Tealium is loaded and ready

[roberto_penzo]

Hi, we need to insert the Tealium inclusion script in a page portion loaded by ajax and i would like to know if there is a way to call the utag.link() after tealium is loaded and ready (so, there is an event that signal this?) I've tried this: in ajax page: (function (a, b, c, d) { a = '//tags.tiqcdn.com/utag/monclick/qa/ita.desktop/utag.js'; b = document; c = 'script'; d = b.createElement(c); d.src=a; d.type = 'text/java' + c; d.async = true; a = b.getElementsByTagName(c)[0]; a.parentNode.insertBefore(d, a); $(document).trigger('mkTealiumLoaded'); })(); and in page (on the page load) $(document).on('mkTealiumLoaded', function () { tealiumManager.sendEvent((cartIsOpen ? 'aggiungi step1' : 'apertura step1'), { product_sku: [product.code], product_name: [product.shortDesc.toUpperCase()] }); }); (tealiumManager is our Tealium wrapper) but, in tealiumManager.sendEvent() the utag object is undefined so i can't send the utag.link() There is a way to accomplish this? Thanks for the support Regards

[craig_rouse · Accepted solution]

Hi Roberto, You could try the following: {code:javascript} (function (a, b, c, d) { a = '//tags.tiqcdn.com/utag/monclick/qa/ita.desktop/utag.js'; b = document; c = 'script'; d = b.createElement(c); d.src=a; d.type = 'text/java' + c; d.async = true; a = b.getElementsByTagName(c)[0]; a.parentNode.insertBefore(d, a); d.handlerFlag = 0; d.onreadystatechange = function() { if ((this.readyState === 'complete' || this.readyState === 'loaded') && !d.handlerFlag) { d.handlerFlag = 1; $(document).trigger('mkTealiumLoaded'); } }; d.onload = function() { if (!d.handlerFlag) { d.handlerFlag = 1; $(document).trigger('mkTealiumLoaded'); } }; })(); {code} Full disclosure: this code is "borrowed" from the Tealium Custom Container tag. It simply triggers your "mkTealiumLoaded" event when the browser determines that the script has finished loading (using the onreadystatechange or onload method, depending on browser support). Another way would be to use a setTimeout loop to keep checking for the presence of the utag object, but I think this way is more elegant. Craig.

[ty_gavin]

Thanks Craig. If we assume jQuery, then you can use jQuery "load" and their callback function to trigger your "mkTealiumLoaded" https://api.jquery.com/load/ One more tip.. you would also most likely want to enable "Bundling" feature (in Publish Settings) to make sure your web analytics library is ready to go as well. If you use bundling and you know that utag.js has loaded, you would also know that your web analytics tag has also loaded.

[ty_gavin]

Or maybe jQuery "getScript" is preferred. :-)

[roberto_penzo]

Thanks for your response. $.getScript is better but compared to Craig solution seems it's fired a bit late.

[roberto_penzo]

Thanks for your response, works very fine! Regards