MIRA FIVE
ENKostenlos starten

Sehen, welcher Kanal Nuxt-Kunden bringt

Ein Modul zählt jede Route, Ihre Server-Routen melden die bezahlten Bestellungen.

Kostenlos startenZur Dokumentation

Paket @mirafive/sdk-nuxt

In 5 Schritten eingerichtet

  1. Pakete installieren

    Das Modul baut auf dem Vue-, Browser- und Server-SDK auf. Es setzt Nuxt 4 und Node.js 20 oder neuer voraus; das Server-SDK gelangt nie in den Browser.

    Code für Schritt 1 der Einrichtung mit Nuxt: Pakete installieren. npm install @mirafive/sdk-nuxt @mirafive/sdk-vue @mirafive/sdk-browser @mirafive/sdk-server

  2. Modul eintragen

    Pageviews brauchen keinen Code, das Modul folgt dem Nuxt-Router. Unter features steht, was außer Pageviews ins Bundle kommt, hier Feature-Flags.

    Code für Schritt 2 der Einrichtung mit Nuxt: Modul eintragen. export default defineNuxtConfig({ modules: ['@mirafive/sdk-nuxt'], mirafive: { features: ['flags'], }, })

  3. Zwei Schlüssel eintragen

    Der Website-Schlüssel ist öffentlich. Der geheime Schlüssel einer Server-Quelle bleibt in der privaten Runtime-Config, nie in runtimeConfig.public.

    Code für Schritt 3 der Einrichtung mit Nuxt: Zwei Schlüssel eintragen. NUXT_PUBLIC_MIRAFIVE_KEY=mf_… MIRAFIVE_SECRET_KEY=mf_…

  4. Eigenes Event senden

    useMira() wird automatisch importiert. Beim Server-Rendering tut der Aufruf nichts, dieselbe Komponente läuft also auf beiden Seiten.

    Code für Schritt 4 der Einrichtung mit Nuxt: Eigenes Event senden. <script setup lang="ts"> const mira = useMira() </script> <template> <button @click="mira.track('added_to_cart', { product: 'merino-shirt' })">In den Warenkorb</button> </template>

  5. Bestellung aus einer Server-Route melden

    useServerMira(event) steht in server/ automatisch bereit, mit dem geheimen Schlüssel. Das Modul sendet die Events der Anfrage nach der Antwort.

    Code für Schritt 5 der Einrichtung mit Nuxt: Bestellung aus einer Server-Route melden. // In der Server-Route, die die Zahlung bestätigt useServerMira(event).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, woher Ihre Besuche kommen, und Wege › Seiten, welche Routen 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 die Server-Route 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. 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. Dann setzen Sie mode: 'full' in nuxt.config.ts. Das Modul nimmt so den Code für Kennungen ins Bundle. Ihr Banner übergibt die Antwort, nach der Anmeldung folgt identify:

const mira = useMira()

// Aus Ihrem Consent-Banner
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, und consent(false) löscht, was auf dem Gerät liegt. 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 useServerMira(event).send(
  [{ name: 'order_paid', userId: order.customerId, properties: { revenue: 328, currency: 'EUR' } }],
  { idempotencyKey: `order-${order.id}` },
)

Liest das Modul Feature-Flags?

Ja. useFlag und useFlagConfig liefern schreibgeschützte Refs, Server-Routen lesen Feature-Flags mit miraFlagsFor(event, { userId }). Ein Code-A/B-Test ist ein Flag, das genauso gelesen wird. Alle Optionen stehen in der Dokumentation.

Andere Einrichtungen

Dieselben Zahlen, egal wie Ihre Website gebaut ist.

Zur Dokumentation

Fragen und Antworten

Warum kommt von localhost nichts an?
Auf localhost sendet das Browser-SDK nichts und schreibt einen Hinweis in die Konsole. Testen Sie auf der ausgerollten Website oder mit dem Production-Build auf einem anderen Host.
Flackern Feature-Flags beim ersten Bild?
Nein. Mit Flags und geheimem Schlüssel liest jedes Server-Rendering die Flags der Person und schreibt sie in den Head. Gecachte und vorgerenderte Routen laden Flags im Browser.
Gibt es das auch für Vue ohne Nuxt?
Ja, als @mirafive/sdk-vue für Vue 3. Darauf baut das Modul auf.

Sehen Sie, welcher Kanal Käufer bringt

Kostenlos bis 25.000 Events im Monat. Ohne Kreditkarte.

Kostenlos startenZu den Preisen