# 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

Powermetrics 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, Powermetrics 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 powermetrics-track-event=YOUR_EVENT_NAME:

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

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

# 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 powermetrics-track-event--Clicked__Button">Click Me</button>

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