# Sehen, woher die Käufer Ihrer App kommen

> MIRA FIVE in React einrichten: createMira und ein Provider für jede Navigation, eigene Events mit useMira und bezahlte Bestellungen vom Server.

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

Ein Client und ein Provider zählen jede Navigation, Ihr Server meldet die bezahlten Bestellungen.

Paket `@mirafive/sdk-react`

## In 4 Schritten eingerichtet

1. ### Pakete installieren  
Das React-SDK baut auf dem Browser-SDK auf. Es setzt React 18.3 oder 19 voraus.  
```  
npm install @mirafive/sdk-react @mirafive/sdk-browser  
```
2. ### Client anlegen  
Legen Sie den Website-Schlüssel Ihrer Website-Quelle aus **Daten → Quellen** in `VITE_MIRAFIVE_KEY` ab. `pageviews()` zählt jede Navigation, mit jedem Router.  
```  
import { createMira } from '@mirafive/sdk-browser'  
import { flags } from '@mirafive/sdk-browser/flags'  
import { pageviews } from '@mirafive/sdk-browser/pageviews'  
import { MiraProvider } from '@mirafive/sdk-react'  
import { createRoot } from 'react-dom/client'  
import { App } from './App'  
const mira = createMira({  
  key: import.meta.env.VITE_MIRAFIVE_KEY,  
  plugins: [pageviews(), flags()],  
})  
createRoot(document.getElementById('root')!).render(  
  <MiraProvider client={mira}>  
    <App />  
  </MiraProvider>,  
)  
```
3. ### Eigenes Event senden  
`useMira()` funktioniert in jeder Komponente unterhalb des Providers. In MIRA FIVE machen Sie aus Events Aktionen und Ziele.  
```  
import { useMira } from '@mirafive/sdk-react'  
export function AddToCart() {  
  const mira = useMira()  
  return <button onClick={() => mira.track('added_to_cart', { product: 'merino-shirt' })}>In den Warenkorb</button>  
}  
```
4. ### Bestellung vom Server melden  
Ihr Backend meldet den Kauf mit `@mirafive/sdk-server` und dem geheimen Schlüssel einer Server-Quelle, sobald die Zahlung bestätigt ist. Der Schlüssel bleibt auf dem Server.  
```  
import { Mira } from '@mirafive/sdk-server'  
const mira = new Mira({ key: process.env.MIRAFIVE_SECRET_KEY })  
// Dort, wo Ihr Backend die Zahlung bestätigt  
mira.track('order_paid', {  
  userId: order.customerId,  
  properties: { revenue: 328, currency: 'EUR' },  
})  
```

## Was sehen Sie nach der Installation?

Die Einrichtung oben zählt ohne Cookies und ohne Speicher auf dem Gerät: Besuche, Seiten, Kanäle, Kampagnen, Länder, Geräte und Events. Danach zeigen die Übersicht und [Herkunft › Kanäle](https://mirafive.io/de/produkt/herkunft), über welche Kanäle Ihre App besucht wird, und [Wege › Seiten](https://mirafive.io/de/produkt/wege), welche Ansichten Einstiege bringen.

## Wie kommt eine Bestellung zu ihrem Kanal?

Über die Person. Mit Einwilligung führt der Browser eine Kennung, und `identify` verknüpft sie beim Anmelden mit Ihrer Nutzer-ID. Meldet Ihr Server die Bestellung mit derselben ID, landet der Kauf bei dieser Person, neben ihrem ersten Besuch und dessen Kanal.

Mit einem Kaufziel auf `order_paid` zeigt Herkunft › Kanäle Käufer und Umsatz je Kanal. Wie Sie diese Zahlen lesen, erklärt [Welcher Kanal bringt zahlende Kunden?](https://mirafive.io/de/lernen/welcher-kanal-bringt-zahlende-kunden)

## Wie erfassen Sie mit Einwilligung?

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

```tsx
import { identity } from '@mirafive/sdk-browser/identity'

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

Ihr Banner übergibt die Antwort, nach der Anmeldung folgt `identify`:

```tsx
const mira = useMira()

// Aus dem Callback Ihres Consent-Banners
mira.consent({ statistics: true, experiments: true, targeting: false })

// Nach der Anmeldung, mit Ihrer eigenen Nutzer-ID
mira.identify(user.id, { plan: user.plan })

// Nach der Abmeldung
mira.reset()
```

Vor der Antwort speichert und sendet der volle Modus nichts. Kennungen liegen im localStorage, nie in Cookies. Die drei Bereiche der Einwilligung erklärt die [Dokumentation](https://docs.mirafive.io/guides/consent).

## Wie zählt ein Webhook nur einmal?

Mit `send` und einem Idempotenzschlüssel. Eine Wiederholung mit demselben Schlüssel wird einmal gespeichert:

```ts
await mira.send(
  [{ name: 'order_paid', userId: order.customerId, properties: { revenue: 328, currency: 'EUR' } }],
  { idempotencyKey: `order-${order.id}` },
)
```

## Liest derselbe Client Feature-Flags?

Ja, über das Plugin `flags()` aus Schritt 2\. `useFlag('new-checkout', false)` liefert die Variante, bei einem An/Aus-[Feature-Flag](https://mirafive.io/de/glossar/feature-flag) `true` oder `false`. Ein Code-[A/B-Test](https://mirafive.io/de/glossar/ab-test)ist ein Flag, das Ihre App genauso liest. Alles Weitere steht in der [Dokumentation](https://docs.mirafive.io/sdks/react).

## Andere Einrichtungen

Dieselben Zahlen, egal wie Ihre Website gebaut ist.

- [Next.js](https://mirafive.io/de/fuer/nextjs)
- [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)
- [JavaScript](https://mirafive.io/de/fuer/javascript)
- [jede Website](https://mirafive.io/de/fuer/website)

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

## Fragen und Antworten

### Brauchen Sie einen Router-Hook für Pageviews?

Nein. pageviews() zählt die erste Seite und jede Navigation über die Navigation API oder die History API, mit jedem Router.

### Wie senden Sie ein Event, wenn eine Komponente erscheint?

Mit useTrackOnMount(name, properties). Es sendet einmal, auch im StrictMode.

### Gilt das auch für Next.js?

Nein, dort nutzen Sie @mirafive/sdk-next. Es legt den Client selbst an und bringt die Server-Seite mit, siehe [Einrichtung für Next.js](https://mirafive.io/de/fuer/nextjs).

## 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)