Efficient GTM Setup

Setting up GTM the wrong way can lead to hundreds of tags and triggers that are completely unnecessary and make GTM hard to manage. In the following we'll describe how to set up one powerful trigger-tag-combination that helps you with a good baseline tracking. Let's get started.

Most of the times, what you'll want to track is a click. To set up a trigger that fires when ANYTHING is clicked, head over to the triggers section, create a new trigger and select the trigger type "click". In order to restrict your tracking to elements that actually should get tracked, add a restriction that looks like this: [data-tracking-id], [data-tracking-id] * (credits to https://medium.com/@postman31/conquer-nested-elements-clicks-tracking-in-gtm-71195a3f609b). This allows you to track clicks on HTML Elements that have a data-tracking-id attribute. This second part ([data-tracking-id] *) is necessary to track clicks on nested elements such as a click on a span in a button, when it is actually the button that has the data-tracking-id property.

Next what we'd like to do is to send an "Event" to Google Analytics. An event is a Google Analytics concept. Basically it is a database entry in the Google Analytics database with four fields: category (mandatory), action (mandatory), label (optional but recommended) and value (optional non-negative integer). Note that if you don't adhere to this, your data will not get stored to Google Analytics! Anyways, we'd like to set up the event with the following data:

Now this leaves us with two problems. How can we get the last part of the url and the data-tracking-id-attribute-value of the clicked element? The answer is a GTM "Custom JavaScript Variable" in both cases! Create a new user-defined variable and select Custom JavaScript as the variable type. This lets you run custom JavaScript through GTM on your page. This is an extremely powerful, but also an extremely dangerous thing to have. Anyone with access to your GTM account can execute custom JavaScript on your production page with this! So keep your GTM account well secured. But back to the actual problem. To get the value of the data-tracking-id attribute, we'll use the following code:

function() {
    var hasTrackingId = function(elt) {
        return elt.hasAttribute('data-tracking-id');
    };
    var getTrackingId = function(elt) {
        if (elt == null || elt === document.body) {
            return 'no-data-tracking-id-attribute';
        } else if (hasTrackingId(elt)) {
            return elt.getAttribute('data-tracking-id');
        } else {
            return getTrackingId(elt.parentElement);
        }
    };
    return getTrackingId();
}

And to get the last part of the URL we'll use this code snippet in another custom variable:

function() {
    var fullPath = ; // something like '/en/.../overview'
    if (!fullPath || fullPath === '/') {
        return 'root'
    } else if (fullPath.charAt(fullPath.length - 1) === '/') {
        fullPath = fullPath.slice(0, fullPath.length - 1); // remove the final slash if there is one
    }
    var pathParts = fullPath.split('/'); // something like ['en', ... , 'overview']
    return pathParts[pathParts.length - 1];
}

We made use of the built in variable page-path here.

With this we finally have it all together. A good baseline tracking, and all of this with 1 tag and 1 trigger!

A final word of caution: If your company or project has strict rollout guidelines, it might not be appropriate for you to set up those custom JavaScript GTM variables directly in GTM. In GTM you won't have git as source control (even though GTM is also versioned) and more importantly, once you'll hit "Submit" everything will be live instantly (unless you introduce different environments).