How to Pull Data Relative to the Clicked Element in Google Tag Manager?

Do you know how to get information relative to a click event in Google Tag Manager? With a relative click variable, you will be able to pull in information relative to the interaction you tracked. 

This can give an edge to your analytics with the additional information that you collect. For example, in an eCommerce shop, you can get details such as product name and product price relative to the click on a product page.

In this guide, we will learn the steps to set up a relative click variable using a Custom JavaScript Variable in Google Tag Manager.

An overview of what we will cover in this guide:

• What is Data “Relative to the Click Element?”
• Prerequisites to Pull Data Relative to the Clicked Element
• Pulling Data Elements Using Google Developer Tools
• Setting Up a Custom Javascript Variable
• Testing the Relative Click Variable
• Debugging the Relative Click Variable

So let’s jump in!

What is Data “Relative to the Click Element?”

Data relative to the click element is any data on the web page that is not captured with click variables.

So, welcome back to our demo shop. On this website, I already have Google Tag Manager installed. 

Now, we want to create a variable relative to a click. So what does this mean? Well, let’s take an example where you click the Add to Cart button on the product page. 

So we already have our click trigger installed and we can take a look at the click event within our preview mode.

When we look at the Variables, we can see the ones that got filled. 

Here, we have our Click Classes and Click Element, which got filled. But, the Click ID and Click Target didn’t get filled. Also, we can see the Click Text is Add to cart. 

Now, this is sufficient if we just want to track the button. But what if we want to track information relative to this button click. So for example, we wanted to track the product price, product name, or the image URL relative to the Add to cart click.

Even if we go to another product and have a completely different set of variables, we should be able to fetch these new variables.

We can do this with a Custom JavaScript variable. So let me show you how to set this up for our product name i.e. we should be able to pull the product name relative to the Add to cart click.

Prerequisites to Pull Data Relative to the Clicked Element

Now as a prerequisite, you will need to have a trigger installed which is a simple click trigger. Here, the Event Type will be All Elements. 

Let us see how to set this up. First, to create a new trigger, we need to click on the New button. Next, we’ll name the trigger click. 

Then to configure the trigger, click under Trigger Configuration and Choose trigger type as All Elements. You can choose either Just Links or All Elements. 

Under the option This trigger fires on, choose All Clicks without any filters attached to it.

So this will deploy the listener functionality of our trigger. 

And then click on the Save button to set up the trigger. This will push data when we click anywhere on the webpage, into the preview, and to the data layer. Now that Google Tag Manager is registering clicks, we need to set up a variable.

As already mentioned, this will be a Custom JavaScript variable. So realistically, you should know a bit about JavaScript and CSS in order to configure this. But for this guide, we’ll show you the step-by-step process. 

The first step is to reload our page and click on the Add to cart button. So we will see a Click Element in the Events menu of our preview mode.

Pulling Data Elements Using Google Developer Tools

Now, this click gets transferred to the data layer along with certain elements. What we want to look at is the GTM element which is an object in the HTML button element. 

So what does this mean? And how can we see this? For this, we need to open up our Developer Tools.

So we go to the Chrome menu and then to More Tools → Developer Tools. 

This takes us to the Elements panel. But, we need to go to the Console panel. We’ll type in the command in the Console pane to see what is stored in this gtm.element.

Firstly, we’ll type google_tag_manager to access the GTM JavaScript object. And then in square brackets with quotation marks, we’ll type in our GTM Container ID.

You can find the GTM Container ID in your preview and debug mode as well. If you already have it stored it will be auto-filled for you in your Developer Tools Console. 

And then we’ll attach a dot and access the data layer. Here, we type dataLayer (with a capital L). 

Then we type another dot and we’ll get a key from our data layer. So the command will be get(). Inside the parentheses with quotation marks we’ll put in the key which is gtm.element. 

When we press the enter key we get a return statement.

And when we hover over this return statement, we can see on our webpage in the background that our Add to cart button is highlighted. So, this is the element that the trigger recognizes once you click the button. 

What we’ll do now is climb up the DOM tree.

Now, what does this mean? First, we’ll right-click and select Reveal in Elements panel. 

This takes us to the Elements panel where we can see the DOM tree. What we will do now is climb up the DOM tree and get to our h1 element which is the product_title. 

In our case, the value of this element is Happy Ninja. This is what we want to pull out. 

So how can we do this?

