# Tracking Events

Tracking events is important for understanding how users interact with your website beyond just pageviews. Events capture specific actions users take, allowing you to track valuable interactions such as button clicks, form submissions, or video plays.

Here are some common cases where event tracking can be useful:

1. Button Clicks – Track when users click on important buttons (e.g., "Add to Cart", "Subscribe").
2. Form Submissions – Measure how often users submit forms like contact forms or signup forms.
3. Video Plays – Monitor engagement by tracking how many users start or complete videos.
4. Product Interactions – Capture interactions with product features.

You can track custom events using JavaScript. This method allows you to programmatically send event data from anywhere within your site’s code, giving you full control over event tracking.

If you installed our JavaScript tracking snippet, you can use this way directly out of the box.

You can trigger an event using the trackEvent() function provided by our JavaScript snippet. The basic usage requires just the event name as the first parameter. The event will automatically include all data that is typically tracked with a pageview, such as the current URL or the referrer.

Here’s a simple example of how to track an event:

// Tracking a simple event with just a name
countup.trackEvent('Form Submitted');

In this example, the "Form Submitted" event is tracked and sent to our servers along with the standard data that is captured with a pageview (e.g. URL, referrer, user agent, etc.).

You can also directly use the function with standard HTML events such as onclick etc:

<button onclick="countup.trackEvent('My Event')">Click Me!</button>

In addition to the event name, you can pass custom properties to provide additional context about the event. This is useful for tracking specific interactions, like product details or button metadata.

To track an event with custom properties, pass a second argument containing key-value pairs that describe the event in more detail:

// Tracking an event with additional properties
countup.trackEvent('Product Added To Cart', {
  productId: '12345',
  productName: 'Awesome Widget',
  productPrice: 19.99,
});

In this example, the event "Product Added To Cart" is tracked along with custom properties like the product ID, name, and price. These properties will be sent to our servers along with the standard event data.

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.

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.

Some CMS systems like Webflow do 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 look like this using the alternative syntax:

<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.