Using utag.sync.js to inject utag.js

Tealium Expert
Tealium Expert

Is there any reason why it would be a bad idea to amend the utag.sync.js template to add the code necessary for asynchronously loading the utag.js script?


Advantages, as I see it:


  1. Tealium can be deployed onto the page with a single reference to the utag.sync.js script
  2. Gives you complete control over how the utag.js script is deployed (e.g. ability to add onerror handlers)

Disadvantages, I'll let you guys point out to me... :o)


Using utag.sync.js to inject utag.js

Employee Emeritus

@UnknownJ the primary reason is that the utag.sync.js file is to be coded into the <head> of the site and it's intent is for a few tags that require synchronous loading. The utag.js file is intended to immediately follow the <body> tag on the site. Having the utag.js load ahead of the body tag could result in unexpected behavior and may result in tags not firing correctly. While this is more of an edge case, it is certainly a possibility. So if you're already using the sync file and wanted to simplify the implementation on that page then it should be okay but it would still not be the recommend approach. 

Using utag.sync.js to inject utag.js

Tealium Employee



So as @davidcreason states this isn't how we would normally do things.


Saying that, the 2 real issues are:


  1. Document body isn't ready
  2. If you have a dataLayer, it won't be in the right order (i.e. dataLater then utag.js)


With regards to point 1) you could check for body and then do a document.write to force the creation.


Something like:

if (!document.body) {
  document.write("<span></span >");

This would be in the sync file.


Point 2) would be best solved by setting the global wait flag to force utag to fire on DOM ready instead.



Ask me anything Tealium related or TypeScript/JavaScript, or NodeJS.
Please remember to mark solutions as accepted for future searchers.