As a best practice, we always recommend using a standard implmentation of Tealium whenever possible, but sometimes other methods need to be employed to ensure that Tealium can execute as necessary within the constraints of the site or application where it is being implemented.

The below implementation of Tealium's utag.js code is intended to be utilized by users with advanced knowledge of Tealium when a utag.view() or utag.link() event must be triggered BEFORE the utag.js file has loaded on the page. This code will capture those events and queue them so that when the utag.js file does load, it is able to still process those events. This code can be useful if there are timing issues that cannot be corrected based on how the website or application has been built.

Below are three steps needed to implement this structure for handling events.

Update the Universal Tag Code

First, replace the code that loads utag.js on the page with the code defined below. This code defines the event tracking queues for utag.view() and utag.link().

This step requires work from your developers, as this change will need to be made within your site's source code and NOT within Tealium. Also, please ensure that your developers replace the ACCOUNT, PROFILE, and ENVIRONMENT noted below in the arrows with the actual information for your account/profile.

(function(w,u,a,b,c,d){
    if(w.utag)return;u=w.utag={};u.e=[];
    u.view=function(a,b,c){u.e.push({a:a,b:b,c:c,d:"view"})};
    u.link=function(a,b,c){u.e.push({a:a,b:b,c:c,d:"link"})};
    u.track=function(a){u.e.push({a:a.data,b:(a.cfg?a.cfg.cb:null),c:(a.cfg?a.cfg.uids:undefined),d:a.event})};
    a='//tags.tiqcdn.com/utag/<<ACCOUNT>>/<<PROFILE>>/<<ENVIRONMENT>>/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);
}(window));

 

Pre Loader Extension

The below code will need to be added to the Tealium profile loading on the page as a "Preloader" scoped JavaScript code extension. This code moves the events into the "utag_events" queue scoped at the "window" level and then removes the "utag" object so that utag.js will build up as needed.

// put the utag_events into the window scope as utag_events
// then delete utag so that the utag.js will build up as needed
(function(w) {
     if (typeof w.utag !== 'undefined' && typeof w.utag.e === 'object') {
        w.utag_events = w.utag.e;
        delete w.utag;
    }
}(window))

 

DOM Ready Extension

Finally, add the last extension as a "DOM Ready" scoped JavaScript code extension. This code will loop through the window level array (from the "Preloader" extension) and call the utag.track() function as necessary. The utag.track() function will then use the "view" or "link" defined by the event in the queue to trigger either a "view" or "link" event to the utag.js file.

// loop through the window level array utag_events and call utag.track as necessary 
// utag.track will use the view or link or any event as well as the callback or list of tag ids
(function(w) {
    if ((typeof w.utag_events === 'object' && w.utag_events.length > 0)) {
        while (w.utag_events.length) {
            d = w.utag_events.shift();
            (function(d) {
                setTimeout(function() {
                    utag.track({
                        event: d.d,
                        data: d.a,
                        cfg: {
                            cb: d.b,
                            uids: d.c
                        }
                    });
                }, 150);
            })(d);
        }
    }
}(window))

 

Testing

To test your events, ensure that a utag.view() or utag.link() function is being triggered in your page BEFORE the utag.js file has loaded. When the page loads, you should be able to see the queued events trigger and flow through the utag.js file.

Version history
Last update:
‎03-11-2021 01:45 PM
Updated by: