Track with Google Tag Manager without the help of developers

6 min readSep 10, 2022

Tldr; When you don’t have developer resources at hand, or you can’t modify the source code, you can’t track elements if they didn’t have any identify class or ID. You will need to identify them first, and then track them.

I read a lot of articles out there about Google Tag Manager (GTM) for non-developers. But unfortunately there is no article on how to configure GTM without developer help.

This is a common situation when you don’t have the resources on hand. (And often I’d rather do it myself than wait and depend on someone else’s help.)

Indeed, this is a completely different matter. You may not have to be a developer to understand GTM, but often you still need help from developers to install tracking on your website.

How will you manage if you don’t have the resources at hand? And in many cases, you don’t have the right to access and modify the project’s source code at all.

This article will try to help you somewhat in those situations. All you need is a GTM tag installed on your website and you are good to go.

This is not an article about GTM for beginners, and you also need a basic knowledge of JavaScript, HTML and CSS. You don’t need to be a professional developer to learn these languages.

The examples in this article are when I set up tracking for a form’s objects in a SaaS product.

Part 1: Identify the elements

When the world isn’t ready to unfold before your eyes

So.. your company has outsourced a website project. Project closed, money paid. And no one has told you that you should track every user action on the system.

You open the website HTML code and see that the developers have not set an ID or Class to identify the objects on the website. Of course, because they weren’t required to do this when signing the contract.

Such websites can often only track visits, time on page, conversion rate, etc. But it is almost impossible to track events for each object on the page.

The first thing you need to do in this case is to identify all the objects that need to be tracked on the page.

Identifying Tag

The first thing you need to do is assign Classes or IDs to the objects that need to be tracked.

Let’s create a tag with the tag type “Custom HTML” with the following content, I’ll explain it line by line:

<script> // Don't forget to add me/* Create a variable (gridFilterEl) to hold the contents of the <sd-grid-filter> tag. You can change this tag name or specify class tag in your case. For example you can replace "sd-grid-filter" with ".my-class" or "#my-id". This is the tag that surrounds the objects you need to track. */  var gridFilterEl = document.querySelectorAll("sd-grid-filter");/* Create a loop to iterate over all child objects.*/  for (i=0; i < gridFilterEl.length; i++){/* Hold child element in a variable */  var gridFilterChildEl = gridFilterEl[i]; /* I use a class called "filter-counted" to determine when I've modified the code so I don't have to do it again */   if (!gridFilterChildEl.classList.contains("filter-counted")){/* Another variable to hold the Div of the child elements. This is where all the filter fields come in and they are the ones I need to track */
      var gridFilterChildDiv = gridFilterChildEl.querySelector("div").querySelectorAll("div.col-lg-2");/* And now to build the visual reports later, I need to specify the location for the filter fields. Imagine I have a 6x6 matrix of filters to keep track of */      var x = 1;
      var y = 1;
      for (j=0; j < gridFilterChildDiv.length; j++){/* Add a class to every element. "filter-a-x-y" where a is the sequence number of the filter, x and y are its position in the matrix */

gridFilterChildDiv[j].classList.add(“filter-”+Number(j+1)+”-”+x+”-”+y);
        x++;
        if (x>6){
          x=1;
          y++;
        }
      }/* And finally add the flag class to make sure we don't have to do it again and again. I have to do this because our system uses Angular. If not flagged, this script will execute every time the user takes an action.*/      gridFilterChildEl.classList.add(“filter-counted”);
    }
  }
</script>

The Triggering

I use the “Element Visibility” Trigger Type with the “DOM Changes Observation” and Element selector “sd-grid-filter” in my case.

You should not use “Observe DOM changes” as much as possible because it can slow down your clients.

The hard part is done. You’re done in tagging the untag class to track later.

Part 2: Tracking the clicks

Tracking tag

This is where we need to track the click and push it into the dataLayer.

Let’s create another tag with the tag type “Custom HTML” with the following content.

Actually I want to get both the labels of the fields and their positions. If you only get the location, then when you build the report, you will have to do this label lookup process, and this will be quite difficult.

<script>
  var parent = {{Click Element}}.parentNode;
  
  var getLabel = function (element){
    var inspectEl;
    // Try find input
    inspectEl = element.querySelector("input");
    if (inspectEl !== null) {
      return inspectEl.getAttribute("data-qclabel");
    } 
    return "";
  }
  
  var getPosition = function (element){
    var classListArr = element.closest(".col-lg-2").classList;
    var str = "";
    for (i=0; i<classListArr.length; i++){
      if (classListArr[i].match("filter.*")!==null){
        return classListArr[i];
      }
    }
    return "";
  }
  
  window.dataLayer = window.dataLayer || [];  // Push data to GTM
  window.dataLayer.push({
    'event':'gridFilterClick',
    'eventCategory': 'Grid--Filter--Click',
    'eventAction': getPosition(parent),
    'eventLabel': getLabel(parent),
    'eventValue': '',
  });
</script>

There are two functions in this code:

The first one (getLabel) is to collect the element’s label.
The second one (getPosition) is to get the identity class we added earlier

Then I push it to dataLayer. You will need another tag to fire a custom event using the data in the dataLayer into an event on Google Analytics. You can search about this topic on Google if you don’t know how.