MIRA FIVE
ENKostenlos starten

Sehen, welche Kampagne Kunden bringt

Ein Provider im Root-Layout zählt jede Navigation, Ihre Route Handler melden die bezahlten Bestellungen.

Kostenlos startenZur Dokumentation

Paket @mirafive/sdk-next

In 5 Schritten eingerichtet

  1. Pakete installieren

    @mirafive/sdk-next bringt Provider und Server-Einstieg mit. Es setzt Next.js 15.1 oder 16, React 18.3 oder 19 und Node.js 20 oder neuer voraus.

    Code für Schritt 1 der Einrichtung mit Next.js: Pakete installieren. npm install @mirafive/sdk-next @mirafive/sdk-react @mirafive/sdk-browser @mirafive/sdk-server

  2. Zwei Schlüssel eintragen

    Der Website-Schlüssel Ihrer Website-Quelle geht in den Browser. Der geheime Schlüssel einer Server-Quelle bleibt auf dem Server und bekommt nie das Präfix NEXT_PUBLIC_.

    Code für Schritt 2 der Einrichtung mit Next.js: Zwei Schlüssel eintragen. NEXT_PUBLIC_MIRAFIVE_KEY=mf_… MIRAFIVE_SECRET_KEY=mf_…

  3. Provider ins Root-Layout setzen

    Der Provider legt den Browser-Client einmal an und zählt die erste Seite und jede Navigation, im App Router wie im Pages Router.

    Code für Schritt 3 der Einrichtung mit Next.js: Provider ins Root-Layout setzen. import { MiraProvider } from '@mirafive/sdk-next' import type { ReactNode } from 'react' export default function RootLayout({ children }: { children: ReactNode }) { return ( <html lang="de"> <body> <MiraProvider>{children}</MiraProvider> </body> </html> ) }

  4. Eigenes Event senden

    useMira() funktioniert in jeder Client-Komponente unterhalb des Providers. In MIRA FIVE machen Sie aus Events Aktionen und Ziele.

    Code für Schritt 4 der Einrichtung mit Next.js: Eigenes Event senden. 'use client' import { useMira } from '@mirafive/sdk-next' export function AddToCart() { const mira = useMira() return <button onClick={() => mira.track('added_to_cart', { product: 'merino-shirt' })}>In den Warenkorb</button> }

  5. Bestellung vom Server melden

    mira() aus @mirafive/sdk-next/server ist ein Server-Client pro Prozess, gebaut aus MIRAFIVE_SECRET_KEY. In einer Anfrage sendet er nach der Antwort, niemand wartet.

    Code für Schritt 5 der Einrichtung mit Next.js: Bestellung vom Server melden. import { mira } from '@mirafive/sdk-next/server' // Im Route Handler, der 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 füllen sich die Übersicht, Herkunft › Kanäle und Wege › Seiten mit den Zahlen Ihrer App.

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 der Route Handler die Bestellung mit derselben ID, landet der Kauf bei dieser Person, neben der Kampagne, über die sie zuerst kam.

Mit einem Kaufziel auf order_paid zeigt Herkunft › Kanäle Käufer und Umsatz je Kanal und Kampagne. Mit verbundenem Google Ads kommen die Kosten pro Käufer dazu.

Wie erfassen Sie mit Einwilligung?

Stellen Sie die Website-Quelle unter Daten → Quellen auf Vollständig. Plugins sind Funktionen. Setzen Sie den vollen Modus deshalb in einer eigenen Client-Datei und nutzen Sie diese im Root-Layout statt des einfachen Providers:

'use client'

import { identity } from '@mirafive/sdk-browser/identity'
import { MiraProvider } from '@mirafive/sdk-next'
import type { ReactNode } from 'react'

export function Providers({ children }: { children: ReactNode }) {
  return (
    <MiraProvider mode="full" plugins={[identity()]}>
      {children}
    </MiraProvider>
  )
}

In Client-Komponenten übergeben Sie dann die Antwort Ihres Banners und die angemeldete Person:

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.

Wie zählt ein Webhook nur einmal?

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

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

Zeigen Feature-Flags gleich die richtige Variante?

Ja. flagsFor() aus @mirafive/sdk-next/server liest die Feature-Flags im Root-Layout, und der Provider reicht die Antworten an den Browser weiter. Client-Komponenten lesen sie mit useFlag. Ein Code-A/B-Test ist ein Flag, das genauso gelesen wird. Die Einzelheiten stehen in der Dokumentation.

Andere Einrichtungen

Dieselben Zahlen, egal wie Ihre Website gebaut ist.

Zur Dokumentation

Fragen und Antworten

Funktioniert das im Pages Router?
Ja. Setzen Sie MiraProvider in pages/_app.tsx. Vor dem Import des Server-Einstiegs gehört @mirafive/sdk-next in transpilePackages, und in API-Routen rufen Sie await mira().flush() auf.
Warum zwei Schlüssel?
Der Website-Schlüssel steht öffentlich in der Seite und ist durch die erlaubten Origins seiner Quelle geschützt. Der geheime Schlüssel bleibt auf dem Server; gelangt er in einen Browser, ersetzen Sie ihn.
Welche Versionen werden unterstützt?
Next.js 15.1 und 16, React 18.3 und 19 sowie Node.js ab Version 20.

Sehen Sie, welcher Kanal Käufer bringt

Kostenlos bis 25.000 Events im Monat. Ohne Kreditkarte.

Kostenlos startenZu den Preisen