Skip to content

Install the tracking script

One <script> tag.

The basic snippet

Don't copy from this page. Your real <script> tag lives in site settings → General → Tracking Code, with your site identifier already filled in and a one-click copy button. Paste that into the <head> of every page you want to track.

No account, or no dashboard to open? An account can be registered over HTTPS in two calls, and POST /api/v1/sites then returns the site's numeric identifier together with a ready-to-paste snippet, so nothing needs to be copied off a screen. See Register without a browser.

For reference, the tag's structure looks like this:

<script defer src="https://statable.com/js/YOUR_SITE_ID/s.js"></script>

YOUR_SITE_ID is a number. It comes from Tracking Code in site settings, or from the id in the response to POST /api/v1/sites. The site identifier is baked into the URL path (/js/YOUR_SITE_ID/), so no data-id attribute is needed on paid plans. defer loads the script asynchronously, so it never blocks rendering.

Hobby plan

On the free Hobby plan there is no standalone tracker — analytics are bundled with one of the public widgets. Pick a widget (live counter, globe, map, top countries) in Site settings → Widget and the page generates the right snippet for you.

Where to put it

Put the snippet between <head> and </head> on every page you want to track. Statable needs to register the page early enough to capture engagement and scroll depth from the start of the visit.

Single Page Apps

For Next.js, Nuxt, React Router, Vue Router, and other SPA frameworks, the script automatically detects route changes via the History API and hash changes. No manual pageview firing needed.

What ships in s.js

One bundle, about 2 KB over the wire. Pageviews, the privacy guards and the window.statable.t() API for custom events are the floor: they are in every build and have no switch. On top of them come engagement time, scroll depth, outbound link clicks and file downloads, which are on by default and can be switched off in Tracking features. The address stays the same either way.

Optional attributes

  • data-tracking-api. Send events to a custom endpoint instead of statable.com/api/event. Useful for proxying through your own domain to bypass ad blockers.
  • data-before-send. Name of a global function called before each pageview. It receives the custom properties object and must return it, or return false to drop the pageview, along with the engagement and heartbeat that would have followed it.
  • data-statable-{key}. Attach a custom property to every event from this page. For example, data-statable-plan="pro" adds plan: "pro" to every event.
  • data-statable-event. On a clickable element (button, link), fires a custom event with that name on click.

Example with custom properties and a proxy endpoint:

<script
  data-tracking-api="https://example.com/api/event"
  data-statable-plan="pro"
  defer
  src="https://statable.com/js/YOUR_SITE_ID/s.js"></script>

What gets tracked automatically

  • Pageviews, including SPA navigation (pushState, replaceState, hash changes).
  • Engagement time. Active interaction time per page.
  • Scroll depth. Maximum scroll percentage reached.
  • Outbound link clicks. Links to other domains.
  • File downloads. PDF, ZIP, DOC, XLS, MP3, MP4, and other common types.
  • Traffic sources, UTM parameters, referrers.
  • Device, browser, OS, country, region, city (from IP, never stored).

See pageviews and sessions for definitions.

Platform-specific guides

Next: verify it works

Once the snippet is live, see Verify your installation.

Ready to take control of your web analytics? Try Statable free for 30 days. No credit card required, full feature access, built for GDPR. Start your free trial or view a live demo.