-
Hi there,
The below landing page has got 5 CTA buttons which we would like to track individually.
To achieve that we have…
– assigned a unique css class to each gb-button
– set up an Element Click as a trigger and
– added a ClickClass filter (in Matomo Tag Manager) to capture each button event separatelyDuring the test (see recording) we found out that the „css-class“ is only being tracked if the gb-button is not wrapped inside a container.
Please advise on how to fix that.
Thanks,
Jan -
Hi there,
I don’t see the video, it says “Content is being uploaded”.
Can you check?
– set up an Element Click as a trigger and
– added a ClickClass filter to capture each button event separatelywhat does that mean? Are you using any JS code for that? If so, can you provide the code?
-
Hi Ying,
please revisit the above link to the video.
Both bullet points relate to settings in Matomo Tag Manager.
There is no JS involved.
Best,
Jan -
Hi there,
you will need to address the issue with the Tag Manager.
All we do is add HTML with the CSS classes to the page. How it tracks your actions is not in our control. Check with their support. -
Hi David,
thanks for getting back. I did follow your advice and shared the details about the issue with the support team @matomo.
I’ll let you know as soon as I here back from them.
Best,
Jan -
You’re welcome
-
Hi David,
meanwhile, the Matomo team came back asking us to “…use the
buttonclass instead of thespanclass for the button in the container”.How would you implement this up in the “Advanced” settings of the gb-button block?
Thanks,
Jan -
Hi Jan,
If they are referring to the markup, you may replace the Button Block’s markup from span to button through the “Button Type” option in the Advanced settings. Example: https://share.zight.com/E0uJYYmj
-
Hi Fernando,
thanks for pointing me there. The truth is, we are using the
buttonmarkup already ;-/I asked the matomoto team to review the video recording once more and then come back with more helpful advice.
There is no action required on your end for the moment 😉
Best,
Jan -
Hi there,
we did some further testing and found out that the issue is not caused the container that wraps the button, but rather by the svg-icon of the button.
The icon SVG HTML is this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" width="1em" height="1em" aria-hidden="true"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" fill="currentColor"></path></svg>When we replace the svg-icon by a favicon icon like
[icon name="route" prefix="fas"]the css-class does get detected by the event tracker.How do you treat gb-buttons with svg-icons differently which in turn prevents the event tracker from recognizing the css-class?
Thanks,
Jan -
When you add a SVG Icon to a Button it will wrap the button label in a
<span>tag.
What exactly is the Matamo tracker meant to do? as the additional span should make no difference if its tracking clicks on the<button>tag. -
Hi David,
thanks for sharing these details.
The tracker is supposed to track the click-event AND to record the related css-class of the button.
Reasoning: The landing page has got 5 different cta buttons and we need to identify which of the buttons has been clicked (unique identifier needed).
Any advice is much appreciated.
Thanks,
Jan -
Try adding this CSS:
.gb-button span { pointer-events: none; }That will stop the
spaninside from registering a click. -
This does the trick, David.
Thanks very much.
I asked Matomo to double-check from their end and will be happy to mark the topic resolved as soon as I hear back from them.
Happy weekend.
Best,
Jan -
You’re welcome!
- You must be logged in to reply to this topic.