# Sehen, über welchen Kanal Ihre Käufer kamen

> MIRA FIVE in einer Vite- oder TypeScript-App ohne Framework-Paket einrichten: @mirafive/sdk-browser, ein Import je Funktion, Bestellungen mit Umsatz.

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

Ein Client zählt jede Navigation mit jedem Router, ein Aufruf meldet die bezahlte Bestellung mit Umsatz.

Paket `@mirafive/sdk-browser`

## In 5 Schritten eingerichtet

1. ### Paket installieren  
Das Browser-SDK ist reines ESM, ohne Abhängigkeiten, für ES2022-Browser. Jede Funktion ist ein eigener Import; Kern und Pageviews wiegen 2,76 kB (min + gzip).  
```  
npm install @mirafive/sdk-browser  
```
2. ### Website-Schlüssel eintragen  
Legen Sie den Website-Schlüssel Ihrer Website-Quelle aus **Daten → Quellen** in der öffentlichen Variable Ihres Bundlers ab. `MIRAFIVE_SECRET_KEY` gehört nie in den Browser; `createMira` wirft bei einer Option `secretKey`.  
```  
VITE_MIRAFIVE_KEY=mf_…  
```
3. ### Client anlegen  
Einmal, in Code, der nur im Browser läuft, und aus Ihrem Einstieg importiert. `pageviews()` zählt die erste Seite und jede Navigation mit jedem Router, ohne 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. ### Bestellung melden  
Auf der Seite, die die Zahlung bestätigt, senden Sie die Bestellung mit Umsatz und Währung. Im vollen Modus mit Einwilligung landet sie bei der Person. Vom Server ist sie robuster gegen Adblocker und geschlossene Tabs, siehe [Node.js](https://mirafive.io/de/fuer/nodejs).  
```  
import { mira } from './mira'  
// Auf der Bestellbestätigung  
mira.track('order_paid', { revenue: 328, currency: 'EUR' })  
```
5. ### Live-Ansicht prüfen  
Öffnen Sie die App unter der echten Domain; von localhost kommt nur mit `trackLocalhost: true` etwas an. `mira.flush()` sendet sofort, der Batch an `events.mirafive.io` antwortet mit `202`, der Pageview erscheint unter **Daten → Live**.

MIRA FIVE ist Analyse rund um die Person. `@mirafive/sdk-browser` ist der JavaScript-Client für Websites, die Sie selbst bündeln, und der Client, auf dem die Pakete für React und Vue aufbauen. Ausgeliefert wird nur, was Sie importieren. `autocapture()` aus `@mirafive/sdk-browser/autocapture` erfasst Klicks, Formulare und Feldänderungen ohne Code, nie aber, was jemand eintippt.

## Wie kommt eine Bestellung zu ihrem Kanal?

Über die Person. Stellen Sie die Website-Quelle unter **Daten → Quellen** auf **Vollständig**, setzen Sie dann `mode: 'full'` und das Plugin `identity()`:

```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()],
})
```

Ihr Banner übergibt die Antwort an `mira.consent(…)`: `true` erlaubt nur die Statistik, `false` löscht Kennungen und Person, ein Objekt `{ statistics, experiments, targeting }` antwortet je Bereich. Nach der Anmeldung verknüpft `mira.identify(user.id, { plan: user.plan })` die Besuche mit Ihrer Nutzer-ID, `mira.reset()` löst sie bei der Abmeldung. Vor der Antwort speichert und sendet der volle Modus nichts; Kennungen liegen im localStorage, nie in Cookies.

Die Bestellung landet dann bei dieser Person, neben dem Kanal ihres ersten Besuchs. Mit einem Kaufziel auf `order_paid` zeigt Herkunft Käufer und Umsatz je Kanal.

## Welches Paket passt zu einem Framework?

React, Next.js, TanStack Start, Vue, Nuxt und Astro haben eigene Pakete, die diesen Client für Sie anlegen, etwa für [React](https://mirafive.io/de/fuer/react) und [Vue](https://mirafive.io/de/fuer/vue). Ohne Build-Schritt nehmen Sie das [Script-Tag](https://mirafive.io/de/fuer/website).

Im Tab **Einbauen** der Quelle steht **Von Ihrem Coding-Agent einbauen lassen**: ein Prompt für Claude Code, Cursor oder Codex mit Schlüssel, allen Schritten und der Prüfung. Alle Plugins stehen in der [Dokumentation](https://docs.mirafive.io/sdks/browser), die Aufgabenteilung auf der [Einrichtungsseite](https://mirafive.io/de/einrichtung).

## Andere Einrichtungen

Dieselben Zahlen, egal wie Ihre Website gebaut ist.

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

[Zur Dokumentation](https://docs.mirafive.io)

## Fragen und Antworten

### Für welche Apps ist das Paket gedacht?

Für jedes Frontend, das Sie mit Vite, webpack, esbuild oder Rollup bündeln und für das es kein MIRA-FIVE-Framework-Paket gibt: Svelte, Solid, Angular, Lit oder reines TypeScript.

### Wie viel wiegt es im Bundle?

Kern und Pageviews 2,76 kB (min + gzip), alle Plugins zusammen 7,31 kB. Was Sie nicht importieren, wird nicht ausgeliefert.

### Darf createMira beim Server-Rendering laufen?

Nein, es braucht `window`. Legen Sie einen Client pro Seite an, in Code, der nur im Browser läuft. Ein zweiter Client bleibt untätig.

## Sehen Sie, welcher Kanal Käufer bringt

Kostenlos bis 25.000 Events im Monat. Ohne Kreditkarte.

[Kostenlos starten](https://app.mirafive.io/register)[Zu den Preisen](https://mirafive.io/de/preise)