{"id":123584,"date":"2025-03-10T05:57:07","date_gmt":"2025-03-10T05:57:07","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/gtmtips-10-useful-custom-javascript-tricks\/"},"modified":"2025-03-10T05:57:07","modified_gmt":"2025-03-10T05:57:07","slug":"gtmtips-10-useful-custom-javascript-tricks","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=123584","title":{"rendered":"#GTMTips: 10 Useful Custom JavaScript Tricks"},"content":{"rendered":"


\n<\/p>\n

\n

I recently published a #GTMTips<\/a> guide called 10 Useful CSS Selectors<\/a>, and it was very well received. Inspired by the feedback, here\u2019s the next instalment. This time, we\u2019re going over some useful JavaScript tips and tricks that you can use to make your Google Tag Manager<\/a> deployment even more efficient. I\u2019ve written a lot<\/strong> about JavaScript in this blog<\/a>, and I intend to keep on doing so in the future. As always, if JavaScript is somewhat of a mystery to you, I strongly recommend you take the Codecademy (free) course on JS<\/a>, and take a look at the other available web technology tracks while you\u2019re there!<\/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 54: 10 Useful Custom JavaScript Tricks<\/h2>\n
\n

<\/p>\n

\"10<\/p>\n

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

You can deploy these tricks in Custom HTML Tags or Custom JavaScript Variables, since they are the only contexts within Google Tag Manager where you can execute arbitrary JavaScript. Note that some of the tricks are just code snippets, so you will need to understand enough of how Google Tag Manager and JavaScript mesh together<\/a> to be able to deploy them successfully.<\/p>\n

Before adding any of these to your deployments, remember to use caniuse.com<\/a> to check for browser compatibility, and the MDN JavaScript Reference<\/a> to find alternative ways (AKA polyfills) for writing the unsupported methods.<\/p>\n

1. String methods<\/h2>\n

String methods are utilities that you can use to modify any given string. Here are some of the most useful ones, in my opinion.<\/p>\n

\n
\/\/ Use .trim() to strip leading and trailing whitespace from a string.\n<\/span>\"   Oh no! Leading AND trailing whitespace!!   \"<\/span>.trim();\n\/\/ Result: \"Oh no! Leading AND trailing whitespace!!\" \n<\/span>\n\/\/ Use .replace() to replace characters or regular expressions with something else.\n<\/span>\/\/ .replace() without a regular expression replaces the first instance.\n<\/span>\"Food\"<\/span>.replace('o'<\/span>, 'e'<\/span>);\n\/\/ Result: \"Feod\"\n<\/span>\"Food\"<\/span>.replace(\/o\/g<\/span>, 'e'<\/span>);\n\/\/ Result: \"Feed\"\n<\/span>\n\/\/ Use .toUpperCase() and .toLowerCase() to change the case of the entire string\n<\/span>\"MixED CaSe String\"<\/span>.toLowerCase();\n\/\/ Result: \"mixed case string\"\n<\/span>\n\/\/ Use .substring() to return only part of the string.\n<\/span>\"?some-query-key=some-query-value\"<\/span>.substring(1<\/span>);\n\/\/ Returns: \"some-query-key=some-query-value\"\n<\/span>\"id: 12345-12345\"<\/span>.substring(4<\/span>,9<\/span>);\n\/\/ Returns: \"12345\"\n<\/span>\n\/\/ Use .split() to split the string into its constituents\n<\/span>\"get the second word of this sentence\"<\/span>.split(' '<\/span>)[1<\/span>];\n\/\/ Returns \"the\"\n<\/span><\/code><\/pre>\n<\/div>\n
Naturally, you can combine these in inventive ways. For example, to capitalize the first letter of any string you could do this:<\/p>\n
\n
var<\/span> str = \"capitalize the first letter of this string, please!\"<\/span>;\nstr = str.replace(\/^.\/<\/span>, str.substring(0<\/span>,1<\/span>).toUpperCase());\n<\/code><\/pre>\n<\/div>\n
Here we first identify the first letter of the string using a regular expression, after which we replace it with the first letter of the string that has been converted to upper case.<\/p>\n
2. Array methods<\/h2>\n
Array methods are really powerful in any programming language. Mastering methods such as filter()<\/code> and forEach()<\/code> is critical if you want to make your JavaScript more compact and often more readable.<\/p>\n
filter()<\/h3>\n
filter()<\/code> goes through each element in the Array, and returns a new Array for every element that passes the check you provide in the callback. Here\u2019s the syntax:<\/p>\n
\n
someArray.filter(function<\/span>(eachItem) { \n  return<\/span> eachItem === someCondition; \n});\n<\/code><\/pre>\n<\/div>\n
So eachItem<\/code> is the variable where the iterator stores each member of the Array as it is processed. If the callback returns true<\/code>, it means that the item is added to the returned, new Array. If it returns false<\/code>, it\u2019s dropped.<\/p>\n
Here\u2019s an example:<\/p>\n
\n
window<\/span>.dataLayer = window<\/span>.dataLayer || [];\nwindow<\/span>.dataLayer.push({\n  'event'<\/span> : 'addMe!'<\/span>\n},{\n  'event'<\/span> : 'doNotAddMe!'<\/span>\n});\n\nvar<\/span> newArray = window<\/span>.dataLayer.filter(function<\/span>(item) {\n  return<\/span> item.event === 'addMe!'<\/span>;\n});\n\/\/ Returns: [{'event' : 'addMe!'}]\n<\/span><\/code><\/pre>\n<\/div>\n
The iterator checks every single item for the property event<\/code>, and returns true<\/code> if that property has value addMe!<\/code>. Thus the returned array only has those elements that have the key-value pair \"event\" : \"addMe!\"<\/code>.<\/p>\n
forEach()<\/h3>\n
Remember the clumsy for-loop for iterating over an Array? Yuck! Instead, you can use the forEach()<\/code> iterator.<\/p>\n
forEach()<\/code> receives each item in the array one-by-one, and you can then do whatever you wish with this item. The syntax is very simple and intuitive, and thus should be preferred over the confusing for-loop.<\/p>\n
\n
var<\/span> array = [\"I\"<\/span>, 4<\/span>, 2<\/span>, true<\/span>, \"love\"<\/span>, [1<\/span>,2<\/span>,3<\/span>], {chocolate: 'too'<\/span>}, \"you\"<\/span>];\nvar<\/span> newArray = [];\n\narray.forEach(function<\/span>(item) {\n  if<\/span> (typeof<\/span> item === 'string'<\/span>) {\n    newArray.push(item);\n  }\n});\n\nnewArray.join(\" \"<\/span>);\n\/\/ Result: \"I love you\"\n<\/span><\/code><\/pre>\n<\/div>\n
As you can see, it\u2019s more readable than a for-loop, as you don\u2019t have to access the original array in the iterator.<\/p>\n
map()<\/h3>\n
The map()<\/code> iterates over each member in the array, again, but this time the code in the callback is executed against each member of the array, and a new array is returned with the results. Here\u2019s how to set it up:<\/p>\n
\n
array.map(function<\/span>(item) {\n  return<\/span> doSomething(item);\n});\n<\/code><\/pre>\n<\/div>\n
In other words, you are mapping<\/em> each element in the array against the result of the callback function. Here\u2019s are some examples:<\/p>\n
\n
var<\/span> array = [1<\/span>,2<\/span>,3<\/span>,4<\/span>,5<\/span>];\narray.map(function<\/span>(item) {\n  return<\/span> item * 2<\/span>;\n});\n\/\/ Result: [2,4,6,8,10]\n<\/span>\nvar<\/span> array = [\"  please     \"<\/span>, \"  trim\"<\/span>, \"     us  \"<\/span>];\narray.map(function<\/span>(item) {\n  return<\/span> item.trim();\n});\n\/\/ Result: [\"please\", \"trim\", \"us\"];\n<\/span><\/code><\/pre>\n<\/div>\n
reduce()<\/h3>\n
The reduce()<\/code> method is often the most complex one, but it actually has a very simple principle: You provide the function with an accumulator, and each member of the array is then operated against this accumulator. You can also provide an initial value to the accumulator. Here\u2019s what the basic structure looks like:<\/p>\n
\n
array.reduce(function<\/span>(accumulator, item) {\n  accumulator.doSomethingWith(item);\n  return<\/span> accumulator;\n}, initialValue);\n<\/code><\/pre>\n<\/div>\n
This time, it\u2019s definitely easiest to learn via examples:<\/p>\n
\n
\/\/ Example: calculate the sum of all even numbers in the array\n<\/span>var<\/span> array = [1<\/span>,6<\/span>,3<\/span>,4<\/span>,12<\/span>,17<\/span>,21<\/span>,27<\/span>,30<\/span>];\narray.reduce(function<\/span>(accumulator, item) { \n  if<\/span> (item % 2<\/span> === 0<\/span>) { \n    accumulator += item; \n  }\n  return<\/span> accumulator; \n}, 0<\/span>);\n\/\/ Returns: 52\n<\/span>\n\/\/ Example, concatenate a string of all product IDs in array\n<\/span>var<\/span> array = [{\n  \"id\"<\/span> : \"firstId\"<\/span>,\n  \"name\"<\/span> : \"T-shirts\"<\/span>\n},{\n  \"id\"<\/span> : \"secondId\"<\/span>,\n  \"name\"<\/span> : \"Pants\"<\/span>\n},{\n  \"id\"<\/span> : \"thirdId\"<\/span>,\n  \"name\"<\/span> : \"shoes\"<\/span>\n}];\narray.reduce(function<\/span>(accumulator, item) {\n  accumulator.push(item.id);\n  return<\/span> accumulator;\n},\u00a0[]).join();\n\/\/ Returns: \"firstId,secondId,thirdId\"\n<\/span><\/code><\/pre>\n<\/div>\n
3. Ternary operator<\/h2>\n
The ternary operator is just a very simple shorthand for running conditional checks in JavaScript. Here\u2019s an example:<\/p>\n
\n
\/\/ BEFORE:\n<\/span>if<\/span> (something) {\n  somethingElse();\n} else<\/span> {\n  somethingDifferent();\n}\n\n\/\/ AFTER:\n<\/span>something ? somethingElse() : somethingDifferent();\n<\/code><\/pre>\n<\/div>\n
The ternary operator is thus used to combine an if-statement into a simple expression. First you provide an expression that evaluates to a truthy<\/a> or falsy<\/a> value, such as me.name() === \"Simo\"<\/code>. Then you type the question mark, after which you write an expression that is executed if the first item evaluates to a truthy<\/em> value. Finally, you type the colon :<\/code>, after which you type the expression that is executed if the first item evaluates to a falsy<\/em> value.<\/p>\n
\n
\/\/ BEFORE:\n<\/span>if<\/span> (document<\/span>.querySelector('#findThisId'<\/span>) !== null<\/span>) {\n  return<\/span> document<\/span>.querySelector('#findThisId'<\/span>);\n} else<\/span> {\n  return<\/span> \"Not found!\"<\/span>;\n}\n\n\/\/ AFTER:\n<\/span>return<\/span> document<\/span>.querySelector('#findThisId'<\/span>) ? document<\/span>.querySelector('#findThisId'<\/span>) : \"Not found!\"<\/span>;\n\n\/\/ EVEN BETTER:\n<\/span>return<\/span> document<\/span>.querySelector('#findThisId'<\/span>) || \"Not found!\"<\/span>;\n<\/code><\/pre>\n<\/div>\n
4. return {{Click URL}}.indexOf({{Page Hostname}}) > -1<\/h2>\n
This is very Google Tag Managerish. It\u2019s a simple Custom JavaScript Variable that returns true<\/code> if the clicked element URL contains the current page hostname, and false<\/code> otherwise. In other words, it returns true<\/code> if the clicked link is internal, and false<\/code> if it takes the user away from the website.<\/p>\n
\n
function<\/span>() {\n  return<\/span> {{Click URL}}.indexOf({{Page Hostname}}) > -1<\/span>;\n}\n<\/code><\/pre>\n<\/div>\n
5. return {{Click URL}}.split(‘\/’).pop()<\/h2>\n
Again, a simple Custom JavaScript Variable. This is especially useful when tracking file downloads<\/a>, as it returns the actual filename of the downloaded item. It does this by returning whatever is in the clicked URL after the last \u2018\/\u2019.<\/p>\n
\n
function<\/span>() {\n  \/\/ Example: https:\/\/www.simoahava.com\/downloads\/download_me.pdf\n<\/span>  return<\/span> {{Click URL}}.split('\/'<\/span>).pop();\n  \/\/ Returns: download_me.pdf\n<\/span>}\n<\/code><\/pre>\n<\/div>\n
6. Create a random, unique GUID<\/h2>\n
Every now and then it\u2019s useful to create a random ID in GTM. For example, if you want to measure session IDs<\/a>, or if you want to assign a unique identifier to each page hit, you can achieve this with the following Custom JavaScript Variable.<\/p>\n
The variable creates a GUID string (\u201cGlobally Unique Identifier\u201d), and even though uniqueness isn\u2019t guaranteed, it\u2019s still very likely. There\u2019s only a microscopically small chance of collision.<\/p>\n
This solution is gratefully adapted from this StackOverflow post<\/a>.<\/p>\n
\n
function<\/span>() {\n  return<\/span> 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'<\/span>.replace(\/[xy]\/g<\/span>, function<\/span>(c) {\n    var<\/span> r = Math<\/span>.random()*16<\/span>|0<\/span>, v = c == 'x'<\/span> ? r : (r&0x3<\/span>|0x8<\/span>);\n    return<\/span> v.toString(16<\/span>);\n  });\n}\n<\/code><\/pre>\n<\/div>\n
7. Return an ISO-formatted timestamp<\/h2>\n
This is one of my favorite solutions, as it lets you convert the current client time to a proper, readable timestamp. In addition, it has the timezone offset included, so you\u2019ll know just how much the users\u2019 local times differ from your own timezone. I send this to Google Analytics with every single hit<\/a>, so that I can create a timeline of events when analyzing the data.<\/p>\n
This solution is gratefully adapted from this StackOverflow post<\/a>.<\/p>\n
\n
function<\/span>() {\n  var<\/span> now = new<\/span> Date<\/span>();\n  var<\/span> tzo = -now.getTimezoneOffset();\n  var<\/span> dif = tzo >= 0<\/span> ? '+'<\/span> : '-'<\/span>;\n  var<\/span> pad = function<\/span>(num) {\n    var<\/span> norm = Math<\/span>.abs(Math<\/span>.floor(num));     \n    return<\/span> (norm 10 ? '0'<\/span> : ''<\/span>) + norm;\n  };\n  return<\/span> now.getFullYear() \n    + '-'<\/span> + pad(now.getMonth()+1<\/span>)\n    + '-'<\/span> + pad(now.getDate())\n    + 'T'<\/span> + pad(now.getHours())\n    + ':'<\/span> + pad(now.getMinutes()) \n    + ':'<\/span> + pad(now.getSeconds())\n    + '.'<\/span> + pad(now.getMilliseconds())\n    + dif + pad(tzo \/ 60<\/span>) \n    + ':'<\/span> + pad(tzo % 60<\/span>);\n  \/\/ Returns, for example: 2017-01-18T11:58:32.977+02:00\n<\/span>}\n<\/code><\/pre>\n<\/div>\n
8. .matches() polyfill<\/h2>\n
When working with the Document Object Model (DOM), being able to identify elements is crucial. We already have a bunch of wonderful CSS selectors<\/a> at our disposal, but now we just need a method we can use to check if any given element matches one of these selectors.<\/p>\n
Well, there\u2019s the Element.matches(someSelector)<\/code> method that you can use, but it doesn\u2019t have stellar browser support, even with prefixes<\/a>. With this solution, you can always use .matches()<\/code> without having to worry about browser support. This trick is called a polyfill<\/strong>, as it patches lack of feature support with a workaround using JavaScript that is universally supported.<\/p>\n
First, here\u2019s how the method works in general:<\/p>\n
\n
\/\/ Check if the parent of the clicked element has ID #testMe\n<\/span>var<\/span> el = {{Click Element}};\nconsole.log(el.parentElement.matches('#testMe'<\/span>));\n\/\/ RESULT: true or false, depending on if the parent element matches the selector.\n<\/span><\/code><\/pre>\n<\/div>\n
In Google Tag Manager, you\u2019ll need a Custom HTML Tag that fires as early as possible in the container load sequence (i.e. All Pages trigger with a high tag priority).<\/p>\n
Here\u2019s the code you need to add to the Custom HTML Tag. It\u2019s gratefully adapted from this MDN reference page<\/a>.<\/p>\n
\n
script>\n  if<\/span> (!Element.prototype.matches) {\n    Element.prototype.matches = \n      Element.prototype.matchesSelector || \n      Element.prototype.mozMatchesSelector ||\n      Element.prototype.msMatchesSelector || \n      Element.prototype.oMatchesSelector || \n      Element.prototype.webkitMatchesSelector ||\n      function<\/span>(s) {\n        var<\/span> matches = (this<\/span>.document<\/span> || this<\/span>.ownerDocument).querySelectorAll(s),\n            i = matches.length;\n        while<\/span> (--i >= 0<\/span> && matches.item(i) !== this<\/span>) {}\n        return<\/span> i > -1<\/span>;            \n      };\n  }\nscript<\/span>><\/code><\/pre>\n<\/div>\n
The polyfill modifies the actual prototype of the Element<\/code> object, which all HTML and DOM elements inherit from. After modifying the prototype, you can use the matches()<\/code> method with confidence in all your GTM and site JavaScript.<\/p>\n
9. DOM traversal<\/h2>\n
Sometimes it\u2019s necessary to climb up (or down) the Document Object Model. For example, if you\u2019re using a Click \/ All Elements trigger<\/a>, it always targets the actual element that was clicked. But that\u2019s not always necessarily the element you want to track! Say you have an HTML structure like this:<\/p>\n
\n
a href<\/span>=\"takemeaway.html\"<\/span>>\n  button id<\/span>=\"clickMe\"<\/span>>\n    span>Click Me!span<\/span>>\n  button<\/span>>\na<\/span>><\/code><\/pre>\n<\/div>\n
\n
function<\/span>() {\n  var<\/span> el = {{Click Element}};\n  while<\/span> (!el.matches('a'<\/span>) && !el.matches('body'<\/span>)) {\n    el = el.parentElement;\n  }\n  return<\/span> el.matches('a'<\/span>) ? el : undefined<\/span>;\n}\n<\/code><\/pre>\n<\/div>\n
NOTE! This relies on the matches()<\/code> method, so don\u2019t forget to implement the polyfill from above, first!<\/p>\n
This Custom JavaScript Variable climbs up the DOM until it reaches the first link element it finds ('a'<\/code>), after which it returns this element. If it doesn\u2019t find a link, it returns undefined<\/code> instead.<\/p>\n
10. Set browser cookies with ease<\/h2>\n
Cookies are a great, if somewhat outdated, way of storing information in the browser<\/a>. Since Google Tag Manager operates in the context of a web page, it is essentially stateless. Thus any information you want to persist from one page to another must be stored either in the server or the browser itself. The latter is far easier to do, and with browser cookies it\u2019s just a question of adding a couple of lines of code to your GTM deployment.<\/p>\n
First, you need a Custom JavaScript Variable. You can name it {{Set Cookie}}<\/strong>, for example.<\/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
This Custom JavaScript Variable returns a function that takes five parameters:<\/p>\n
Now, if you use a Click \/ All Elements trigger, the element that is captured in the click is the <\/code>. But I\u2019m guessing you actually want to use the <\/code> element, since you\u2019re more interested in knowing what happens after<\/em> the click. So, you can use this Custom JavaScript Variable to return the nearest link above the clicked element in the DOM tree:<\/p>\n
To implement the polyfill<\/a>, either ask your developers to add it to the site JavaScript as early as possible in the page load sequence, or use Google Tag Manager.<\/p>\n
As you can see, sometimes there are even more efficient ways to process JavaScript statements than the ternary operator. Especially when working with simple binary checks (if value exists, return it), it might be better to just use basic logical operators<\/a> instead of complex statements or expressions.<\/p>\n