Sehen, über welchen Kanal Ihre Käufer kamen

Ein Client zählt jede Navigation mit jedem Router, ein Aufruf meldet die bezahlte Bestellung mit Umsatz.

Paket @mirafive/sdk-browser

In 5 Schritten eingerichtet

  1. Paket installieren

    Das Browser-SDK ist reines ESM, ohne Abhängigkeiten, für ES2022-Browser. Jede Funktion ist ein eigener Import; Kern und Pageviews wiegen 2,76 kB (min + gzip).

    Code für Schritt 1 der Einrichtung mit JavaScript: Paket installieren. npm install @mirafive/sdk-browser

  2. Website-Schlüssel eintragen

    Legen Sie den Website-Schlüssel Ihrer Website-Quelle aus Daten → Quellen in der öffentlichen Variable Ihres Bundlers ab. MIRAFIVE_SECRET_KEY gehört nie in den Browser; createMira wirft bei einer Option secretKey.

    Code für Schritt 2 der Einrichtung mit JavaScript: Website-Schlüssel eintragen. VITE_MIRAFIVE_KEY=mf_…

  3. Client anlegen

    Einmal, in Code, der nur im Browser läuft, und aus Ihrem Einstieg importiert. pageviews() zählt die erste Seite und jede Navigation mit jedem Router, ohne Router-Hook.

    Code für Schritt 3 der Einrichtung mit JavaScript: Client anlegen. import { createMira } from '@mirafive/sdk-browser' import { pageviews } from '@mirafive/sdk-browser/pageviews' export const mira = createMira({ key: import.meta.env.VITE_MIRAFIVE_KEY, plugins: [pageviews()], })

  4. Bestellung melden

    Auf der Seite, die die Zahlung bestätigt, senden Sie die Bestellung mit Umsatz und Währung. Im vollen Modus mit Einwilligung landet sie bei der Person. Vom Server ist sie robuster gegen Adblocker und geschlossene Tabs, siehe Node.js.

    Code für Schritt 4 der Einrichtung mit JavaScript: Bestellung melden. import { mira } from './mira' // Auf der Bestellbestätigung mira.track('order_paid', { revenue: 328, currency: 'EUR' })

  5. Live-Ansicht prüfen

    Öffnen Sie die App unter der echten Domain; von localhost kommt nur mit trackLocalhost: true etwas an. mira.flush() sendet sofort, der Batch an events.mirafive.io antwortet mit 202, der Pageview erscheint unter Daten → Live.

MIRA FIVE ist Analyse rund um die Person. @mirafive/sdk-browser ist der JavaScript-Client für Websites, die Sie selbst bündeln, und der Client, auf dem die Pakete für React und Vue aufbauen. Ausgeliefert wird nur, was Sie importieren. autocapture() aus @mirafive/sdk-browser/autocapture erfasst Klicks, Formulare und Feldänderungen ohne Code, nie aber, was jemand eintippt.

Wie kommt eine Bestellung zu ihrem Kanal?

Über die Person. Stellen Sie die Website-Quelle unter Daten → Quellen auf Vollständig, setzen Sie dann mode: 'full' und das Plugin identity():

import { createMira } from '@mirafive/sdk-browser'
import { identity } from '@mirafive/sdk-browser/identity'
import { pageviews } from '@mirafive/sdk-browser/pageviews'

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

Ihr Banner übergibt die Antwort an mira.consent(…): true erlaubt nur die Statistik, false löscht Kennungen und Person, ein Objekt { statistics, experiments, targeting } antwortet je Bereich. Nach der Anmeldung verknüpft mira.identify(user.id, { plan: user.plan }) die Besuche mit Ihrer Nutzer-ID, mira.reset() löst sie bei der Abmeldung. Vor der Antwort speichert und sendet der volle Modus nichts; Kennungen liegen im localStorage, nie in Cookies.

Die Bestellung landet dann bei dieser Person, neben dem Kanal ihres ersten Besuchs. Mit einem Kaufziel auf order_paid zeigt Herkunft Käufer und Umsatz je Kanal.

Welches Paket passt zu einem Framework?

React, Next.js, TanStack Start, Vue, Nuxt und Astro haben eigene Pakete, die diesen Client für Sie anlegen, etwa für React und Vue. Ohne Build-Schritt nehmen Sie das Script-Tag.

Im Tab Einbauen der Quelle steht Von Ihrem Coding-Agent einbauen lassen: ein Prompt für Claude Code, Cursor oder Codex mit Schlüssel, allen Schritten und der Prüfung. Alle Plugins stehen in der Dokumentation, die Aufgabenteilung auf der Einrichtungsseite.

Andere Einrichtungen

Dieselben Zahlen, egal wie Ihre Website gebaut ist.

Fragen und Antworten

Für welche Apps ist das Paket gedacht?
Für jedes Frontend, das Sie mit Vite, webpack, esbuild oder Rollup bündeln und für das es kein MIRA-FIVE-Framework-Paket gibt: Svelte, Solid, Angular, Lit oder reines TypeScript.
Wie viel wiegt es im Bundle?
Kern und Pageviews 2,76 kB (min + gzip), alle Plugins zusammen 7,31 kB. Was Sie nicht importieren, wird nicht ausgeliefert.
Darf createMira beim Server-Rendering laufen?
Nein, es braucht window. Legen Sie einen Client pro Seite an, in Code, der nur im Browser läuft. Ein zweiter Client bleibt untätig.

Sehen Sie, welcher Kanal Käufer bringt

Kostenlos bis 25.000 Events im Monat. Ohne Kreditkarte.