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.
Hey there measuregeeks.
Julian here back with another video for you.
Today, we want to talk about how to create relative click variables.
This is a bit more advanced in auto-event tracking.
So maybe not something for beginner.
But let's imagine you had a case where you have different products that you want to track
based on the click, but you are not interested in picking up the button text or the link
that is behind that button click.
But rather a value that is surrounded to this click.
So for example, the price or the image URL this product.
Well, obviously, this doesn't get filled into your variables because the click trigger oftentimes
only picks up the values that you actually clicked.
But as you know, Google Tag Manager JavaScript is versatile.
So there's always a workaround somewhere.
And today, I want to show you how you can set up relative click variables that actually
take a value that is surrounding that as relative to that click and pull that in to your variable
so you'll be able to use it in your tags, and triggers.
Now we got lots to cover.
So let's dive in.
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.
If I click Add to cart, I still want to pull the price, I still want to pull the title
or the image URL.
And I've experimented with this already.
So we can see here if I click the Add to Cart button, we get the variable price filled accordingly
because it pulls it relative to this click in to this variable.
Now this is a custom JavaScript variable.
And let me show you how to set this up at an example of our title here.
So how could we pull the title relative to the add to cart clic.
Now prerequisites for this, obviously, you will need to have a trigger installed which
is a simple click trigger.
I went with the all elements trigger.
So just to show you how to set this up, we have here in a generic click trigger which
means we choose the either just clicks or all elements.
I usually good all elements and choose all clicks here without any filters attached to
this.
And this will simply deploy our listener functionality of the trigger.
So I have to set up already.
And this will push when I click anywhere on the page, these click into my preview and
into my data layer.
Now that Google Tag Manager is registering clicks, we need to set up a variable.
As I mentioned, this will need to be a custom JavaScript variable.
And you will need to know a little bit of JavaScript and a little bit of CSS in order
to configure this correctly.
But I'm going to show you this step by step.
So the first step that we would need to go through is right here, let's reload our page.
And the first step would be to actually click on our add to cart click.
So we see a click element down here in the events menu of our preview mode.
Going to do this with the command key press so it doesn't reload the page.
And here we have our click.
Now, this click
gets transferred into the data layer with certain elements right here.
What we want to look at is the GTM element which is currently an object HTML button element.
What does this actually mean?
And how can we see this?
For this, we need to open up our developer tools.
So we go up here into Chrome menu, more tools.
And here we have our developer tools usually start out with the elements pane, we will
go with the console right here.
And now we'll type in some commands in order to see what is stored in this GTM element.
So just follow along.
We will access the GTM JavaScript object by typing Google_tag_manager.
And then in square brackets with quotation marks we'll type in our GTM container ID.
You find this up here as well in your preview and debug mode.
I have this already stored in here.
So maybe this will even be auto filled out for you in your Chrome console as well.
And then we'll attach a dot and access the data layer.
dataLayer with a capital L, another dot and then we'll get a key from our data layer,
again, in parentheses, with quotation marks we'll put in the key which we can see here
the GTM.element.
You press enter and we get a return statement.
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.
So we have completed to our command that we can now simply copy and put it into a custom
JavaScript variable.
So we'll go under user defined variables, create a new variable, custom JavaScript,
let's called it product title, and the variable will be a custom JavaScript variable.
And here we'll put in our JavaScript.
Now it's important to know that custom JavaScript needs to have an ominous function and needs
to return something.
So I'm first going to put in an ominous function and then return a statement.
Now we can just copy and paste here our statement if we had a the developer console before and
let's try this out.
Let's go and save, refresh our premium debug mode, go back to our page.
And once it's reloaded, you can click on our add to cart with our fourth element here.
And I go to variables.
And here we go, custom JavaScript product title is now happy ninja.
Now, let's try this out on a different product.
So I'm going to go over to next product here.
Should be the ID expected output, going to click on Add To Cart.
And under the click event.
We now see our product title is undefined.
So why is this undefined.
And this can happen sometimes because the HTML markup here actually changed.
Probably there's some more elements in this product, or maybe it's just marked up differently.
So let's debug this really quickly, I'm going to go ahead and just pull up my last command
with the up arrow, press enter. and correct it is not the somehow.
So let's step by step, go and get rid of our inner HTML here, we see we can actually pull
anything with h1 was just not found.
Let's go further.
And here we see that our second parent is just this element and doesn't encapsulate
our product title.
So I'm going to go back further.
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 a 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.