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)
Method 1: SDK tracking (recommended)
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-idbecomesproduct_id- Max 10 parameters
- Values are automatically sanitized
Ensure reliable tracking (recommended)
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>