# Event Tracking using Class Attributes

Alongside our standard event tracking techniques, you can also leverage HTML class attributes to track events with minimal setup. This feature is particularly useful for scenarios where modifying HTML elements directly is more convenient than invoking JavaScript functions.

# How It Works

CountUp looks for a specific class name pattern within clickable elements, such as buttons or links. When a user clicks on an element with this specific class, CountUp automatically captures the event and sends the data to our servers for tracking.

Embed the event name you want to track within the class attribute of the HTML element. The format is countup-track-event=YOUR_EVENT_NAME:

<button class="some-existing-class countup-track-event=Clicked+Button">Click Me</button>

In the above example, clicking the button will automatically track an event named Clicked Button.

Note

Ensure to replace any spaces with + symbols, as spaces are not allowed in CSS class names. Check that the class pattern doesn't conflict with any other CSS or JavaScript functionality on your site.

# Alternative Syntax

Please note that some CMS systems like Webflow might not tolerate certain special characters in CSS class names. For this case, we offer an alternative syntax that uses only hyphen and underscore characters. This might not be as readable as the default syntax described above, but should be supported by all systems. To apply the syntax:

Replace all = with -- (two hyphens)
Replace all + with __ (two underscores)

So the example from above would become:

<button class="some-existing-class countup-track-event--Clicked__Button">Click Me</button>

Both examples will result in the tracking of the exact same event.