Tracker API

After the install snippet loads, Callra exposes a browser command queue at window.va(...).

Canonical script URL

A new site install uses the shared script path:

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

If you need to queue commands before the script finishes loading, place this stub earlier in the page:

<script>
  window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script>

Available commands

window.va('pageview')

Sends a pageview manually.

window.va('pageview');

This is usually not required because the script auto-tracks the initial load and SPA navigation by default.

window.va('event', name, data)

Sends a custom event.

window.va('event', 'Signup', {
  plan: 'pro',
  location: 'hero'
});

Rules for data:

• up to 32 flat key/value properties
• string, number, boolean, and null values are supported
• nested objects and arrays are ignored

window.va('route', value)

Updates route context and sends a pageview for the new route.

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

window.va('set', options)

Sets runtime options.

window.va('set', {
  debug: true,
  mode: 'production',
  environment: 'staging',
  route: '/pricing',
  props: {
    app: 'marketing'
  }
});

Supported options:

• debug: enable console logging from the tracker
• mode: runtime mode such as auto, development, or production
• environment: label traffic for dashboard filtering
• route: set the current route template
• props: persistent flat properties merged into future custom events

window.va('beforeSend', handler)

Registers a function that can edit or drop outgoing payloads.

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

Return null or false to drop the payload.

Framework adapters

For Next.js, React Router, Remix, and Nuxt SPAs, the recommended install path is to mount a Callra adapter once and let it keep route metadata up to date for you.

Next.js

'use client';

import { Analytics } from '@callra/analytics-next';

export function CallraAnalytics() {
  return <Analytics siteId="site_123" host="https://analytics.example.com" />;
}

React Router

import { Analytics } from '@callra/analytics-react-router';

export function App() {
  return (
    <>
      <Analytics siteId="site_123" host="https://analytics.example.com" />
      {/* your routes */}
    </>
  );
}

Remix

import { Analytics } from '@callra/analytics-remix';

export default function App() {
  return (
    <html>
      <body>
        <Analytics siteId="site_123" host="https://analytics.example.com" />
        {/* outlet */}
      </body>
    </html>
  );
}

Nuxt

import { defineNuxtPlugin } from '#app';
import { injectNuxtAnalytics } from '@callra/analytics-nuxt';

export default defineNuxtPlugin(() => {
  injectNuxtAnalytics({
    siteId: 'site_123',
    host: 'https://analytics.example.com'
  });
});

If you cannot use an adapter, keep using the raw script and call window.va('route', { route: '/docs/[slug]' }) yourself on route changes.

Useful script tag attributes

The installed script also supports attributes:

<script
  defer
  src="https://analytics.example.com/script.js"
  data-site-id="site_123"
  data-host="https://analytics.example.com"
  data-environment="production"
  data-route="/docs/[slug]"
  data-debug="true"
></script>

Common attributes:

• data-site-id
• data-host
• data-environment
• data-route
• data-debug
• data-mode
• data-auto-track
• data-respect-dnt
• data-do-not-track

For compatibility with Umami-style embeds, the runtime also accepts data-website-id as an alias for data-site-id.

Notes

• The script auto-tracks SPA navigation through the History API unless data-auto-track="false" is used.
• data-mode="development" disables collection without removing the snippet.
• Speed Insights uses the same installed script.
• Localhost traffic is skipped by default in normal auto mode.