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.

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

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

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

A single bundle, ~2.5 KB gzipped: pageviews, engagement time, scroll depth, outbound link clicks, file downloads, and the window.statable.t() API for custom events.

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 event. Return false to drop the event, or modify the payload in place.
  • 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, GDPR-compliant by default. Start your free trial or view a live demo.