Parameter Based Tracking: In's and Out's

Parameter based tagging in Google Tag Manager (GTM) has become an essential strategy for modern digital analytics. It allows you to track user interactions on your website in a more granular and flexible way by using parameters—typically attributes or data points attached to DOM elements—to fire tags when specific events occur. One of the keys to success in this approach is the use of specific attribute IDs that not only group like elements together but also distinguish them from one another. This level of detail is crucial in complex sites where similar elements might exist across different sections or pages.

The Importance of Specific Attribute IDs

Imagine a scenario where your website features multiple “Subscribe” buttons. Without specific attribute IDs, GTM might struggle to determine which button was clicked, leading to ambiguous data in your analytics reports. By assigning a unique identifier (or even a well-structured data attribute) to each button, you create a clear signal that GTM can use to fire the correct tag. This precision helps ensure that your analytics captures meaningful insights that drive decision-making.

For example, if two subscribe buttons share the same class name but have different IDs, you can configure your triggers to differentiate between the two. This makes it possible to determine not just that a subscribe action occurred, but precisely which button was responsible—information that can be vital when testing new page layouts or call-to-action designs.

Implementing Parameter Based Tagging in GTM

Let’s dive into a few code examples that demonstrate how to use parameter based tagging with specific attribute IDs.

Example 1: Simple ID-based Triggering

Here’s a basic example where an HTML button is assigned an ID, and a corresponding GTM trigger is set up to fire when that button is clicked:

<!-- HTML Button with a specific ID -->
<button id="btnSignUp">Sign Up Now</button>        

In GTM, you would create a Click Trigger that uses a CSS selector to target this specific button:

// GTM Trigger: Click - All Elements
// Trigger Conditions: Click Element matches CSS selector "#btnSignUp"        

This setup ensures that whenever the “Sign Up Now” button is clicked, GTM fires the appropriate tag to record the event.

Example 2: Using Data Attributes for Flexibility

Data attributes offer a flexible way to pass additional information. Here’s an example using a data attribute to differentiate similar elements:

<!-- HTML Element with a data attribute --> <button data-cta="subscribe" id="subscribeHeader">Subscribe Now</button> <button data-cta="subscribe" id="subscribeFooter">Subscribe Now</button>        

In this case, while both buttons share the same purpose (as indicated by the data-cta attribute), their unique IDs allow for granular tracking. In GTM, you can set up a trigger that targets elements based on the data attribute:

// GTM Trigger: Click - All Elements // Trigger Conditions: Click Element attribute "data-cta" equals "subscribe"        

This configuration lets you monitor clicks on all subscribe buttons while still distinguishing them in your data layer through their unique IDs.

Example 3: Custom JavaScript Variables to Capture Attributes

Sometimes you might need to capture more dynamic data. A custom JavaScript variable in GTM can extract attribute values from the clicked element. Consider this example:

<!-- HTML Element with a custom data attribute --> <div id="promoBanner" data-campaign="spring_sale"> <a href="/sale">Check out our Spring Sale!</a> </div>        

In GTM, create a custom JavaScript variable that reads the data-campaign attribute:

function() {
  var element = {{Click Element}};
  return element.getAttribute('data-campaign');
}        

This variable can then be used in your tags or triggers to segment campaign data more precisely.

Example 4: Combining Multiple Parameters for Advanced Tracking

In some scenarios, you may want to combine several parameters to create a more detailed event description. For example:

<!-- HTML Element with multiple attributes --> <a href="/learn-more" id="learnMoreLink" data-category="education" data-action="click"> Learn More About Our Courses </a>        

A custom JavaScript variable in GTM could be used to concatenate these attributes into a single string:

function() {
  var element = {{Click Element}};
  var category = element.getAttribute('data-category');
  var action = element.getAttribute('data-action');
  return category + ' - ' + action;
}        

This combined parameter can provide richer insights into user interactions, helping you understand not only that a link was clicked but the context of that click.

Collaborative Workflow: Analytics and Development

The technical setup of parameter based tagging is only part of the equation. Equally important is the collaboration between analytics professionals and development teams. The process typically starts with the analytics team specifying the requirements—what events to track, what data is needed, and how to segment that data. They then work closely with developers to integrate specific attribute IDs and data attributes within the DOM.

During development, developers ensure that the correct syntax is implemented. This includes proper ID assignments and data attribute placements, which the analytics team has defined. Following the development phase, both teams engage in rigorous QA/QC testing. GTM’s preview mode and debugging tools become essential at this stage, as they help verify that tags are firing as expected when users interact with the designated elements.

Regular communication is key. Analytics professionals should provide clear documentation outlining the naming conventions and expected behaviors. Developers, in turn, can offer feedback regarding technical constraints or enhancements that might streamline the tagging process. This joint effort ensures that the data collected is accurate and actionable.

Parameter based tagging in Google Tag Manager, when executed with specific attribute IDs, provides a powerful framework for capturing detailed user interactions. By distinguishing similar elements through unique IDs and leveraging data attributes, you can ensure that your tracking is both comprehensive and precise. The provided code examples illustrate practical methods for implementing this approach. Moreover, a successful implementation depends on the close collaboration between analytics and development teams—from planning and coding to QA/QC testing. This collaboration not only ensures technical accuracy but also ultimately results in richer, more actionable data that drives smarter business decisions.

Check out part one: https://www.dhirubhai.net/pulse/hard-coding-vs-parameter-tagging-google-tag-manager-navigating-yale-xriye/

Feel free to drop me a line on LinkedIN or shoot me an email. I write about all types of things: data, digital life, content strategy, search strategy, agency life, analytics tips and tricks, etc.