Your variables don’t get filled with the information you want to track? With Relative Click Variables you will be able to pull in information relative to the interaction you tracked. n this video, let’s go through the steps setting up a Relative Click Variables
Step by Step:
Enable your generic click trigger + Built-In Variables
Click on the element
Retrieve the latest value of the gtm.element in the Dev Tools with google_tag_manager[“GTM-XXXX”].dataLayer.get(‘gtm.element’)
Use the command .parentElement and querySelector to get to your desired output
The google_Tag_manager object https://www.youtube.com/watch?v=WdPxW-AttKw
When you set up a click trigger, you click the button and in your variables, only the click text and click URL get filled out. But you’re really interested in values that are surrounding your click, how can you set this up? In today’s video, I’m going to show you how you can set up relative click variables which is a bit of an advanced technique in auto-event tracking, all and more coming up.
Welcome back to our demo shop. On this demo shop. I already have Google Tag Manager installed. And I want to now create a variable relative to my click. What does this mean? Well, let’s imagine here on this product page of this product, I click the Add to Cart button. I’ll do this with the command keypress. We see with our click trigger installed a click event within our preview mode here. And when we look at the variables, we can see how they got filled. So for example, we have our click classes right here, we have our click element, click ID didn’t get filled, the target didn’t get filled. And the click text is add to cart. This is all fine if I just want to track the button. But what if I wanted to track information relative to this button click. So for example, I wanted to track how much was the product price of this product relative to the add to cart click. Or what was the product name relative to the add to cart click or what was the image URL so that these variables get filled. Even though I go to another product and have here completely different set of variables.
And when we hover over it, we can actually see in our pages in the background that now our button is highlighted. Now, this is the element that the trigger recognizes once you click the button. What we’ll do now is to climb up the DOM tree. What does this mean? But if I right-click here and just click on reveal and elements panel, we’ll go over to the elements panel right here, and we will see the DOM tree. Now, this is the element that we have selected. What we will do need to do now is climb up this tree just like this and get to our H1 element, the product title here, happy Ninja, which we want to then pull out. How can we do this? Well, let’s go back to the console. And now we’ll choose a command that will climb up the tree. We can choose to command parent element. And I simply press Enter. And here we get the next parent element to the clicked element here which is our form class right here.
Now what we will see is that our product title here is that not yet highlighted because the parent element is actually not within that tree structure that we just climbed. She went to visualize this again, to go back to the elements pain, we just climbed from here to here. And we’ll go the next step and climb to the next parent element, which would be the summary entry. So let’s do that by just clicking the up arrow will get the last command back, don’t have to type this all over again, and put in again a dot parent element, press Enter whoops, or get an arrow, I written everything correctly. So let me just see inside of our preventive mode, you see, I generated another click. So now obviously, the relationship changed. And we have not our button click anymore as the GTM element. Let me just see what is now as the UTM element in the data layer. It is just the background of our premium development. Okay, so let’s go through the steps again, we click on Add To Cart.
This time, I should have my GTM element which is my button. And now I’m going to attach our parent element and parent element again. And this time we see we are now on this summary class, this div class. It actually encapsulates our h1 as well. Again, we reveal this and the elements panel. You can see we are right here right now. Now we need to go one deeper again, or go search through the children of this parent element to find our product title. You can see here this is h1 and product title as a class. So we can simply choose the CSS selector to select this item. We will go over to console again and I press the up arrow and this time I’m going to choose a command called query selector. And in parentheses and quotation marks, we can put in our CSS selector, in our case it would be h1 and then dot product_title. Let’s try this. And we get our result back right here. Now we are now at the right element. And now we want to just pull the text out that is within this element. And we can do this with the command.innertext, press Enter. And this is the result that we want to get in our variable later on happy ninja.
Okay, and here we are at the same element again. So maybe we need to put in another parent element, another parent element. See if this encapsulates our product title. No, not yet. you hover over it just this here. So we need to go even further way up. Here we go. Now it encapsulates it. And we can again do our query selector, and our h1.producttitle. Alright, so here we go. Here we have our inner HTML or inner text. This is the product type that we want to have out. So let’s try this out again. I’m going to copy this all because now we went a step further which should also still work for our old product. But we will need to try out. That’s also just a Tag Manager, you will need to test, test, and test again. So will refresh and go back to our page. On this page, since we have tested it, it should work. I’m going to add this to cart, and the product title should be your ideas. So this is correct. Let’s go back to our old product. And add this to cart. And our variables. Now it say product title is happy ninja. Let’s go to another product and add this to cart. And here’s our product title whoo ninja. That is also correct. So now we have adjusted our relative click variable to always pull out the correct product name relative to the click that we have down here. Now you can use this technique in many different circumstances. You just need to know a little bit how you can pull out the right values from the DOM tree and know how to get to the right element by using parent element and then the query selector to search through the DOM tree, select the right element, then pull out the right value. Now that we have this variable setup, you can obviously use it in your triggers. Or also intact deployments directly inside of customization tag like the Facebook Pixel, or inside of a Google Analytics event tag to transfer this all over to Google Analytics. But I trust you will be able to set this up by yourself. Don’t forget at the end, if you want to have this live on your website, submit the version, give it a name. And then this tracking will be deployed to all your users.
All right, so there you have it. This is how you can set up relative click variables. And I don’t know let me know in the comments down below. Is this something that you already knew? Or is this something that you use often on? And where would you use this. I oftentimes uses with a click trigger but it would totally be possible to also use with the scroll tracking or with the element visibility trigger if you know what you’re doing. So I’d be interested in your use cases. Leave me a comment down below. And if you haven’t yet, then consider subscribing to our channel because we bring you new videos just like this one every week. My name is Julian till next time.