Button tracking - CSS Class - Custom Events Report

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


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:

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?


1 Like

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

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…



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.

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

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.