Track custom goals

Goals let you track important user actions like signup, checkout, or clicks.

You can track goals using:

  • SDK (recommended)
  • JavaScript (script-based)
  • HTML attributes (no JS)

Use the SDK in modern apps (Next.js, React, etc.).

1
2
3
4
5
6
7
8
9
10
11
12
13
import { getAnalytics } from '@/lib/analytics';

export default function SignupButton() {
  const handleSignup = async () => {
    const analytics = await getAnalytics();
    analytics.track('signup', {
      email: 'user@example.com',
      name: 'John Doe',
    });
  };

  return <button onClick={handleSignup}>Sign Up</button>;
}

Method 2: JavaScript tracking

Call the convrs() function where the conversion happens.

Basic example

1
window?.convrs("signup");

With metadata

1
2
3
4
5
window?.convrs("initiate_checkout", {
  name: "Elon Musk",
  email: "elon@x.com",
  product_id: "prod_123",
});

Rules for goal names

  • Lowercase only
  • Allowed: letters, numbers, _, -, :
  • Max length: 64 characters

Rules for custom parameters

  • Keys: lowercase, _ or - allowed (max 64 chars)
  • Values: strings (max 255 chars)
  • Max 10 parameters per event

Method 3: HTML tracking (no JS)

Track goals automatically using attributes.

1
<button data-fast-goal="initiate_checkout">Buy Now</button>

With custom parameters

1
2
3
4
5
6
7
8
<button
  data-fast-goal="initiate_checkout"
  data-fast-goal-price="49"
  data-fast-goal-currency="USD"
  data-fast-goal-plan-type="pro"
>
  Subscribe to Pro Plan
</button>

This sends:

1
2
3
4
5
6
{
  "name": "initiate_checkout",
  "price": "49",
  "currency": "USD",
  "plan_type": "pro"
}

HTML parameter rules

  • data-fast-goal-product-id becomes product_id
  • Max 10 parameters
  • Values are automatically sanitized

Add this script inside <head> to queue events before the main script loads:

1
2
3
4
5
6
7
8
<script id="convrs-queue">
  window.convrs =
    window.convrs ||
    function () {
      window.convrs.q = window.convrs.q || [];
      window.convrs.q.push(arguments);
    };
</script>