Trigger for Vue/Vuetify buttons?

Data collection and tags
1

Hi there! Newbie Piwik data digger in trouble over here :slight_smile:
For some reason button click triggers work with only some buttons, depending on the syntax in the codebase. Our app uses Vue/Vuetify. Here is a working and a non-working trigger to illustrate.

Scenario 1: Working trigger/button combo:
Trigger: Click Element is a child of #startDiscussionBtn (css)
Codebase:
<v-btn id="startDiscussionBtn" @click="startPresentation">{{ $t("buttons.start") }}</v-btn>
Rendered HTML:
<button type="button" class="v-btn" id="startDiscussionBtn"><span class="v-btn__content">Start</span></button>

Scenario 2: NOT working trigger/button combo:
Trigger: Click Element is a child of .closeTaskBtn (css)
Codebase custom button component:

<task-button class="closeTaskBtn" @click="close" :label="$t('buttons.done')"></task-button>

Rendered HTML:
<button type="button" class="task-btn closeTaskBtn v-btn"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-check"></i><span>Done</span></span></button>

In scenario 2 there are nested elements within the button and it seems that for some reason the trigger won’t reach high enough to read and match parent element’s class .closeTaskBtn?

I’ve tried to modify the trigger to “click classes contains .closeTaskBtn”, but that didn’t do the trick either and I am about ready to lick the wallpaper out of desperation. Would dearly appreciate some advice!

2

Not sure if this will help, but have you tried checking the output of the click? Is there an eventlistener to capture the click on the second button?

What happens if you add this to the browser console and click the button?

document.addEventListener('click',(e) =>
  {
    // Get element class(es)
    let elementClass = e.target.className;
      console.log(elementClass);
  });

You should see a list of classes within the button. Is the class present there?

You may have to configure the target-part to get the right parentNode:

document.addEventListener('click',(e) =>
  {
    // Get element class(es)
    let elementClass = e.target.parentElement.className;
      console.log(elementClass);
  });

I’m not an expert in Javascript or Vue at all, but there are times when an eventlistener goes missing and Piwik can’t capture a click-event. In that case I would add a tag with one of these scripts to make sure it is activated. We use Vue as well in our application.

Hope this helps a bit!

Br.
Martin

1 Like
3

Thank you for answering! The eventlisteners are logging either “v-btn__content” or empty classlist depending on where on the button exactly I click. My buttons have nested content so that’s expected I guess. But I assumed Piwik’s code will keep looking up in the HTML nodes until the parent classlist is matched. Seems like currently it’s bugged.

Could you perhaps add in more detail what you meant by “I would add a tag with one of these scripts”? Can I somehow “tell” Piwik to look to the click element’s upper nodes?

4

No unfortunately not. Piwik will not traverse the DOM nodes unless you write a specific javascript to do so. I don’t know enough javascript to confidently say how to do it, but I believe you need to use the closest-function to do this. Here’s a possible solution:

Hope this helps!