JavaScript SDK
Zero-dependency, privacy-first analytics for any website. No build step,
no package manager required — one <script> tag is
enough for most sites.
Get your Site ID
Every snippet below needs a Site ID, from Integration Hub → Add New App → Web in the dashboard. Web apps do not need a secret key — the backend authenticates by checking that the request's Origin matches the domain you registered.
Option A — Zero-code (recommended)
Paste this once, right before </head> or
</body>. It auto-tracks page views, including
client-side route changes in SPAs, with no further code:
<script src="https://mitranalytics.dev/vendor/mitr.js"
data-site-id="YOUR_SITE_ID"
async defer></script> | Attribute | Default | Purpose |
|---|---|---|
data-base-url | https://api.mitranalytics.dev/api/v1 | Override if your workspace uses a different API host. |
data-auto-track | true | Set to "false" to disable automatic page-view tracking. |
data-debug | false | Set to "true" to log SDK activity to the console. |
No-code platforms (WordPress, Shopify, Webflow, Squarespace, Wix): paste the same script tag into your site's "Custom Code" / "Header Scripts" / "Tracking Code" settings.
Option B — Developer / SPA usage
<script src="https://mitranalytics.dev/vendor/mitr.js"></script>
<script>
Mitr.init('YOUR_SITE_ID', {
baseUrl: 'https://api.mitranalytics.dev/api/v1', // optional
autoTrack: true, // optional, default true
debug: false, // optional
});
</script> API
Mitr.init(siteId, options?) // call once, on page load Mitr.track(eventType, metadata?) // custom event Mitr.pageView(path?, metadata?) // manual page view (auto-tracking covers most cases) Mitr.identify(userId) // tie future events to a real user Mitr.reset() // call on logout — reverts to anonymous
identify/track/pageView never send
raw IDs — the SDK hashes (SHA-256) the id client-side, salted with your
Site ID, before it ever leaves the browser.
Framework examples
React (any SPA):
useEffect(() => { Mitr.init('YOUR_SITE_ID'); }, []);
// Route changes are auto-tracked — no per-route code needed. Next.js (App Router) — app/layout.jsx:
'use client';
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html><body>
{children}
<Script src="https://mitranalytics.dev/vendor/mitr.js" data-site-id="YOUR_SITE_ID" strategy="afterInteractive" />
</body></html>
);
} Vue / Nuxt: add the same script tag to
index.html (Vue) or nuxt.config.ts's
app.head.script (Nuxt) — auto-tracking picks up Vue Router
navigation the same way.
Custom events
Mitr.track('signup_completed', { plan: 'pro', source: 'homepage_cta' });
Mitr.track('checkout_completed', { value: 49.99, currency: 'USD' }); Identifying users (login/logout)
// After a successful login: Mitr.identify(user.id); // On logout: Mitr.reset();
Resilience
Events are batched (flushed every 5s or every 10 events, whichever comes
first) and persisted to localStorage between flushes — a
page reload, a network blip, or the tab closing won't lose queued
events. On tab close/hide, any remaining events are flushed via
navigator.sendBeacon as a last resort.