Analytics

First-Party-Webanalyse — Vercel Web Analytics, Cloudflare Web Analytics, PostHog oder ein beliebiges eigenes Skript — eingerichtet über blume.config.ts.

Blume bindet Analytics für dich über einen einzigen analytics-Block in blume.config.ts ein. Vercel Web Analytics, Cloudflare Web Analytics und PostHog werden erstklassig unterstützt, und eine scripts-Ausweichlösung deckt alle anderen Anbieter ab — Plausible, Fathom, Google Analytics, Umami und den Rest.

Analytics wird nur in Produktions-Builds geladen. Die Skripte werden von blume build ausgegeben, niemals von blume dev, sodass lokaler Traffic nie in deinen Dashboards landet und du kein separates „Entwicklungs“-Projekt brauchst.

Vercel Web Analytics

Setze vercel: true, um Vercel Web Analytics hinzuzufügen. Blume bindet das First-Party-Skript von Vercel ein, das von deiner eigenen Domain ausgeliefert wird, sobald Web Analytics für das Projekt im Vercel-Dashboard aktiviert ist.

analytics: {
  vercel: true,
}

Es werden keine Schlüssel benötigt — das Skript meldet an das Projekt, unter dem es deployt ist. Daten werden nur bei Vercel-Deployments erfasst, wo der Endpunkt /_vercel/insights existiert.

Cloudflare Web Analytics

Für Cloudflare Web Analytics gibt es zwei Einrichtungsvarianten, und nur eine davon braucht Konfiguration.

Proxy-Zone (automatische Einrichtung). Wenn Cloudflare deine Website ausliefert — ein Worker mit eigener Domain, Pages oder eine beliebige Zone mit aktivierter orangefarbener Wolke —, aktiviere Web Analytics für die Zone im Cloudflare-Dashboard, und das war’s. Cloudflare bindet den Beacon am Edge ein, also lass analytics.cloudflare ungesetzt; würdest du es zusätzlich konfigurieren, würde jeder Seitenaufruf doppelt gezählt.

Jeder andere Host (manuelle Einrichtung). Für eine Website, die Cloudflare nicht per Proxy ausliefert, füge die Website im Dashboard unter Web Analytics hinzu, kopiere den Token aus dem JS-Snippet, das du dort erhältst (den token innerhalb von data-cf-beacon), und übergib ihn hier. Blume rendert dasselbe Beacon-Tag wie das Snippet.

analytics: {
  cloudflare: {
    token: "0123456789abcdef0123456789abcdef",
  },
}

Der Token kann gefahrlos an den Browser ausgeliefert werden — er identifiziert nur die Website. Der Beacon verfolgt Änderungen am Verlauf selbstständig, sodass Navigationen über den Client-Router ohne zusätzliche Einrichtung gezählt werden.

PostHog

Gib deinen Projekt-API-Schlüssel an, um PostHog hinzuzufügen. Der Host ist standardmäßig PostHog Cloud US; setze host für EU Cloud (https://eu.i.posthog.com) oder eine selbst gehostete Instanz.

analytics: {
  posthog: {
    key: "phc_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    host: "https://us.i.posthog.com", // optional, this is the default
  },
}

Der Projekt-API-Schlüssel kann gefahrlos an den Browser ausgeliefert werden — er ist ein öffentlicher, ausschließlich schreibender Schlüssel.

Eigene Skripte

Verwende scripts, um einen beliebigen anderen Analytics-Anbieter zu laden. Jeder Eintrag rendert ein <script>-Tag und muss genau eines von src (extern) oder content (inline) setzen.

analytics: {
  scripts: [
    // Plausible
    {
      src: "https://plausible.io/js/script.js",
      strategy: "defer",
      attributes: { "data-domain": "example.com" },
    },
    // Fathom
    {
      src: "https://cdn.usefathom.com/script.js",
      strategy: "defer",
      attributes: { "data-site": "ABCDEFG" },
    },
    // An inline snippet
    {
      content: "console.log('analytics ready')",
    },
  ],
}

attributes ist eine Zuordnung zusätzlicher HTML-Attribute (data-*, id, …), die auf das Tag verteilt werden, und strategy fügt externen Skripten async oder defer hinzu.

Optionen

Option	Standard	Beschreibung
`vercel`	`false`	Vercel Web Analytics hinzufügen (nur bei Vercel-Deployments).
`cloudflare.token`	—	Site-Token für Cloudflare Web Analytics (manuelle Einrichtung). Aktiviert den Beacon, wenn gesetzt.
`posthog.key`	—	PostHog-Projekt-API-Schlüssel. Aktiviert PostHog, wenn gesetzt.
`posthog.host`	`https://us.i.posthog.com`	PostHog-Ingestion-Host (EU Cloud oder selbst gehostet).
`scripts[].src`	—	URL des externen Skripts. Schließt sich mit `content` gegenseitig aus.
`scripts[].content`	—	Inline-Skriptinhalt. Schließt sich mit `src` gegenseitig aus.
`scripts[].strategy`	—	`async` oder `defer` für ein externes Skript.
`scripts[].attributes`	—	Zusätzliche HTML-Attribute, die auf das `<script>`-Tag verteilt werden.

Alle drei lassen sich kombinieren — aktiviere Vercel, PostHog und eigene Skripte gemeinsam. Zum Deployen deiner gebauten Website siehe Deployment.