MIRA FIVE
ENKostenlos starten

Sehen, woher die Käufer Ihrer App kommen

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

Kostenlos startenZur Dokumentation

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.

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

    Code für Schritt 2 der Einrichtung mit React: Client anlegen. 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.

    Code für Schritt 3 der Einrichtung mit React: Eigenes Event senden. 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.

    Code für Schritt 4 der Einrichtung mit React: Bestellung vom Server melden. 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, über welche Kanäle Ihre App besucht wird, und Wege › Seiten, 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?

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

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:

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.

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

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 true oder false. Ein Code-A/B-Test ist ein Flag, das Ihre App genauso liest. Alles Weitere steht in der Dokumentation.

Andere Einrichtungen

Dieselben Zahlen, egal wie Ihre Website gebaut ist.

Zur Dokumentation

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.

Sehen Sie, welcher Kanal Käufer bringt

Kostenlos bis 25.000 Events im Monat. Ohne Kreditkarte.

Kostenlos startenZu den Preisen