Tag: javascript

As a frequent user of Google Tag Manager (GTM), I often find myself reusing the same blocks of code across multiple tags and variables, especially when working with browser cookies, string manipulation, or custom logic. Repeating code not only clutters your workspace but also increases the chances of inconsistency and errors.

To solve this, I use a modular approach by creating helper functions through Custom JavaScript variables. These helper functions can then be reused across your GTM implementation with minimal overhead.

Implementation Steps

• Go to Variables in your GTM workspace.
• Create a new User-Defined Variable > Type: Custom JavaScript.
• Paste your helper function inside, wrapping it as shown below.
• In your tags or other variables, reference the helper function using {{variableName}}.
• Assign it to a local variable before using it.
• Execute it, passing the parameters defined in the function.

Example 1: setCookie

This function sets a cookie with a name, value, and expiration date (in days). Follow the implementation steps defined above and use the next code for your setCookie variable:

function(){
  var setCookie = function(cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + (exdays*24*60*60*1000));
      var expires = "expires="+ d.toUTCString();
      document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  }
  return setCookie;
}

Your custom JavaScript variable should look like this:

Example2: getCookie

This function retrieves the value of a cookie by name. Follow the implementation steps defined above and use the next code for your getCookie variable:

function(){
  var getCookie = function(cname) {
      var name = cname + "=";
      var decodedCookie = decodeURIComponent(document.cookie);
      var ca = decodedCookie.split(';');
      for(var i = 0; i <ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') {
              c = c.substring(1);
          }
          if (c.indexOf(name) == 0) {
              return c.substring(name.length, c.length);
          }
      }
      return "";
  }
  return getCookie;
}

Your custom JavaScript variable should look like this:

How to Use These Functions

In any tag or variable with custom JavaScript code, reference the function like this:

var setCookie = {{setCookie}};
setCookie("userType", "premium", 30);

Or

var getCookie = {{getCookie}};
var userType = getCookie("userType");

Best practice: Save the returned function in a local variable before calling it. This ensures the function is evaluated only once per execution context and avoids repeatedly invoking the GTM variable.

Benefits of GTM helper functions

• Modularity: Define once, use everywhere.
• Performance: Saves compute cycles by avoiding repeated parsing and execution.
• Maintainability: Centralizes logic, making updates faster and safer.
• Readability: Keeps your tag code clean and focused.

Conclusion

By using this pattern, you gain more control over your GTM container’s architecture and performance. This method is particularly useful in complex implementations where modularity and efficiency are key.