{"id":100309,"date":"2025-02-20T22:54:03","date_gmt":"2025-02-20T22:54:03","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/gtmtips-create-utility-variables-by-returning-functions\/"},"modified":"2025-02-20T22:54:03","modified_gmt":"2025-02-20T22:54:03","slug":"gtmtips-create-utility-variables-by-returning-functions","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=100309","title":{"rendered":"#GTMTips: Create Utility Variables By Returning Functions"},"content":{"rendered":"


\n<\/p>\n

\n

In Google Tag Manager<\/a>, the Custom JavaScript variable<\/a> is an anonymous function<\/strong> with a return<\/code> statement. It does not take any parameters, and by default it\u2019s impossible<\/strong> to pass any parameters to it, because the Custom JS variable is simply resolved to whatever value the function returns. If it returns a number, for example, passing a parameter to it would make no sense and would result in a TypeError<\/code> since the variable resolves to a number, not a function.<\/p>\n

However, you can actually have the variable return a function<\/strong>. You can use this to create your own utilities<\/strong>, which take parameters and, in turn, return some new value based on the calculations done with the variables.<\/p>\n

This isn\u2019t a novel discovery – variables returning functions are at the core of how things like hitCallback<\/code><\/a> and customTask<\/code><\/a> work. In this article, I\u2019ll explain a bit further what you can do with these utility variables.<\/p>\n


\n X<\/span><\/p>\n

\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n

\n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n

<\/span><\/p>\n

Tip 97: Create utilities with the Custom JavaScript variable<\/h2>\n
\n

<\/p>\n

\"Return<\/p>\n

<\/a><\/p>\n<\/div>\n

A function<\/strong> which returns a function<\/strong> has plenty of use in JavaScript. It\u2019s sometimes called a closure<\/strong><\/a> because it has access to the lexical scope of the wrapping function even after that function has ended execution.<\/p>\n

In Google Tag Manager, using the function as a closure isn\u2019t necessarily the biggest perk, because Custom JavaScript variables are designed to be ephemeral – simply processing things in scope (e.g. other variables), and then returning the result of this processing.<\/p>\n

However, when you return a function<\/strong> which accepts parameters in a Custom JavaScript variable, you can create a utility that can be invoked from Custom HTML tags and other Custom JavaScript variables without having to always rewrite the same code in all the places you need to the utility.<\/p>\n

For example, let\u2019s say you want to create a browser cookie<\/strong> in a Custom HTML tag. You have some options:<\/p>\n

\n
script>\n  \/\/ Option 1: Create a global method\n<\/span>  window<\/span>._setCookie = function<\/span>(name, value, ms, path, domain) {\n    if<\/span> (!name || !value) {\n      return<\/span>;\n    }\n    var<\/span> d;\n    var<\/span> cpath = path ? '; path='<\/span> + path : ''<\/span>;\n    var<\/span> cdomain = domain ? '; domain='<\/span> + domain : ''<\/span>;\n    var<\/span> expires = ''<\/span>;\n    if<\/span> (ms) {\n      d = new<\/span> Date<\/span>();\n      d.setTime(d.getTime() + ms);\n      expires = '; expires='<\/span> + d.toUTCString();\n    }\n    document<\/span>.cookie = name + \"=\"<\/span> + value + expires + cpath + cdomain;\n  };\n  \n  window<\/span>._setCookie('someCookieName'<\/span>, 'someCookieValue'<\/span>);\n  \n  \/\/ Option 2: Directly call the document.cookie API\n<\/span>  document<\/span>.cookie = 'someCookieName=someCookieValue'<\/span>;\n  \n  \/\/ Option 3: Use a Custom JavaScript variable\n<\/span>  {{Set Cookie}}('someCookieName=someCookieValue'<\/span>);\nscript<\/span>><\/code><\/pre>\n<\/div>\n
Option 1<\/strong> creates a utility method, too, but it adds it to the global namespace. Yes, this has the added benefit of being available to all your Custom HTML tags and Custom JavaScript variables, and actually any other script<\/strong> running on your site, even outside GTM. Assuming these other tags and scripts run after<\/strong> the _setCookie<\/code> global method has been created with this tag, that is.<\/p>\n
The downside is that you\u2019re polluting the global namespace<\/strong>. You\u2019re reserving a key that might be overwritten or accessed by any other JavaScript running on the site. If only scripts within GTM need this method, you\u2019d be better off with some other solution.<\/p>\n
Option 2<\/strong> is simple in that you don\u2019t need a function at all, you\u2019re directly writing the cookie. With the example above it\u2019s really the simplest way to go about it. However, as soon as you need to do some extra processing, such as determining on which domain or path to write the cookie or what its expiration should be, you\u2019ll add lines and lines of code, and all of these lines need to be rewritten in any other tag where you also want to write a cookie.<\/p>\n
Option 3<\/strong> is what this article is about. Instead of adding the _setCookie<\/code> method into the global scope of the page, you can use Google Tag Manager\u2019s Custom JavaScript variables to handle the logic for you. The variable would look like this:<\/p>\n
\n
function<\/span>() {\n  return<\/span> function<\/span>(name, value, ms, path, domain) {\n    if<\/span> (!name || !value) {\n      return<\/span>;\n    }\n    var<\/span> d;\n    var<\/span> cpath = path ? '; path='<\/span> + path : ''<\/span>;\n    var<\/span> cdomain = domain ? '; domain='<\/span> + domain : ''<\/span>;\n    var<\/span> expires = ''<\/span>;\n    if<\/span> (ms) {\n      d = new<\/span> Date<\/span>();\n      d.setTime(d.getTime() + ms);\n      expires = '; expires='<\/span> + d.toUTCString();\n    }\n    document<\/span>.cookie = name + \"=\"<\/span> + value + expires + cpath + cdomain;\n  }\n}\n<\/code><\/pre>\n<\/div>\n
As you can see, it\u2019s almost the same as Option 1<\/strong>, except instead of assigning the function to a global variable, you\u2019re returning<\/strong> it in the Custom JavaScript variable. And because you return the function, you can then invoke it with the parameters name, value, ms, path, domain<\/code>, and have the function handle writing the cookie for you.<\/p>\n
Assuming you\u2019ll name that Custom JavaScript variable as Set cookie variable<\/strong>, this is how you would invoke it from a Custom HTML tag or a Custom JavaScript variable:<\/p>\n
\n
{{Set cookie variable}}('cookieName'<\/span>, 'cookieValue'<\/span>, 100000<\/span>, '\/'<\/span>, 'simoahava.com'<\/span>);\n<\/code><\/pre>\n<\/div>\n
This is just one example. You could also\u2026<\/p>\n