Developer working with code and analytics dashboard on screen

Custom Event Tracking: How to Measure Any User Interaction on Your Site

Published May 27, 2026 • statpx Team • 7 min read • Features

Standard analytics tracks pageviews automatically. But many of the most important things that happen on your site aren't pageviews — a visitor playing a demo video, clicking your pricing CTA, downloading a file, or submitting a form. Custom events let you track all of those interactions.

This guide explains how custom event tracking works, what you can track with it, and how to add it to your site with a single line of JavaScript.

What Is a Custom Event?

A custom event is any user interaction you define and track explicitly in your analytics. Unlike pageviews, which are recorded automatically whenever a page loads, events must be triggered intentionally — typically by adding a small piece of JavaScript that fires when a specific action occurs.

Events have a name (what happened), and optionally a category (how to group it). For example: name = demo_play, category = video. Or name = pricing_click, category = cta. These labels are entirely up to you — the analytics tool simply records them with a timestamp and associates them with the current session.

What You Can Track with Events

Almost any interaction is fair game. Common use cases include:

Engagement actions

Video play / pause / completion
Accordion or FAQ section opened
Tab switch on a product feature section
Image gallery navigation
Copy button clicked (code snippets, promo codes)

Conversion-related actions

CTA button clicks ("Start free trial", "Book a demo")
Form submissions (newsletter signup, contact form)
File downloads (PDF guides, whitepapers)
Outbound link clicks to external sign-up pages

Navigation signals

Search box used
Filter or sort applied in a product catalog
Infinite scroll reaching a new "page" of content

How to Track Events with statpx

statpx uses a simple JavaScript function call to record custom events. Once the tracking snippet is on your page, you can fire events anywhere in your own JavaScript:

// Basic event — name only
_st('event', 'demo_play');

// Event with a category
_st('event', 'pricing_click', 'cta');

// Attach to a button click
document.getElementById('demo-btn').addEventListener('click', function() {
  _st('event', 'demo_play', 'video');
});

The first argument is always 'event'. The second is your event name. The third (optional) is a category string you can use to group related events together in the Events tab.

Tracking outbound link clicks

Outbound clicks are particularly useful because they represent visitors leaving your site — and you want to know which external links are being clicked. Here's a pattern for tracking them:

document.querySelectorAll('a[href^="http"]').forEach(function(link) {
  if (!link.href.includes(location.hostname)) {
    link.addEventListener('click', function() {
      _st('event', 'outbound_click', link.hostname);
    });
  }
});

This fires an event for every click on an outbound link, using the destination hostname as the category. In your Events tab, you'll see exactly which external sites your visitors are clicking through to.

Reading Event Data in Your Dashboard

In statpx, all custom events appear in the Events tab. For each event name you'll see total occurrences, unique sessions that triggered it, the pages it was fired on, and a timestamp for every individual event. The outbound table shows the full journey context — which page the visitor was on, where they went, their location, and their device.

Events integrate directly with conversion goals. You can set any event name as a goal trigger — for example, if you fire _st('event', 'signup_complete') after a successful registration, you can create a goal that counts every occurrence of that event as a conversion, and track it over time.

Track button clicks, form submissions, and more — free with statpx

One line of JavaScript. Instant event data in your dashboard. No configuration screens, no tag managers, no plugins needed.

Set up events free →

Events vs. Pageviews: When to Use Each

The rule of thumb is simple: use pageviews for navigation (loading a new URL), and events for interactions that happen within a page. If a user clicks a button that loads a new route in your app, that might be a pageview. If they click a button that plays a video or submits a form without a page reload, that's an event.

For single-page applications (SPAs) built in React, Vue, or similar frameworks, this distinction becomes especially important — read our guide on tracking analytics in SPAs for the specifics of handling client-side navigation correctly.

The Bottom Line

Custom events bridge the gap between "someone visited a page" and "someone did something meaningful on that page." The setup is minimal — a single JavaScript call wherever the action happens. Once you have a few events flowing in, patterns emerge quickly: which CTAs get clicked, which features get used, which content drives the actions that matter most to your business. That's data you can act on directly.