Is it possible to use the variable type “DOM Element” relative to the clicked element?
If the page looks like this for example:
<div class="wrapper">
<div class="box">
<p>
Some Text
</p>
<button class="myButton">My Button</button>
</div>
<div class="box">
<p>
Some different Text
</p>
<button class="myButton">My Button</button>
</div>
</div>
And I use the DOM Element variable like this:
CSS Selector: .wrapper .box p
It will always gives me the text of the first p in this case “Some Text”. Doesn’t matter what button I click.
I would like to get the text relative to the button I clicked.
So when I click on the second button I would like to have “Some different Text” stored in a variable.
Great idea, I will try that. But will this only work for that specific element? For sure I can select the element with css selectors because in the live site it’s a bit different and this is just really simplified.
But what I initially want is to set up one variable/ tag that applies to all elements like above but get a name relative to the element. So when content of the same type is added to the page the tag will also work without any more work.
I have about 30 elements like that and I really don’t want to have 30 tags/ variables for only this simple thing
The problem is that your variable will get a fixed value, as the CSS path still remain the same.
This kind of variable is used to extract some specific value located on specific place in the page (eg. user id, custom dimension, etc.)
You have not to have 30 tags+30 variables. Just one variable, one trigger (eg. button click) and one tag (using previously defined trigger + variable).
For the variable, in the example you provided just get the clicked element (as I previously suggested), then gets the parent, then the first <p> child, then its text content…
Thank you! But what kind of variable do I use?
I can’t manage to do the last part (even as simple as it sounds to do) “get clicked element and first p of parent”.
Do you mean a Javascript variable? Or the Matomo “Variables”?
Create a Custom HTML tag with my code example, triggered by trigger of step 2. This tag will set the value you want (browsing the DOM from the clicked element - see my code example) to the JavaScript variable target by MTM variable of step 1. This tag will also have a high priority.
Create the tag you need (eg. Matomo Analytics tag) using the variable created at step 1.
Well, that’s not really an option. It’s a dynamic element that gets generated by the backend and in theory there could be unlimited elements of this type. Also the content of it could change over time. So it’s not really a good option to hardcode IDs to every element on the page
Ok it has to do with the order these tags gets executed.
I’ve already set the priority so the html tag gets fired first. But seems not to work.
I added a delay of 1ms to the second tag and now it’s working.
The only problem I see here: First I tried 1s as delay and the second tag didn’t get fired at all (probably because the user already loaded the next page in that time). So 1ms is not much, but maybe it could happen that the second tag still not fires because of the delay. Did I misunderstood the priorities how they should work?
The buttonBlockText JavaScript variable must be a global variable, declared once at the same place as your Matomo bootstrap (just before or after var _mtm = window._mtm = window._mtm || []; (in your code, it will be declared each time you click the button, and I am not sure about the variable scope in your case)
You don’t have to “create button click JavaScript trigger” as you did in your tag:
Instead, the logic of buttonText() should be the JavaScript content of the 1st tag, using the {{ClickId}}
Also, try to not use “advanced” JavaScript feature as spread ... operator:
unfortunately not… I did some try and error, but nothing worked…
I gave up on it to focus on other things, maybe in the future I have some time to get back to it (maybe in a future version of matomo where this is possible). I will update it if I have any news.
If you find a solution or something, please let me know