Install the tracking script

Callra serves one shared tracking script for every site.

Open Dashboard -> Your site -> Tracking script and copy the snippet shown there.

For SPAs with framework routing, prefer the adapter packages below so route_template stays accurate in both Web Analytics and the deploy-review inputs that depend on it.

Canonical install snippet

A new Callra install uses the shared script path like this:

<script
  defer
  src="https://analytics.example.com/script.js"
  data-site-id="site_123"
  data-host="https://analytics.example.com"
  data-do-not-track="true"
></script>

Place it in the shared HTML shell or root layout of your app so it loads on every page. The data-do-not-track attribute appears automatically when that site is configured to respect DNT/GPC.

What happens automatically

After installation, Callra can automatically:

• send the initial pageview
• track single-page app navigation through the History API
• send Speed Insights data for the same site

That gives the product the traffic and speed inputs needed for the first deploy report.

Send a custom event

Use window.va('event', ...) when you want to measure product actions such as signup or checkout steps.

<script>
  window.va('event', 'Signup', {
    plan: 'pro',
    location: 'pricing-page',
    trial: true
  });
</script>

Event property values should stay flat and simple:

• strings
• numbers
• booleans
• null

Nested objects and arrays are ignored.

Add persistent properties

If you want the same properties attached to future custom events, set them once:

<script>
  window.va('set', {
    props: {
      app: 'docs',
      release: 'spring-launch'
    }
  });
</script>

This is useful for tagging traffic by app area, tenant, or release.

Label an environment

You can label traffic with an environment and then filter by it in the dashboard.

Set it on the script tag:

<script
  defer
  src="https://analytics.example.com/script.js"
  data-site-id="site_123"
  data-host="https://analytics.example.com"
  data-environment="staging"
></script>

Or set it at runtime:

<script>
  window.va('set', { environment: 'staging' });
</script>

Attach route metadata

For apps with dynamic routes, you can send a route template:

<script>
  window.va('route', { route: '/docs/[slug]' });
</script>

This keeps reports readable when exact URLs would otherwise explode into too many unique paths.

Use a framework adapter for route-aware SPAs

The raw snippet can still work for SPAs, but the adapter packages are the easiest way to keep dynamic route templates such as /docs/[slug] in sync automatically.

See the dedicated guide for copy-paste examples:

• Framework adapters

Use the raw window.va('route', ...) command only when you cannot use one of these adapters.

Redact or drop events before sending

Use beforeSend when you need to modify or block outgoing analytics payloads.

<script>
  window.va('beforeSend', function (event) {
    if (event.href && event.href.indexOf('/private') !== -1) return null;
    return event;
  });
</script>

Return null or false to drop the payload.

Why data-host exists

The script file can be cached or proxied separately from the collector origin.

Set data-host to your Callra app URL when you want the browser to fetch script.js from a CDN cache but still post analytics to the main Callra origin.

Local development note

In normal auto mode, Callra skips localhost traffic by default. That keeps local development noise out of reports.

For installation testing, load a real page on an allowed hostname, or temporarily allow localhost when you need deterministic local verification.

Next step

After the snippet is live, load a real page on an allowed hostname and confirm that pageviews and Speed Insights begin to fill in. Then create one manual release so Callra can generate the first deploy impact report.