React and single-page apps

For Vite, Create React App, Vue, Svelte, Angular and other single-page apps, add the script to the <head> of your index.html:

index.html
<script defer
  data-website-id="YOUR-SITE-ID"
  src="https://calmstats.com/script.js"></script>

Client-side route changes are tracked automatically: the script records a pageview each time the URL path changes, whether your router uses pushState or the back and forward buttons. Hash changes alone (#section) don't count as new pageviews.

To turn route tracking off, for example when you send pageviews yourself, add data-spa-tracking="false".

Send events from your components

TSX
function UpgradeButton() {
  return (
    <button onClick={() => window.calmstats?.track('upgrade_click', { plan: 'pro' })}>
      Upgrade
    </button>
  );
}

See Track custom events for more.