MIRA FIVE
DEStart free

See which channel your buyers came from

One client counts every navigation with any router, and one call records the paid order with its revenue.

Start freeRead the docs

Package @mirafive/sdk-browser

Set up in 5 steps

  1. Install the package

    The browser SDK is ESM only, has no dependencies and targets ES2022 browsers. Every feature is its own import, and the core with pageviews is 2.76 kB (min + gzip).

    Code for step 1 of the JavaScript setup: Install the package. npm install @mirafive/sdk-browser

  2. Add the website key

    Put the website key of your website source from Data → Sources in your bundler's public variable. Never ship MIRAFIVE_SECRET_KEY to the browser; createMira throws for a secretKey option.

    Code for step 2 of the JavaScript setup: Add the website key. VITE_MIRAFIVE_KEY=mf_…

  3. Create the client

    Create it once, in code that runs only in the browser, and import the module from your entry point. pageviews() records the landing page and every client-side navigation for any router, so you add no router hook.

    Code for step 3 of the JavaScript setup: Create the client. import { createMira } from '@mirafive/sdk-browser' import { pageviews } from '@mirafive/sdk-browser/pageviews' export const mira = createMira({ key: import.meta.env.VITE_MIRAFIVE_KEY, plugins: [pageviews()], })

  4. Record the paid order

    On the page that confirms the payment, send the order with its revenue and currency. In full mode with consent it lands on the person who bought. A send from your server is sturdier against ad blockers and closed tabs; the Node.js setup shows it.

    Code for step 4 of the JavaScript setup: Record the paid order. import { mira } from './mira' // On the order confirmation page mira.track('order_paid', { revenue: 328, currency: 'EUR' })

  5. Check the live view

    Open the app on its real domain; events from localhost are dropped unless you pass trackLocalhost: true. Call mira.flush() to send at once, look for the batch to events.mirafive.io answering 202, and find the pageview under Data → Live.

MIRA FIVE is analytics built around the person. @mirafive/sdk-browser is its JavaScript client for sites you bundle yourself, and the client the React and Vue packages wrap. You ship only the features you import: add autocapture() from @mirafive/sdk-browser/autocapture for clicks, form submits and field changes without code. It never records what a visitor typed.

How does a paid order reach its channel?

Through the person who paid. Switch the website source to Full under Data → Sources, then set full mode and add the identity() plugin:

import { createMira } from '@mirafive/sdk-browser'
import { identity } from '@mirafive/sdk-browser/identity'
import { pageviews } from '@mirafive/sdk-browser/pageviews'

export const mira = createMira({
  key: import.meta.env.VITE_MIRAFIVE_KEY,
  mode: 'full',
  plugins: [pageviews(), identity()],
})

Wire your banner’s callback to mira.consent(…): true grants statistics only, false forgets the ids and the user, and { statistics, experiments, targeting } answers by scope. After sign-in, mira.identify(user.id, { plan: user.plan }) links the visitor’s history to your own user id, and mira.reset() forgets it on sign-out. Before an answer, full mode stores and sends nothing, and ids live in localStorage, never in cookies.

The paid order then lands on that person, next to the channel of their first visit. Create a purchase goal for order_paid, and Acquisition shows buyers and revenue per channel and campaign.

Which package fits a framework?

React, Next.js, TanStack Start, Vue, Nuxt and Astro each have a package that creates this client for you: see the React and Vue setups. A site without a build step uses the script tag.

The source’s Install tab has Let your coding agent install it, a prompt for Claude Code, Cursor or Codex with the key, every step and the check. The browser SDK docs list every plugin and option, and the setup page shows who does what, in order.

Other setups

The same numbers, whichever way your site is built.

Read the docs

Questions and answers

Which apps is this package for?
Any frontend you bundle with Vite, webpack, esbuild or Rollup without a MIRA FIVE framework package, such as Svelte, Solid, Angular, Lit or plain TypeScript. React, Vue, Next.js, Nuxt, Astro and TanStack Start have their own.
How much does it add to my bundle?
The core with pageviews is 2.76 kB (min + gzip), and every plugin together 7.31 kB. What you do not import is not shipped.
Can I call createMira during a server render?
No, it needs window. Create one client per page, in code that runs only in the browser. A second client on the same page stays inert and warns in development.
Can TypeScript check my event names?
Yes. Pass an event map to createMira<Events>(), and TypeScript checks every track call. Typed events are types only and add nothing to the bundle.

See which channel brings buyers

Free for 25,000 events a month. No card needed.

Start freeSee pricing