MIRA FIVE
ENKostenlos starten

Sehen, welche Astro-Seiten Kunden bringen

Eine Integration in astro.config.mjs zählt jede Seite, ein Endpunkt meldet die bezahlten Bestellungen.

Kostenlos startenZur Dokumentation

Paket @mirafive/sdk-astro

In 4 Schritten eingerichtet

  1. Pakete installieren

    Die Integration bündelt das Browser-SDK in Ihren eigenen Build. Sie setzt Astro 7 und Node.js 22.12 oder neuer voraus.

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

  2. Integration eintragen

    Legen Sie den Website-Schlüssel Ihrer Website-Quelle aus Daten → Quellen als PUBLIC_MIRAFIVE_KEY in .env ab. Pageviews gehen beim Laden und bei jeder Navigation raus, auch mit <ClientRouter />.

    Code für Schritt 2 der Einrichtung mit Astro: Integration eintragen. import mirafive from '@mirafive/sdk-astro' import { defineConfig } from 'astro/config' export default defineConfig({ integrations: [mirafive()], })

  3. Eigenes Event senden

    mirafive aus @mirafive/sdk-astro/client funktioniert in jedem Script und jeder Island. Aufrufe vor dem Start warten in einer Schlange.

    Code für Schritt 3 der Einrichtung mit Astro: Eigenes Event senden. <button id="add-to-cart">In den Warenkorb</button> <script> import { mirafive } from '@mirafive/sdk-astro/client' document.getElementById('add-to-cart')?.addEventListener('click', () => { mirafive('track', 'added_to_cart', { product: 'merino-shirt' }) }) </script>

  4. Bestellung aus einem Endpunkt melden

    Vom Server sendet die Integration nichts. Installieren Sie dafür @mirafive/sdk-server und nutzen Sie den geheimen Schlüssel einer Server-Quelle. Der Endpunkt rendert auf Anfrage (export const prerender = false).

    Code für Schritt 4 der Einrichtung mit Astro: Bestellung aus einem Endpunkt melden. import { Mira } from '@mirafive/sdk-server' import { getSecret } from 'astro:env/server' const mira = new Mira({ key: getSecret('MIRAFIVE_SECRET_KEY'), host: getSecret('MIRAFIVE_HOST') }) // Im Endpunkt, der die Zahlung bestätigt mira.track('order_paid', { userId: order.customerId, properties: { revenue: 328, currency: 'EUR' }, }) await mira.flush()

Was sehen Sie nach der Installation?

Die Integration 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 Seiten 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 der Endpunkt 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 das Ziel anlegen, zeigt Kaufziel für Bestellungen und Tarife einrichten.

Wie erfassen Sie mit Einwilligung?

Stellen Sie die Website-Quelle unter Daten → Quellen auf Vollständig. Dann setzen Sie mode: 'full'. Die Integration nimmt so den Code für Kennungen ins Bundle:

export default defineConfig({
  integrations: [mirafive({ mode: 'full' })],
})

Ihr Banner übergibt die Antwort, nach der Anmeldung folgt identify:

import { mirafive } from '@mirafive/sdk-astro/client'

// Aus Ihrem Consent-Banner
mirafive('consent', { statistics: true, experiments: true, targeting: false })
mirafive('consent', false) // löscht, was auf dem Gerät gespeichert ist

// Nach der Anmeldung, mit Ihrer eigenen Nutzer-ID
mirafive('identify', user.id, { plan: user.plan })

Vor der Antwort speichert und sendet der volle Modus nichts. true statt eines Objekts erlaubt nur die Statistik. 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}` },
)

Liest die Integration Feature-Flags?

Ja, mit features: ['flags']. Feature-Flags lesen Sie im Listener mirafive('flags', …), der beim Laden und bei jeder Änderung läuft. Auf Seiten, die auf Anfrage rendern, liefert miraFlagsFor() aus @mirafive/sdk-astro/server die Antworten schon vor dem ersten Bild. 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

Wird unter astro dev erfasst?
Nein, damit Testbesuche Ihre Zahlen unberührt lassen. Zum Testen schalten Sie die Erfassung mit der Option dev: true ein.
Lädt die Seite ein Script von einer fremden Domain?
Nein. Die Integration baut den Code in Ihr eigenes Bundle, die Seite lädt ihn von Ihrer Domain. Events gehen an events.mirafive.io.
Braucht die Standardeinrichtung ein Cookie-Banner?
Sie setzt keine Cookies und speichert nichts auf dem Gerät. Ob Sie ein Banner brauchen, hängt davon ab, was Ihre Website sonst erhebt und wozu; wo Daten gehostet werden, entscheidet das allein nicht.

Sehen Sie, welcher Kanal Käufer bringt

Kostenlos bis 25.000 Events im Monat. Ohne Kreditkarte.

Kostenlos startenZu den Preisen