Highlighted

How know if Tealium is loaded and ready

Rookie Contributor
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
5 REPLIES 5
Highlighted

How know if Tealium is loaded and ready

Tealium Employee
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.
Check out our new Swift integration library for iOS, macOS, tvOS and watchOS: https://github.com/Tealium/tealium-swift with updated
documentation https://community.tealiumiq.com/t5/Swift/tkb-p/swift.
Highlighted

How know if Tealium is loaded and ready

Tealium Employee
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.
Highlighted

How know if Tealium is loaded and ready

Tealium Employee
Or maybe jQuery "getScript" is preferred. :-)
Highlighted

How know if Tealium is loaded and ready

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

How know if Tealium is loaded and ready

Rookie Contributor
Thanks for your response, works very fine! Regards