utag.view vs. traditional integration

[martin_saoud]

We currently have the challenge that on our pages it can not be assured that all data used for our UDO is ready before loading the utag-script. We have pages where content is loaded dynamically and therefore certain UDO-parameters are only ready after a certain time.
This is the reason I currently tend towards the approach to only use utag.view() for all pages, regardless of the type of the page (to have an easier general solution).

My post is more a question about best practices, experiences of others.
Does anybody have experience on integrating Tealium on "mixed" pages? Are there any concerns? Issues? Points to be aware of?

Any feedback is welcome!

[son_hoang]

Hi Martin,

As long as you suppress the initial pageview that utag.js generates (this is the main thing to be aware of), you just need to trigger utag.view() after you know the UDO is complete. This works fine for our clients that are on Angular-style constructed pages.

[brian_kranson]

Martin

I agree with Son, however another approach is to first build up utag_data and then only after utag_data has been built would the code call utag.js. You can see some sample code in my previous post. (I uploaded the code as a file because it does not display cleanly in comments)

[martin_saoud]

Hi Son,

hi Brian,

Thanks for your answers. The approach we implemented is more or less what you described. I just wondered if others might have experienced some drawbacks using this approach, but if not, I'm happy with that!

[son_hoang]

The only issue I've seen is if a client was unable to determine when their utag_data was complete, at which case they were sometimes firing when the utag_data was not complete. If you're able to key off of when utag_data is done though you should not run into any issues.

[martin_saoud]

This is exactly an issue I also had in mind. :-)
The approach I am following right now looks like this:
- Make a distinction between "Static Rendering" and "Dynamic Rendering"
- "Static Rendering": all necessary data for the datalayer is available BEFORE loading the utag script. In this case, developers will fill up utag_data.
- "Dynamic Rendering": it can not be known if data for the datalayer is available at the loading time of utag.js. In this case, prepare data for the datalayer in a different JS object (i.e. var udo_dyn), and as soon as all data is available and utag script is loaded, call utag.view(udo_dyn)

[brian_kranson]

Martin
With the "Dynamic Rendering" I think you will also want to use

//suppress the initial pageview generated by loading utag.js
window.utag_cfg_ovrd = window.utag_cfg_ovrd || {};
window.utag_cfg_ovrd.noview = true;

Then after this object is established, load the utag.js library.
Then after you have loaded all your udo_dyn, call utag.view(udo_dyn)

See: Where can I find a list of utag_cfg_ovrd possible flags?

[brian_kranson]

With the following code, you do not need to supress the utag.view call as you will not be calling utag.js until after all of your async files have been executed.

/*
A Tealium best practice is to only call utag.js after utag_data is available.

In this example we are building the utag_data dynamically based on data coming back
from many async calls to external javaScript files.

We do not want to call utag.js until all of the extenal async calls are complete.
To accomplish this we have an object called utagDataReady which we build up each
time a javascript file completes.  Then we check if all the async calls are complete
and if they are then we load utag.js

The function tryToCallUtag is called after each async file processes.

This code has not been tested and has been written for example purposes only.

*/
function tryToCallUtag(methodName){
  window.utagDataReady = window.utagDataReady || {};
  utagDataReady[methodName] = true;
  if(utagDataReady["someMethodName"] && utagDataReady["someMethodName2"] && utagDataReady["someMethodName3"]){
    (function(a,b,c,d){
    a='//tags.tiqcdn.com/utag/services-brian/main/prod/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);
    })();
  }
}

//call first method and wait for data to come back then try to call utag.js
jQuery.getScript("http://deploytealium.com/training/library.js")
	.done(function(script, textStatus) {
		// script loaded, call the callback
    tryToCallUtag("someMethodName");
	})
  .fail(function(jqxhr, settings, exception) {
		// have some sort of fall back plan
    console.log( "Something went wrong"+exception );
});

//call second method and wait for data to come back then try to call utag.js
jQuery.getScript("http://deploytealium.com/training/library.js")
	.done(function(script, textStatus) {
    // script loaded, call the callback
    tryToCallUtag("someMethodName2");
	})
  .fail(function(jqxhr, settings, exception) {
    // have some sort of fall back plan
    console.log( "Something went wrong"+exception );
});

//call third method and wait for data to come back then try to call utag.js
jQuery.getScript("http://deploytealium.com/training/library.js")
	.done(function(script, textStatus) {
    // script loaded, call the callback
    tryToCallUtag("someMethodName3");
	})
  .fail(function(jqxhr, settings, exception) {
    // have some sort of fall back plan
    console.log( "Something went wrong"+exception );
});