These docs are continuously being refined for better readability. Some sections may be incomplete or subject to change.

Custom Events

Track clicks and other important actions with a CSS class or one JavaScript call.

Two Supported Ways

Use a class on any clickable element for the quickest setup.
Use window.saasAnalytics.track(...) when the event happens in JavaScript.

Track with HTML

Add one class to the element you want to measure.

html

1<button class="saasanalytics-event-name=signup_clicked">
2  Start free trial
3</button>

html

1<!-- CMS-safe fallback if = is stripped -->
2<button class="saasanalytics-event-name--signup_clicked">
3  Start free trial
4</button>
5
6<!-- Add extra event properties -->
7<button class="saasanalytics-event-name=plan_selected saasanalytics-event-plan=pro">
8  Choose Pro
9</button>

Track with JavaScript

Use this when the action happens after app logic, not from a plain HTML click.

javascript

1window.saasAnalytics.track('custom_event', {
2  eventName: 'signup_clicked',
3  payload: {
4    location: 'hero',
5    plan: 'pro',
6  },
7});

Reusable Helper

If you want a small wrapper instead of calling window.saasAnalytics.track(...) directly, use a standalone helper like this.

trackEvent helper

1type EventPayload = Record<string, string | number | boolean>;
2
3type SaasAnalyticsClient = {
4  track: (
5    type: string,
6    data: {
7      eventName: string;
8      payload?: EventPayload;
9    }
10  ) => void;
11};
12
13export function trackEvent(
14  eventName: string,
15  payload?: EventPayload
16): void {
17  if (typeof window === 'undefined') return;
18
19  const analyticsWindow = window as Window & {
20    saasAnalytics?: SaasAnalyticsClient;
21  };
22
23  analyticsWindow.saasAnalytics?.track('custom_event', {
24    eventName,
25    ...(payload ? { payload } : {}),
26  });
27}

Naming

Keep event names short, readable, and stable.

✓

Good

signup_clicked

pricing_cta_clicked

demo_requested

✗

Avoid

click

button1

event123

What Happens Next

After the event fires once, you can use it across the product.

Trigger the event on your site, then open the dashboard for the same website. You can use that event name in Goals and Funnels.

If nothing appears, first check that the tracker is installed, then confirm the class name or JavaScript event name matches exactly.