Privacy-fokussierte Analytics mit Tinybird in… | LaunchFast
LaunchFast Logo LaunchFast
Blog
EN DE ES
379 Wörter 2 Min. Lesezeit

Privacy-fokussierte Analytics mit Tinybird in Astro einrichten

Echtzeit-Analytics ohne Cookies in Ihrer Astro-App mit Tinybird. Komplette Analytics-Plattform in Minuten deployen — ohne Third-Party-Tracking.

Rishi Raj Jain
Rishi Raj Jain Autor
Setting Up Privacy-Focused Analytics with Tinybird in Astro

Klassische Analytics wie Google Analytics bringen Nachteile: Datenschutz, GDPR, langsame Seiten durch Third-Party-Skripte, Datenhoheit. Tinybird ist privacy-fokussiert: Echtzeit-Analytics ohne Cookies, auf Ihrer Infrastruktur, powered by ClickHouse.

Sponsored

Hochwertige Starter-Kits mit integriertem Authentifizierungsfluss (Auth.js), Objekt-Uploads (AWS, Clouflare R2, Firebase Storage, Supabase Storage), integrierten Zahlungen (Stripe, LemonSqueezy), E-Mail-Verifizierungsablauf (Resend, Postmark, Sendgrid) und viel mehr . Kompatibel mit jeder Datenbank (Redis, Postgres, MongoDB, SQLite, Firestore).

Get all 3 kits Bundle ↗

One-time license · Lifetime updates

In dieser Anleitung richten Sie Tinybird mit dem Web-Analytics-Template ein und binden das Tracking-Skript in Astro ein.

Voraussetzungen

Tinybird-Workspace einrichten

Authentifizieren und Workspace wählen oder anlegen:

Terminal window
# (macOS/Linux) Tinybird CLI installieren
curl https://tinybird.co | sh


# (Windows) Tinybird CLI installieren
# powershell -ExecutionPolicy ByPass -c "irm https://tinybird.co | iex"


# Bei Tinybird anmelden (Browser)
tb login


# Workspace wählen oder erstellen
# Region nahe an Ihren Nutzern wählen

Nach der Anmeldung sehen Sie Workspaces oder werden zum Anlegen aufgefordert.

Web-Analytics-Template deployen

Tinybird liefert ein Template mit Data Sources, Pipes und Endpoints:

Terminal window
# Web Analytics Template deployen
tb --cloud deploy \
--template https://github.com/tinybirdco/web-analytics-starter-kit/tree/main/tinybird \
--allow-destructive-operations

Das Kommando:

  1. Data Sources: Events-Tabelle für Analytics
  2. Transformation Pipes: Roh-Events zu aggregierten Metriken
  3. API-Endpoints: SQL als REST
  4. Tokens: Auth für Ingestion und Queries

Deployment dauert wenige Sekunden.

Tracking-Skript ins Astro-Layout

Das Skript ist leicht (<9 KB gzipped), async und blockiert nicht.

Tracking-Skript in der Tinybird-Konsole per Copy script kopieren.

Tinybird analytics setup in the Astro project dashboard

In src/layouts/Layout.astro im <head>:

src/layouts/Layout.astro
---
// ...
---


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="generator" content={Astro.generator} />
    <!-- Tinybird Analytics -->
    <script
      defer
      data-host="https://api.tinybird.co"
      src="https://unpkg.com/@tinybirdco/flock.js"
      data-token="value-populates-while-copying-from-dashboard"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>

defer lädt async ohne Render-Blockade.

Analytics im gehosteten Dashboard

Tinybird liefert ein Dashboard — Dashboard-Token eingeben und Metriken sehen.

Dev-Server starten:

Terminal window
npm run dev

Site unter http://localhost:4321 besuchen, Seiten wechseln, dann Analytics prüfen:

  1. Dashboard öffnen (View Dashboard in der Konsole)
  2. Echtzeit-Metriken:
    • steigende Page Views
    • Standort auf der Karte
    • Browser und Gerät
Tinybird analytics events flowing into the Astro application

Events erscheinen innerhalb von Sekunden. Ein Pageview reicht — Sie sind startklar.

Fazit

Privacy-first Echtzeit-Analytics in Astro mit Tinybird: Page Views ohne Cookies, flexible Custom Events, leichtes Skript. Für Advanced Cases: Tinybird Docs.

Fragen? Twitter.

Weiterlesen