Tracking Events

Events are how CADENCE measures whether your test is working. There are two types you need to know:

  1. Exposure events — tracked automatically when a visitor sees your test
  2. Conversion events — tracked by you when a visitor completes the action you're measuring

This page explains what to track, when to track it, and how to verify events are working.

Exposures: you don't need to do anything

When your code calls getVariant(), CADENCE automatically records that this visitor saw this variant. This is called an "exposure event."

javascript
// This line automatically tracks an exposure — no extra code needed
var variant = Cadence.getVariant('signup-button-color');

You don't need to add any tracking code for exposures. CADENCE handles it.

Call getVariant() once per page

Each call to getVariant() sends an exposure event. If you call it inside a component that refreshes frequently, you'll inflate your numbers. Call it once when the page loads and store the result.

Zero-code conversion tracking

The simplest way to track conversions is without writing any JavaScript. There are two options:

Option 1: HTML attributes

Add data-cadence-goal to any clickable element:

html
<button data-cadence-goal="signup-click">Sign Up Free</button>
<a href="/pricing" data-cadence-goal="pricing-visit">See Pricing</a>

When a visitor clicks the element, CADENCE automatically tracks a conversion event with the goal name you specified. No JavaScript needed.

Option 2: Dashboard-configured rules

In the CADENCE dashboard, you can configure conversion rules on each experiment:

  • URL match — tracks a conversion when a visitor reaches a specific page (e.g., /thank-you)
  • Click selector — tracks a conversion when a visitor clicks a specific CSS selector (e.g., #buy-now-btn)

These rules are evaluated automatically by the SDK. You configure them once in the dashboard, and they work across your site without any code changes.

Start with zero-code tracking

For most tests, data-cadence-goal attributes or dashboard rules are all you need. Use the JavaScript trackConversion() method below only when you need to track after async operations (form submissions, API calls) or attach custom data like revenue.

Conversions: track the action you're measuring

A conversion is whenever a visitor does the thing you're testing for — clicking a button, submitting a form, completing a purchase. You tell CADENCE about conversions by calling trackConversion():

javascript
Cadence.trackConversion('signup-click');

CADENCE then calculates your conversion rate: out of everyone who saw the test, what percentage completed the action?

When to call trackConversion()

After the action succeeds, not when the user clicks. Here's why:

javascript
// Bad — tracks before we know if the form actually submitted
form.addEventListener('submit', function() {
  Cadence.trackConversion('form-submit');  // What if the submit fails?
});

// Good — tracks after confirming success
form.addEventListener('submit', async function(e) {
  e.preventDefault();
  var response = await submitForm();

  if (response.ok) {
    Cadence.trackConversion('form-submit');  // We know it worked
  }
});

If you track on click and the action fails (validation error, network issue), you'll count failures as conversions and your data will be unreliable.

Real-world examples

Here are the most common things you'll want to track:

Button click

javascript
document.querySelector('#signup-btn').addEventListener('click', function() {
  Cadence.trackConversion('signup-click');
});

Form submission

javascript
document.querySelector('#contact-form').addEventListener('submit', function(e) {
  e.preventDefault();
  // ... submit the form ...
  Cadence.trackConversion('contact-form-submit');
});

Reaching a specific page (like a thank-you page)

javascript
// Put this on your thank-you or confirmation page
if (window.location.pathname === '/thank-you') {
  Cadence.trackConversion('purchase-complete', { value: 49.99 });
}

Video play

javascript
document.querySelector('#demo-video').addEventListener('play', function() {
  Cadence.trackConversion('video-started');
});

Adding extra data to events

You can attach additional information to any conversion event by passing a second argument:

javascript
Cadence.trackConversion('purchase', {
  value: 49.99,       // How much the customer paid
  plan: 'pro',        // Which plan they chose
  currency: 'USD',    // Currency
});

This extra data shows up in your dashboard and helps you analyze results by segment. Most tests don't need this — add it when revenue or plan type matters to your analysis.

Custom events (for extra tracking)

Beyond conversions, you can track any user action with track(). Custom events don't directly appear in experiment results, but they're useful for behavioral analysis:

javascript
Cadence.track('page-view', { page: '/pricing' });
Cadence.track('scroll-depth', { percent: 50 });

For most tests, you only need trackConversion(). Use track() when you want to record additional behavior alongside your experiments.

How events get sent

Events don't send one-by-one — CADENCE batches them for performance. Events are sent automatically every 5 seconds, and any remaining events are sent when the visitor navigates away from the page. You don't need to do anything special to handle this.

Check your events are working

After adding tracking code, visit your site and trigger the action (click the button, submit the form). Then go to your project's Events page in the CADENCE dashboard. Within 10 seconds, you should see your conversion events appear with the correct event name.

Naming conventions

Use kebab-case for event names and be descriptive:

| Good | Bad | |------|-----| | signup-click | click | | purchase-complete | event1 | | contact-form-submit | formSubmit |

Descriptive names make it easy to understand your data months later.

Common mistakes

Tracking too early — Don't call trackConversion() when a button is clicked if the action might fail. Track after the action succeeds.

Tracking too much — Focus on the one or two actions that matter for your test. Tracking every mouse move or scroll creates noise.

Inconsistent names — If one page tracks signup-click and another tracks signupClick, they'll show up as separate events. Pick a format and stick with it.

Forgetting to track — If your experiment shows 1,000 exposures but 0 conversions, double-check that trackConversion() is actually being called. Add a console.log() next to it to verify.

Next steps