Guide

Setup conversion events

Conversions are the moments that matter: signups, purchases, demo requests. Fire them with one line.

The basics

Once the analytics script is installed, the global window.grademypage exposes a single function for recording a conversion:

app.jsjavascript

// When a user signs up
window.grademypage?.trackConversion('signup');

No pre-registration required

The first time you fire trackConversion('signup'), Grademypage automatically adds it to your dashboard. Name it in your code, see it in your analytics. That's it.

With properties

Pass an object as the second argument to attach arbitrary properties. They're stored on the event and available for breakdowns.

// When a user completes a purchase
window.grademypage?.trackConversion('purchase', {
  product: 'Pro annual',
  revenue: 49.99,
  currency: 'USD',
});

A typical React usage looks like this:

components/SignupForm.tsxtsx

function SignupForm() {
  const onSubmit = async (data) => {
    await api.signup(data);
    window.grademypage?.trackConversion('signup', {
      plan: data.plan,
    });
  };
  // ...
}

See it in the dashboard

The Conversions tab shows conversions over time and a breakdown by name. Each event you fire becomes a row you can filter, chart, and use as a primary metric in experiments.

Conversions Over Time

Conversions by Type

signup214

purchase37

demo_request12

Best practices

Use snake_case names (signup, demo_request) so charts stay tidy.
Keep names stable. Renaming breaks historical comparisons; add a new event instead.
Don't put PII in eventData. No emails, names, or phone numbers. Use an internal user ID if you need a reference.
Fire conversions after the API confirms success, not on button click, otherwise you count failed attempts.

Server-side conversions?

For revenue events where you need guaranteed delivery (post-payment, webhook-driven), use the server-events endpoint instead of the client-side API.