Custom events

Page views tell you what people looked at. Custom events tell you what they did: signed up, clicked “Upgrade”, added to cart, started a trial. You can track events two ways: with a line of JavaScript, or with no code at all using an HTML attribute.

With JavaScript: sa.track()

Call sa.track() whenever something happens:

sa.track("signup");

Add properties to give the event context, handy for filtering later:

sa.track("signup", { plan: "pro", referral: "newsletter" });

Property values can be strings, numbers, or booleans. Keep them to a small, predictable set of keys (avoid putting unique IDs or emails in properties).

Event value

For events worth a number (a purchase amount, a lead score), pass a value. Either give a plain number as the second argument, or use the value option:

// Both set this event's value to 49
sa.track("purchase", 49);
sa.track("purchase", { plan: "pro" }, { value: 49 });

With no code: data-sa-event

Add a data-sa-event attribute to any element and Snow fires that event when the element (or anything inside it) is clicked, with no JavaScript required:

<button data-sa-event="signup">Create account</button>

Add properties with data-sa-event-<name> attributes. Dashes in the name become underscores:

<button
  data-sa-event="signup"
  data-sa-event-plan="pro"
  data-sa-event-referral="pricing-page">
  Upgrade to Pro
</button>

A few notes:

• It works on elements added to the page later, too (Snow listens at the document level), so it’s safe for dynamic UIs.
• You can attach up to 20 properties per element; each value is capped at 256 characters.
• data-snow-event (and data-snow-event-*) is an older spelling that still works; prefer data-sa-event for new markup.

Calling track before the script loads

If you call sa before sa.js has finished loading, the call is queued and runs as soon as the script is ready, so you never lose an early event:

<script>
  window.sa = window.sa || function () { (window.sa.q = window.sa.q || []).push(arguments); };
  // Queued now, sent once sa.js loads:
  sa("track", "hero_cta_clicked", { variant: "b" });
</script>

Where your events appear

Custom events show up in the Events report, where you can see how often each fires, break them down by their properties, and group them into goals. To send events from a server or backend instead of the browser, use the server-side Events API.