Variable DOM Element relative to clicked element

Tag Manager
#1

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.

Is that somehow possible?

#2

Maybe you can create a tag like this:

image
image1260×678 18.8 KB

Then “play” (browsing the DOM) with the clicked variable to achieve what you want…

#3

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

#4

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…

#5

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”?

#6

I made a little mistake…

  1. Create a variable of type JavaScript Variable
  2. Create the click trigger
  3. 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.
  4. Create the tag you need (eg. Matomo Analytics tag) using the variable created at step 1.
#7

Ok great, so far “working”. My variable is still undefined, but that has to do with my DOM selection.

You used getElementById({{ClickId}}) but my element I click on has no ID, because I have multiple elements on the page (ID can’t be unique then).

When I use {{ClickElement}} will this give me a proper ID made by matomo? Or what do I get back from that?

Edit:
{{ClickElement}} is null
and using getElementsByClassName won’t work either because then I have all the elements on the page with that class…

#8

Then add some ids in your code…

Look at:

[…] an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking […], scripting, or styling.

#9

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

#10

Easy way to add unique IDs. Just use guid, then your Ids will be generated by then backend and will be unique!

#11

I got it nearly working.

This is my setup:

  • Matomo JavaScript Variable:
    Name: Button Parent Content
    Javascript Variable: buttonBlockText

  • Trigger:
    Name: Button click
    Type: click on all elements
    CSS selector to my button

  • First tag:
    Type: Custom HTML
    Trigger: Button click
    Priority: 777
    My script:

<script>
var buttonBlockText;
var buttonEvent = [...document.getElementsByClassName({{ClickClasses}})];
var button = [...document.getElementsByClassName({{ClickClasses}})];
buttonEvent.forEach(click => {
  click.addEventListener("click", buttonText);
})


function buttonText() {
  buttonBlockText = this.parentElement.parentElement.parentElement.firstElementChild.innerHTML.trim()
  console.log(buttonBlockText)
}
</script>
  • Second tag:
    Type: Matomo Analytics
    Trigger: Button click
    Priority: 999
    Event Name: {{Button Parent Content}}

I tried to change the priorities arround with no success.
The console logged variable is correct and defined. It is the value it should have.

Only problem: The matomo variable is undefined for some reason

So the the eventname in the analytics is undefined.

Any idea what went wrong?

#12

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?

#13

You did not proceed as I suggested…

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: