Highlighted

how to use utag.link on DOM load

Rookie Contributor

I would like to use utag.link() to send Tealium events for internal promotions once the DOM has loaded on a given page like:

jQuery(document).ready(function() {
utag.link({data goes here});
}

(I made sure that this loads towards the end of the page)

At the time of execution, utag isn't available yet and hence its throws a "utag is not defined" error.

Is there a way to execute such code when "utag" is available? perhaps a callback function from utag.js?

Please advise.

3 REPLIES 3
Highlighted

how to use utag.link on DOM load

Tealium Employee

You can use:

jQuery(window).load(function(){
utag.link({data goes here});
}

Highlighted

how to use utag.link on DOM load

Rookie Contributor

I have read that window.load may not be consistent across browsers, especially considering mobile browsers.
I am using the following approach currently:

// when utag.js is available within page source, trigger utag.link calls
jQuery('script[src*="utag.js"]').on('load', function() {
// utag.link calls here...
});

Highlighted

how to use utag.link on DOM load

Employee Emeritus

If you have the ability to edit source code on your page, something like this could work:
http://stackoverflow.com/questions/20492677/loading-asynchronous-js-file-readystate

Basically editing the way you load utag.js and firing a callback. The method you suggested would run into issues if somehow it executed after utag.js finished loaded before that statement is even reached (a real possibility with file caching). The 'load' would never trigger because it's already loaded.