MIRA FIVE
ENKostenlos starten

Sehen, welche Kampagne TanStack-Kunden bringt

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

Kostenlos startenZur Dokumentation

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.

    Code für Schritt 1 der Einrichtung mit TanStack Start: Pakete installieren. 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.

    Code für Schritt 2 der Einrichtung mit TanStack Start: Middleware registrieren. 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.

    Code für Schritt 3 der Einrichtung mit TanStack Start: Root-Route umschließen. 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.

    Code für Schritt 4 der Einrichtung mit TanStack Start: Bestellung aus einer Server-Funktion melden. 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.

    Code für Schritt 5 der Einrichtung mit TanStack Start: Beide Seiten prüfen. 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.

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():

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:

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, die Aufgabenteilung die Einrichtungsseite.

Andere Einrichtungen

Dieselben Zahlen, egal wie Ihre Website gebaut ist.

Zur Dokumentation

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 startenZu den Preisen