# Sehen, welche Kampagne TanStack-Kunden bringt

> MIRA FIVE in TanStack Start einrichten: ein Provider zählt jede Navigation, eine Middleware meldet bezahlte Bestellungen aus Server-Funktionen.

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

Ein Provider zählt jede Navigation, eine Request-Middleware gibt Ihren Server-Funktionen den Client für bezahlte Bestellungen.

Paket `@mirafive/sdk-tanstack`

## In 5 Schritten eingerichtet

1. ### Pakete installieren  
Es setzt React 18.3 oder 19 und Node.js 20 voraus, der Einstieg `/start` zusätzlich `@tanstack/react-start` 1.168\. Die Middleware lädt das Server-SDK nur auf dem Server, nie ins Browser-Bundle.  
```  
npm install @mirafive/sdk-tanstack @mirafive/sdk-react @mirafive/sdk-browser @mirafive/sdk-server  
```
2. ### Middleware registrieren  
Der geheime Schlüssel einer Server-Quelle aus **Daten → Quellen** gehört in `MIRAFIVE_SECRET_KEY`, nie mit Präfix `VITE_`. Legen Sie die Middleware einmal auf Modulebene an, denn `createStart()` ruft seine Factory pro Anfrage auf.  
```  
import { miraMiddleware } from '@mirafive/sdk-tanstack/start'  
import { createStart } from '@tanstack/react-start'  
const mirafive = miraMiddleware()  
export const startInstance = createStart(() => ({  
  requestMiddleware: [mirafive],  
}))  
```
3. ### Root-Route umschließen  
Der Website-Schlüssel steht in `VITE_MIRAFIVE_KEY` und geht an den Provider, der jede Navigation zählt. Das Paket liest `import.meta.env` nicht selbst, weil Vite es nur in Ihrem eigenen Code ersetzt.  
```  
import { MiraProvider } from '@mirafive/sdk-tanstack'  
import { createRootRoute, HeadContent, Outlet, Scripts } from '@tanstack/react-router'  
import type { ReactNode } from 'react'  
export const Route = createRootRoute({  
  shellComponent: RootDocument,  
  component: RootComponent,  
})  
function RootComponent() {  
  return (  
    <MiraProvider websiteKey={import.meta.env.VITE_MIRAFIVE_KEY}>  
      <Outlet />  
    </MiraProvider>  
  )  
}  
function RootDocument({ children }: { children: ReactNode }) {  
  return (  
    <html lang="de">  
      <head>  
        <HeadContent />  
      </head>  
      <body>  
        {children}  
        <Scripts />  
      </body>  
    </html>  
  )  
}  
```
4. ### Bestellung aus einer Server-Funktion melden  
`context.mira` ist der Client des Server-SDK, einer pro Prozess. `track()` puffert, die Middleware sendet, sobald die Antwort fertig ist, auch wenn der Handler einen Fehler wirft.  
```  
import { createServerFn } from '@tanstack/react-start'  
export const confirmPayment = createServerFn({ method: 'POST' })  
  .validator((data: { userId: string }) => data)  
  .handler(async ({ context, data }) => {  
    context.mira.track('order_paid', { userId: data.userId, properties: { revenue: 328, currency: 'EUR' } })  
  })  
```
5. ### Beide Seiten prüfen  
Im Browser sehen Sie den Pageview unter **Daten → Live**; localhost sendet nur mit `trackLocalhost`. Für den Server rufen Sie diese Funktion einmal auf. Sie liefert den Grund `install_check`, nichts wird gespeichert, danach entfernen Sie sie.  
```  
import { createServerFn } from '@tanstack/react-start'  
export const installCheck = createServerFn({ method: 'POST' }).handler(async ({ context }) => {  
  return context.mira.send([{ name: '$install_check' }])  
})  
```

MIRA FIVE ist Analyse rund um die Person. In TanStack Start deckt ein Paket beide Seiten ab: einen Provider mit den React-Hooks für den Browser und eine Request-Middleware, die Server-Funktionen und Server-Routen einen Client auf `context` legt.

## Wie senden Sie eigene Events?

In Komponenten mit `useMira()` und `track`. `useTrackOnMount(name, properties)` sendet ein Event, wenn eine Komponente erscheint, auch im StrictMode nur einmal.

```tsx
import { useMira } from '@mirafive/sdk-tanstack'

export function AddToCart() {
  const mira = useMira()

  return <button onClick={() => mira.track('added_to_cart', { product: 'merino-shirt' })}>In den Warenkorb</button>
}
```

## Wie kommt eine Bestellung zu ihrem Kanal?

Über die Person. Stellen Sie die Website-Quelle unter **Daten → Quellen** auf **Vollständig** und geben Sie dem Provider den vollen Modus und das Plugin `identity()`:

```tsx
import { identity } from '@mirafive/sdk-browser/identity'
import { MiraProvider } from '@mirafive/sdk-tanstack'
import { Outlet } from '@tanstack/react-router'

function RootComponent() {
  return (
    <MiraProvider websiteKey={import.meta.env.VITE_MIRAFIVE_KEY} mode="full" plugins={[identity()]}>
      <Outlet />
    </MiraProvider>
  )
}
```

`useMira().consent({ statistics: true, experiments: true, targeting: false })` übergibt die Antwort Ihres Banners, `identify(user.id, { plan: user.plan })` folgt der Anmeldung, `reset()` der Abmeldung. Vor der Antwort speichert und sendet der volle Modus nichts. Meldet die Server-Funktion die Bestellung mit derselben ID, landet der Kauf bei dieser Person. Mit einem Kaufziel auf `order_paid` zeigt Herkunft Käufer und Umsatz je Kanal und Kampagne.

## Wie zählt ein Webhook nur einmal?

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

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

Im Tab **Einbauen** der Quelle steht **Von Ihrem Coding-Agent einbauen lassen**: ein Prompt für Claude Code, Cursor oder Codex mit allen Schritten und der Prüfung. Workers und Vercel beschreibt die [Dokumentation](https://docs.mirafive.io/sdks/tanstack-start), die Aufgabenteilung die [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)
- [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

### Warum fehlen Server-Events auf Cloudflare Workers oder Vercel?

Die Antwort endet vor dem Senden. Übergeben Sie das `waitUntil` der Plattform an `miraMiddleware({ waitUntil })`, aus `cloudflare:workers` oder `@vercel/functions`.

### Kann ich context.mira in einem Route-Loader nutzen?

Nein. Loader laufen auf beiden Seiten, rufen Sie dort eine Server-Funktion auf. Server-Funktionen und Server-Routen sehen `context.mira`.

### Geht das auch mit TanStack Router ohne Start?

Ja. Eine Single-Page-App braucht `@mirafive/sdk-tanstack`, `@mirafive/sdk-react` und `@mirafive/sdk-browser`; `MiraProvider` umschließt dann den `RouterProvider`.

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