Google Tag Manager Custom JavaScript Variable examples

Sharing some custom JavaScript Variables I’ve made and used, to save them in one place for later use.

Lowercase value

Use case: Well, to lowercase something :)

Custom JavaScript Variable:

function () {
 return {{Click Text}}.toLowerCase();
 }

Parse a string and return a specific element

Use case: Split clicked element classes by empty space and return a second class (remember, counting starts from 0) to use as Event Action or Label. So for a class=”cta-btn next yellow-button” this will return “next”. Similarly, can parse Page or Click URL Path by “/“ to get a specific directory.

Custom JavaScript Variable:

function () { 
 var value={{Click Classes}}.split(" "); 
 return value[1]; 
 }

To get the last element use: 

function () {
 var value={{Click Classes}}.split(" ");
 return value[value.length-1]; // or return value.reverse()[0];
 }

Get form field value

Use case: Get the value of a form field to check if not empty (see below) and/or pass the value to Google Analytics or other Tags. Theoretically, this also could be done with Auto-Event Variable, but after some experiments I found only this solution working.

Custom JavaScript Variable:

function () {
 return document.getElementById(“email").value;
 }

Get the parent element’s inner text

Use case: You want to get the Clicked Element text, but it is not inside the clicked element and/or a link. For example <h3><span class=”icon”></span>Label</h3>. You need to look at the parent element h3 to take the “Label” text.

Custom JavaScript Variable:

function () {
 return trim({{Click Element}}.parentNode.innerText);
}

Check if the page loaded was a landing page

Use case: Run some Tags only on landing pages (first page in a visit).

Custom JavaScript Variable:

function () {
if ({{Page URL}}.indexOf("utm_source")>-1 || {{Referrer}}.indexOf("yourwebsite.com") == -1 ) {
return "true";
} else {
return "false";
}
}

Check if the value is not empty

Use case: Check if a Variable is empty to use as a Trigger condition for specific Tag launching or blocking. Return false if empty, true otherwise.

Custom JavaScript Variable:

function () { 
 if ({{form field}} == '' || {{form field}} == null ) { 
    return false; 
  } else { 
    return true; 
    }
}

Return the clicked element index (position)

Use case: You have a list of items (e.g. a slider or a link block) and want to track which link was clicked, not just the link, but its position in the list.

Custom JavaScript Variable:

function () {
var container = document.getElementById("slider");
if (container != null) {
 var slides=container.getElementsByTagName("a");
 for (i = 0; i < slides.length; i++ ) {
   if (slides[i]=={{Click URL}}) return i+1;
 }
}
return '(not set)';
}

You can also select an element by class if the block has no id. In this case, use document.getElementsByClassName(“”) and since this will return an array of elements, use container[0] to get the content.

If the slider or link block has some links before the slides, for example, navigation, you can modify the code and subtract the number of links before the actual slider from index to have numeration from 1. In this example, I’m adding 1 to have numeration from 1, not 0.

Search for a specific text on the page

Use case: Trigger a Tag only if there is a specific text present on the page. Return true if present or false otherwise.

Custom JavaScript Variable:

function () {
  var content = document.body.innerText;
  var query="Search Query";
  if (content.search(query) > -1 ) {
    return true;
  } else {
   return false;
  }
}

Return e-commerce item ids as an array for Meta

Use case: Transform GA4 e-commerce dataLayer to the format needed for Meta Tags
Custom JavaScript Variable:

function () {
  var items = {{dl - ecommerce - items}};
  var item_array= [];
  for (var i=0; i<items .length; i++){
    item_array.push(items [i].item_id);
  }
  return item_array;
}

Other examples and reading materials:

• Check if there is an embedded YouTube video on the page – part of the YouTube tracking from LunaMetrics.
• Custom variable for User ID implementation (with cookie & dataLayer)
• If you are new to GTM and Variables, I would suggest to read GTM Variable guide by Simo Ahava and after Google Tag Manager Variable examples to see some more advanced options.

Any Custom JavaScript Variables you are using a lot? Please share in the comments below.