# Sehen, welche Astro-Seiten Kunden bringen

> MIRA FIVE in Astro einrichten: eine Integration im eigenen Build, Pageviews auch mit ClientRouter und bezahlte Bestellungen aus einem Endpunkt.

URL: https://mirafive.io/de/fuer/astro  
Updated: 2026-09-28

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

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.  
```  
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 />`.  
```  
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.  
```  
<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`).  
```  
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](https://mirafive.io/de/produkt/herkunft), woher Ihre Besuche kommen, und [Wege › Seiten](https://mirafive.io/de/produkt/wege), 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](https://mirafive.io/de/lernen/vom-ersten-besuch-zum-bezahlten-tarif).

## 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:

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

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

```ts
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:

```ts
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](https://mirafive.io/de/glossar/feature-flag) 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](https://mirafive.io/de/glossar/ab-test) ist ein Flag, das genauso gelesen wird. Alle Optionen stehen in der [Dokumentation](https://docs.mirafive.io/sdks/astro).

## Andere Einrichtungen

Dieselben Zahlen, egal wie Ihre Website gebaut ist.

- [Next.js](https://mirafive.io/de/fuer/nextjs)
- [React](https://mirafive.io/de/fuer/react)
- [Laravel](https://mirafive.io/de/fuer/laravel)
- [Nuxt](https://mirafive.io/de/fuer/nuxt)
- [Symfony](https://mirafive.io/de/fuer/symfony)
- [PHP](https://mirafive.io/de/fuer/php)
- [Vue](https://mirafive.io/de/fuer/vue)
- [TanStack Start](https://mirafive.io/de/fuer/tanstack-start)
- [Node.js](https://mirafive.io/de/fuer/nodejs)
- [Convex](https://mirafive.io/de/fuer/convex)
- [JavaScript](https://mirafive.io/de/fuer/javascript)
- [jede Website](https://mirafive.io/de/fuer/website)

[Zur Dokumentation](https://docs.mirafive.io)

## 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 starten](https://app.mirafive.io/register)[Zu den Preisen](https://mirafive.io/de/preise)