How do define a function in JS extension which is later accessible by page code?

[tomas_balciunas]

Let's say I want to define following function in JS extension: function log(){ console.log('test'); }. How do I make sure that this function will be accessible for the page code? As I can see by default function defined in extensions are not accessible from the page code.

[jared_hislop]

Hey Tomas, You just need to make the function global. Tealium will wrap all JS Extensions in a separate local function so if the function within the JS extension isn't global it won't be accessible. Try something like: window.log = function(){ consol.log("test"); }

[Clint]

Hey Tomas, in order to declare a global function within a JavaScript extension is pretty simple. Basically, we need to declare the function as a global var. So, using your example above, it would be coded like this: window.log = function() { console.log('test'); } When the JavaScript extension is published out, your function will look something like this: utag.handler.extend = [ function(a, b) { window.log = function() { console.log('test'); } } ]; but the function is now declared at the window level and is accessible by other extensions on the page.

[allan_tomkinson · Accepted solution]

You should be able to define a global function inside of the extension as long as you aren't using the "var" keyword in front of the function declaration. If you use: var logtest = function() { console.log('test'); } The function object will be created with the current execution scope, so only accessible from the utag.handler object (with might be within another execution scope as well instead of being globally accessible, I'm just going off of the code presented here.) If you use: logtest = function() { console.log('test'); } Then the lack of the "var" keyword will cause Javascript to create your function at the global object scope, unless there is something else going on with the Tealium extension code that I'm not aware of, but standard Javascript typically works this way. With this question you are dipping into something that has confused a lot of people over the years and led to a lot of bugs and made a lot of problems difficult to debug. There are a couple of good answers to a similar question over at StackOverflow that go deeper into the technicalities if you are interested: http://stackoverflow.com/questions/1470488/difference-between-using-var-and-not-using-var-in-javascr... Also, you also shouldn't have to assign your function to an object that is at the global scope, like "window". A lot of people consider it a bad idea to do so, and there is a good blog post detailing why here: http://perfectionkills.com/extending-built-in-native-objects-evil-or-not/

[son_hoang]

Just to note though that if you are inserting utag.js asynchronously on the page, but calling a function defined within utag.js on the page itself, you may run into the problem where your page called a function that hasn't loaded yet, resulting in an "undefined" error.

[allan_tomkinson]

Very good point. Async timing issues can be difficult, but since functions in Javascript are objects it's pretty easy to check for their existence before using them. It's a bit more script but can save you trouble in the long run. I also recommend to send a warning message to the browser console for debugging purposes if you do the check and the function does not exist.