Well, let’s go back to the Console panel. Here, we will enter a command that will climb up the tree i.e. .parentElement, and press the Enter key. So we will get the next parent element to the clicked element. 

Here the next parent element is the form class.

Now we see that our product title is not yet highlighted because the parent element is actually not within the tree structure that we just climbed. 

So we’ll climb to the next parent element, which would be summary entry.

We can enter the previous command again by pressing the up arrow key. So we don’t have to type this again. And then we add .parentElement and press the Enter key.

So we are now on the summary entry class. This encapsulates our h1 as well. 

Again, we will right-click and select Reveal in Elements panel. We can see in the DOM tree that we need to search through the children of this parent element to find our product_title.

We can see h1 and product_title as a class. 

So we can simply choose the CSS selector to select this item. We will go over to the Console panel again and press the up arrow. 

This time we will enter the querySelector() command. And in parentheses and quotation marks, we can put in our CSS selector. 

In our case, it would be h1.product_title.

Let’s try this. When we press the Enter key we get our result back. And we can see that we are now on the right element. 

And now we want to pull the text that is within this element. We can do this by adding the command .innertext. And then press Enter. 

This will return the product title, i.e. Happy Ninja in our case.

Setting Up a Custom Javascript Variable

So we have now completed our command, and we can copy it into a Custom JavaScript variable. 

To do this, we’ll go under User-Defined Variables, and click on the New button to create a new variable. We’ll name it cjs-Product Title.

Now, click under Variable Configuration and Choose variable type as Custom JavaScript.

It’s important to know that Custom JavaScript needs to have a function that returns a value.

So we will write a function that returns a value. And then we can copy and paste our command from the developer console and click on the Save button.

Testing the Relative Click Variable

Let’s Refresh our preview and debug mode. 

We will then go back to our webpage, reload it and click on the Add to cart button. When we do this, we can see that the cjs-Product Title is Happy Ninja in the Variables menu. 

Now, let’s try this out on a different product. So we will go to the next product and click on the Add to cart button. But under the Variables menu, the cjs-Product Title is undefined.

Let’s see why this is undefined.

Debugging the Relative Click Variable

This can happen sometimes if the HTML markup has changed. It may also happen if there are some more elements in the product, or if it’s marked up differently. So let’s see how to debug this. 

First, we need to enter our last command with the up arrow key and press Enter. This returns an error warning.

So let’s first get rid of our innerText HTML command. And when we press Enter it returns a null value. 

This means we can’t fetch anything from h1 as well. So let’s move further and delete h1.product_title. 

This takes us to our second parent element. But this element doesn’t encapsulate our product title either. So we will go back further and remove the second .parentElement command.

Okay, we are now at the Add to cart element which is our clicked element. 

So we need to put in another parent element and keep adding further to see if this encapsulates our product title. 

And once we find it we can again enter .querySelector and .h1.product_title.

Alright, so here we go. Let’s fetch the .innerText of the product title and press Enter. 

So let’s try this out again. We will copy this command and paste it into the Variable Configuration of Google Tag Manager.

We will then Refresh our preview and debug mode and reload our webpage. 

On this page, let’s click on the Add to cart button and we can see that the cjs-Product Title variable under the Variables menu is ‘Ship Your Idea’. 

Hence, this is correct. Now, let’s go back to our old product, add it to the cart and we should be able to see the cjs-Product Title as Happy Ninja. 

Similarly, we can check it for other products as well.

Thus, we can say that we have successfully adjusted our relative click variable to pull out the correct product name relative to the click on the webpage. 

You can use this technique in different circumstances. You just need to know how you can pull out the right values from the DOM tree using .parentElement and .queryselector. 

Now that we have this variable setup, we can use it in our triggers or also in Tag deployments directly inside of customization Tags like the Facebook Pixel or the Google Analytics event Tag. 

And I’m sure you will be able to set this up by yourself. 

Now, in the end, don’t forget to Submit the version and give it a Version Name so that the changes can go live on your website. Then, this tracking will be deployed to all your users.

Summary

This is how you can set up relative click variables. A relative click variable will give you a more precise picture of user behaviour on your website.

And if you’re interested you can also set it up with scroll tracking or element visibility trigger. 

While this is done using a Custom JavaScript variable, we also have a guide on the Top 10 Google Tag Manager Variables. And if you need help to get started on Google Tag Manager, you can sign up for our free beginners’ guide:

Let us know in the comments below if this is something that you use often. Where might you use this technique on your own website?