# See which channel your buyers came from

> Add MIRA FIVE to a Vite or plain TypeScript app with @mirafive/sdk-browser, one small import per feature, and record paid orders with their revenue.

URL: https://mirafive.io/for/javascript  
Updated: 2026-09-28

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

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).  
```  
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.  
```  
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.  
```  
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](https://mirafive.io/for/nodejs) shows it.  
```  
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:

```ts
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](https://mirafive.io/for/react) and [Vue](https://mirafive.io/for/vue) setups. A site without a build step uses the [script tag](https://mirafive.io/for/website).

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](https://docs.mirafive.io/sdks/browser) list every plugin and option, and the [setup page](https://mirafive.io/setup) shows who does what, in order.

## Other setups

The same numbers, whichever way your site is built.

- [Astro](https://mirafive.io/for/astro)
- [Next.js](https://mirafive.io/for/nextjs)
- [React](https://mirafive.io/for/react)
- [Laravel](https://mirafive.io/for/laravel)
- [Nuxt](https://mirafive.io/for/nuxt)
- [Symfony](https://mirafive.io/for/symfony)
- [PHP](https://mirafive.io/for/php)
- [Vue](https://mirafive.io/for/vue)
- [TanStack Start](https://mirafive.io/for/tanstack-start)
- [Node.js](https://mirafive.io/for/nodejs)
- [Convex](https://mirafive.io/for/convex)
- [any website](https://mirafive.io/for/website)

[Read the docs](https://docs.mirafive.io)

## 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 free](https://app.mirafive.io/register)[See pricing](https://mirafive.io/pricing)