Track custom events

Custom events track what pageviews can't: button clicks, signups, form submits, video plays. Every custom event can be used as a goal or a funnel step, and it appears in each visitor's journey.

The main script handles custom events. There is nothing else to install.

Track clicks without code

Add data-calmstats-event to any element. The event is sent when the element is clicked:

HTML
<button data-calmstats-event="pricing_click" data-calmstats-plan="pro">
  Start free trial
</button>

Other data-calmstats-* attributes on the same element are sent as properties, so this button sends pricing_click with { plan: "pro" }.

Track form submits

On a <form>, the event is sent when the form is submitted, not on each click inside it:

HTML
<form data-calmstats-event="signup_completed">
  ...
</form>

Track from JavaScript

Call calmstats.track() from your code, for example after a signup succeeds on the server and your app gets the response:

JavaScript
calmstats.track('signup_completed', { plan: 'pro' });

Properties can be strings, numbers or booleans.

Calls before the script loads

The script loads with defer, so a call made very early in the page can run before window.calmstats exists. To queue those calls, add this optional script just before the main tag. Calls made while the page loads are sent once Calmstats loads.

HTML
<script>window.calmstats=window.calmstats||{q:[]};["track","goal","identify"].forEach(function(m){window.calmstats[m]=window.calmstats[m]||function(){window.calmstats.q.push([m].concat([].slice.call(arguments)))}});</script>

Naming events

• Event names are up to 100 characters. Longer names are cut.
• Use snake_case verbs that describe what happened, such as signup_completed or trial_started.
• Keep one name per action: signup from the button and signup from the form count as the same goal.

See your events

Events show up in Goals once you create a goal for them, in Funnels as steps, and in Journeys for each visitor. When you type an event name in a goal or funnel, Calmstats suggests the names it has already received.