Best place for the utag.js ?

[ivan_ascierto]

I've read in several posts and in the quick guide that the best practice is to place utag.js the closest to the opening body tag as possible. But what I haven't read so far is the why. What's the technical issue of placing it "lower" in the body of the page? More, what disadvantage can we have if we place it right before the body closure trying not to impact the general site's performance?

Thanks in advance for your answers and if my questions were already answered please feel free to redirect me to them since I haven't found it.

[son_hoang]

Hi Ivan,

1. I think you're asking why we recommend putting it in the 'body' instead of the 'head' when you say lower? The reason being is that some tags assume the 'body' element is already created when they run. Depending on your implementation, the browser may still be downloading/parsing out the HTML and the tag won't work properly if the 'body' isn't actually there yet. Putting the utag.js in the 'body' ensures the 'body' is there and thus the greatest compatibility with most tags.

2. It's to give you more flexibility while emphasizing the performance you're talking about.

By default, utag.js is set to wait for DOM ready before it fires. This means you'll only be loading the utag.js file, and not all your tags/libraries, thus prioritizing your site's performance. At the same time, this ensures the utag.js is ready to fire your tags the moment DOM ready occurs.

But let's say you need to fire a tag sooner than DOM ready (maybe a survey tag), you can do that selectively with urgent tags, and leave the others to load later after DOM ready. You wouldn't be able to do that if utag.js loaded at the end of the 'body' tag.

[ivan_ascierto]

Thanks Son! I know the body tag is the best place to put my utag.js instead of the header. But, what I'm asking is the difference of placing the utag.js closer to (closure body tag) rather than closer to the (opening body tag).

[son_hoang]

Traditionally, most web developers would put JS files at the end of the 'body' because everything used to be synchronous: if your JS file was on a third-party server and that server was down, it would cause your webpage to go down.

With asynchronous loading, this isn't an issue, and you can gain the flexibility I described before by having it closer to the top of the 'body'.

If you're interested in talking about this in greater detail, please contact your Account Manager so we can set up a time. That would give us more time to talk about specific use cases we've encountered.

[dan_george · Accepted solution]

With the utag.js at the top of the body...

You are able to use testing tools that require being ran at the top of the page. There are a few other vendors that prefer being at the top of the body as well - I can't exactly remember who.

We can overwrite the default functionality to wait until DOM Ready and fire tags much sooner in the page if needed. This is helpful on some pages or sites that can take several seconds to load.

We can do some pre-processing of data in the background so that when DOM Ready occurs we can just fire tags instead of having to run the whole library from scratch.

Other tags aren't very smart and only look for DOM Ready. If we are fired at the bottom body and DOM Ready occurs before the tag is triggered then the tag will have missed the event and never fire. We try to update logic to handle this at times.

Our recommendation is to have utag.js at the top of the body because you will get 100% of the functionality of Tealium now and in the future. Otherwise, with us at the bottom you lose some of the features and support we have available.

[jared_hislop]

"More, what disadvantage can we have if we place it right before the body closure trying not to impact the general site's performance?"

There are a couple disadvantages. Son mentioned one where you don't have the ability to load certain tags earlier in page load if you need to.

The other disadvantage would be that all vendor libraries would have to load at the end of the page load. This would affect how quickly the server calls that send data to your vendors are triggered. This leaves more time for your visitors to navigate away from the page before the server calls are sent, which means there won't be any tracking for that page.

Performance shouldn't be an issue. Like Son pointed out, if you're loading the utag.js Asynchronously then the page will continue to load while the Tealium library is loading and pulling in the vendor libraries. Thus Tealium and the vendor libraries will not block or inhibit anything else from loading.