How to make a JavaScript library with global functions work in Tealium?

[jrmy]

We have a couple of old legacy JavaScript libraries that are full of global functions. We'd like to migrate these into Tealium, but the functions become unaccessable on the pages due to the way Tealium wraps everything in their function templates.

Is there any other way to migrate these, other than to go through the JavaScript files and update every function to be on the window rather than scoped to the Tealium wrapper?

[craig_rouse]

Hi @jrmy

My recommendation is to make these libraries "Pre Loader" scoped javascript extensions. Pre loader extensions do not get wrapped in any function, and anything pasted here is global by default.

I hope this helps.

Best,

Craig.

[jrmy]

One problem with that is that it then doesn't go through the load rules. We don't want this code included on every single page.

[jrmy]

@craig_rouse - The work-around we are going with right now is to put all of the code in the tag template. Not a fan of this, becuase now we have to maintain code in multiple places. We'd rather see Tealium provide a tag template that will load an extension without any Tealium wrappers. Or maybe you can suggest a way to setup the template to pull from the extension without wrapping in any Telium code?

[craig_rouse]

@jrmy

This is also possible using a tag template, so long as you don't have "bundling" enabled on your profile (if you do, the code will be loaded on all pages and won't obey load rules). Take a look at the "Tealium Custom Container" tag, and read the instructions in the comments. Around line 22, there's a comment that says "Start tag library code" followed by "End Tag Library Code". If you place your library code in here, the tag will still obey load rules, and the library code will be loaded in the global scope. I think this will achieve exactly what you want. Just be aware that if any assets on the page are dependent on this library code (both inside and outside of Tealium), then due to asynchronous loading, there's a chance the functions within the code won't be available when you expect them to be. Assuming the code has no other dependencies, this approach should work fine.

The best way to guarantee that your library is loaded at the correct point in time is to use a pre loader extension, and use javascript conditional statements ("if..else") to determine when the code should be called, but this still wouldn't work if there are other scripts on the page loaded before Tealium that rely on functionality in the libraries that are loaded asynchronously by Tealium.

[jrmy · Accepted solution]

@craig_rouse

I think our replies may have crossed paths. Good to know we were on the same path here as you outlined. As I mentioned, the biggest reason we don't like this is that code now has to be maintained by our team in extensions (generally), and now we have this one-off tag where all the code is maintained in the tag template. Just not very clean when we have a team of 10 maintaining various implementations. A work-around that seems to do the job, but not one we feel is scalable across the enterprise.

Here's our flow, I'd love to hear your feedback on our approach:

1. Pre-Loader extension sets the window.utag_cfg_ovrd = {noview:true};
2. Same extension does some page setup related things, then calls utag.view(utag_data, [1]); where 1 = our tag with the global functions in the tag template. Setups custom event listener.
3. At the end of our code in the tag template, we dispatch a custom event.
4. Custom event listener in the pre-loader fires calling utag.view(utag_data); resuming the load of the rest of our tags.

[craig_rouse]

@jrmy as you've discovered, Tealium IQ is very customizable, and can do pretty much anything within reason. That being said, it wasn't designed as a CMS, and is best suited to sending data to 3rd parties asynchronously, rather than loading global JS or managing content.

The solution you've described sounds like it achieves your end goal and allows you to manage some of these scripts within Tealium (with a few little hacks :-), and I can't see anything wrong with that approach if it works for you. The only problem is that you now have a slight delay while waiting for your library code, so tag sending will be marginally slower than it would otherwise have been without this library code.

I'm glad you've been able to find a solution to this problem. Let me know if there's anything else I can help with.

[adrian_browning]

@jrmy

If you want to load from an external file through Tealium, you can do this. And it will be wrapped in the loading code that is needed.

All you need to do, is use for example a Custom Container tag, and go Advanced Settings > Custom Script Source. And place the URL of the file you want to load. 

Adrian

[marcus_lunn]

Following on from @jrmy great idea; another solution is to load the global tag as a 'regular' tag and when it's complete call 'utag.link' in the callback with a custom event parameter (e.g. 'GlobalFinished'). Setup any dependent tags to only fire on utag.link ( u.ev = {'link' : 1}; ) and configure the load rules to look for the 'GlobalFinished' event parameter. 

This has an advantage of not blocking any other tags loading while the global functions are being added to the page but still guarantees that the dependent tags wait for the global tag to complete. 

This was my approach for Google's global gtag JS where a number of other Google tags rely on this being present before firing (e.g Google Analytics, Google AdWords etc...)