# Button tracking - CSS Class - Custom Events Report

**URL:** <https://community.piwik.pro/t/button-tracking-css-class-custom-events-report/2450>\
**Category:** Data collection and tags\
**Created:** [June 26, 2023, 6:22pm UTC](https://community.piwik.pro/t/button-tracking-css-class-custom-events-report/2450 "2023-06-26T18:22:47Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Elena\_Benito\_Ruiz](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/elena_benito_ruiz/32/1823_2.png) [@Elena\_Benito\_Ruiz](https://community.piwik.pro/u/Elena_Benito_Ruiz)\
**Post date:** [June 26, 2023, 6:22pm UTC](https://community.piwik.pro/t/button-tracking-css-class-custom-events-report/2450/1 "2023-06-26T18:22:47Z")

</div>

Hi,  
So we need to track clicks on several CTA buttons, on our commercial web and on our blog. Commercial web buttons do not have unique ID but some sort of “class identifier” -so to speak- added to the CSS class via the CMS. Our blog CTAs do have unique IDs applied.  
I have this question, I’d appreciate to run by some Piwik expert, so that the custom events report on Analytics pick them up:

I’ve created a tag to track the CTAs, if Name {{click Classes}}, will a trigger based on Click ID (blog) work? I guess not. I was trying to group all the triggers under the same tag, so that any click on any signup button (whether blog or commercial) would trigger the tag, but I am not sure if it can work that way or how to group under the same tag triggers that work on different class vs click [Loom | Free Screen & Video Recording Software | Loom](https://www.loom.com/share/d1302a28c94f4c6d8b66f758602ffd28?from_recorder=1&focus_title=1)  
THANKS A LOT

---

<div class="post-metadata">

**Author:** ![mbaersch](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/mbaersch/32/35_2.png) [@mbaersch](https://community.piwik.pro/u/mbaersch)\
**Post date:** [June 26, 2023, 8:07pm UTC](https://community.piwik.pro/t/button-tracking-css-class-custom-events-report/2450/2 "2023-06-26T20:07:49Z")

</div>

Hi,

you can totally add multiple triggers to the same tag to cover all different conditions either based on `Click ID` (where you have IDs) or (unique) `Click Classes` and narrow down the class-based trigger with additional conditions if needed (in case Click Classes are to broad for the whole website).

If you prefer to cover all clicks with one single trigger, a condition for `Click Element` can be defined using several CSS selectors, separated by comma.

To include all links with a CSS class that includes a certain string (like `_article_sign_up_`) or have a specific ID (here: `xyz` because I could not remember the IDs from the video ;)) you can do something like that and add additional selectors if you like:

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/2X/a/ae52a3151a3d8674ef2c4322d519504cdce2d76e.png)

The first selector would catch links with class names like `_article_sign_up_`, `xxx_article_sign_up_`, `_article_sign_up_xxx` and so on - the second one looks for a specific ID instead of partial matches.

Does that answer your question?

best,  
Markus

---

<div class="post-metadata">

**Author:** ![Elena\_Benito\_Ruiz](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/elena_benito_ruiz/32/1823_2.png) [@Elena\_Benito\_Ruiz](https://community.piwik.pro/u/Elena_Benito_Ruiz)\
**Post date:** [June 28, 2023, 1:28pm UTC](https://community.piwik.pro/t/button-tracking-css-class-custom-events-report/2450/3 "2023-06-28T13:28:41Z")

</div>

Hi @mbaersch  
That’s absolutely great, I’ll play with it and if no news, good news.  
Thanks!

---

<div class="post-metadata">

**Author:** ![Elena\_Benito\_Ruiz](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/elena_benito_ruiz/32/1823_2.png) [@Elena\_Benito\_Ruiz](https://community.piwik.pro/u/Elena_Benito_Ruiz)\
**Post date:** [June 28, 2023, 1:51pm UTC](https://community.piwik.pro/t/button-tracking-css-class-custom-events-report/2450/4 "2023-06-28T13:51:41Z")

</div>

![unnamed](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/2X/8/8b086a3fb3c263f8e2d2f58a6d6225f89937e24b.png)  
ok @mbaersch so this is what I did, when debugging it does trigger for the blog (based on ids) but not for the website classes. So I am all ears and eyes, and bear with me, learning…

a[id\*=“sign\_up”],a[class\*=“CTA\_SignUp”]

THANKS A LOT

---

<div class="post-metadata">

**Author:** ![mbaersch](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/mbaersch/32/35_2.png) [@mbaersch](https://community.piwik.pro/u/mbaersch)\
**Post date:** [June 28, 2023, 2:17pm UTC](https://community.piwik.pro/t/button-tracking-css-class-custom-events-report/2450/5 "2023-06-28T14:17:37Z")

</div>

What would be a class name that should trigger when clicked? And: are those elements really links? You can DM me any URL if you are unsure.

---

<div class="post-metadata">

**Author:** ![Elena\_Benito\_Ruiz](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/elena_benito_ruiz/32/1823_2.png) [@Elena\_Benito\_Ruiz](https://community.piwik.pro/u/Elena_Benito_Ruiz)\
**Post date:** [June 29, 2023, 11:33am UTC](https://community.piwik.pro/t/button-tracking-css-class-custom-events-report/2450/6 "2023-06-29T11:33:20Z")

</div>

Hi @mbaersch so definitely you were right, because on our commercial WS, the signup CTAs are not a link element but a button element. It should have been _button[class=“CTA\_SignUp”]_\*  
In any case, I’ve opted for this and it apparently works on the debugger. In the future it might happen that we use the class CTA\_SignUp for either a button or an anchored text (link element) in our commercial WS, so then how about not mentioning the element type.  
As I say it works on the debugger, it fires correctly. I guess a tag based on this trigger should then send the right info to Analytics. LMK your thoughts:

[id\*=“sign\_up”], [class\*=“CTA\_Signup”]

 ![Captura de pantalla 2023-06-29 a las 13.28.12](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/2X/b/bcf6f98590db70f6a1b3a491342c5976165a0b11.png)

---

<div class="post-metadata">

**Author:** ![mbaersch](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/mbaersch/32/35_2.png) [@mbaersch](https://community.piwik.pro/u/mbaersch)\
**Post date:** [June 29, 2023, 12:42pm UTC](https://community.piwik.pro/t/button-tracking-css-class-custom-events-report/2450/7 "2023-06-29T12:42:52Z")

</div>

As long as there are no other elements matching that lead to events you do not want / need, this should be fine. There is no “correct” or even “best” selector, as long as it is not too complex without catching too much. I know: sounds easy but might be hard. This is why I try to get custom data attributes for tracking proposes wherever I can.

A selector like [data-track-type=“xyz”] usually survives a (good) relaunch while IDs and classes might change. However, for the time being your trigger should work as expected.

best,  
Markus
