In der heutigen Webentwicklung sind Analytics-Daten unerlässlich, um die Nutzererfahrung zu optimieren und den Erfolg einer Anwendung zu messen. Klassische Tools wie Google Analytics sind weit verbreitet, doch sie bringen Datenschutzbedenken und hohe Komplexität mit sich.
Umami ist eine Open-Source-Alternative, die sich durch Datenschutzfreundlichkeit, einfache Integration und eine übersichtliche Oberfläche auszeichnet. Dank Funktionen wie anonymisiertem Tracking und DSGVO-Konformität ist Umami ideal für moderne Anwendungen, insbesondere in Verbindung mit Next.js.
In diesem Artikel zeigen wir dir, wie du Umami in Next.js integrierst, benutzerdefinierte Ereignisse trackst und dein Dashboard effektiv nutzt.
Umami vorbereiten
Umami kann unkompliziert mit Docker Compose bereitgestellt werden. Dies ermöglicht ein schnelles Setup und eignet sich für Hosting-Anbieter wie Hetzner, AWS oder Google Cloud Platform (GCP).
1. Umami mit Docker Compose installieren
Erstelle eine Datei namens docker-compose.yml und füge die folgende Konfiguration hinzu:
version: '3'
services:
umami:
image: ghcr.io/umami-software/umami:postgresql-latest
ports:
- "3000:3000"
environment:
DATABASE_URL: postgresql://umami:umami@db:5432/umami
DATABASE_TYPE: postgresql
APP_SECRET: replace-me-with-a-random-string
depends_on:
db:
condition: service_healthy
init: true
restart: always
healthcheck:
test: ["CMD-SHELL", "curl http://localhost:3000/api/heartbeat"]
interval: 5s
timeout: 5s
retries: 5
db:
image: postgres:15-alpine
environment:
POSTGRES_DB: umami
POSTGRES_USER: umami
POSTGRES_PASSWORD: umami
volumes:
- umami-db-data:/var/lib/postgresql/data
restart: always
healthcheck:
test: ["CMD-SHELL", "pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}"]
interval: 5s
timeout: 5s
retries: 5
volumes:
umami-db-data:
Erklärung der Konfiguration:
umami-Service: Startet die Umami-Anwendung auf Port3000und verbindet sie mit der PostgreSQL-Datenbank.db-Service: Eine PostgreSQL-Instanz, die als Datenbank für Umami dient.- Umgebungsvariablen:
DATABASE_URL: Verbindung zur PostgreSQL-Datenbank.APP_SECRET: Ein zufälliger, sicherer String, der für die App-Sicherheit verwendet wird.
- Volumes: Persistiert die Datenbankdaten, damit diese auch bei Neustarts erhalten bleiben.
Umami starten:
- Speichere die
docker-compose.yml-Datei in deinem Projektverzeichnis. - Starte die Dienste mit:
docker-compose up -d
- Greife auf Umami über
http://localhost:3000zu.
2. Erste Konfiguration
Nachdem Umami gestartet wurde:
- Account erstellen: Der Standardbenutzer ist
adminmit dem Passwortumami. - Website hinzufügen: Trage den Namen und die Domain deiner Website ein, z. B.:
- Name:
MyApp - Domain:
myapp.com
- Name:
- Tracking-Skript kopieren: Umami generiert ein JavaScript-Snippet, das später in die Next.js-Anwendung eingefügt wird.
Mit dieser Einrichtung ist Umami bereit für die Integration in deine Next.js-Anwendung.
Umami in Next.js integrieren
Die Integration von Umami in deine Next.js-Anwendung erfolgt effizient über das Next.js Script-Tag. Dies optimiert die Ladezeit und verhindert unnötiges JavaScript. Zusätzlich kannst du Ereignisse mit HTML data-Attributen tracken, um die Abhängigkeit von zusätzlichem JavaScript zu minimieren.
1. Tracking-Skript mit Script-Tag einfügen
Nutze das Script-Tag von Next.js, um das Umami-Tracking-Skript in dein Layout einzubinden. Dies stellt sicher, dass das Skript asynchron geladen wird und die Ladezeit der Anwendung nicht beeinträchtigt.
Beispiel: Integration im Root-Layout
// app/layout.tsx
import Script from 'next/script';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
{/* Umami-Tracking-Skript */}
<Script
src="https://your-umami-instance.com/umami.js"
data-website-id="your-website-id"
strategy="afterInteractive"
/>
</head>
<body>{children}</body>
</html>
);
}
Erklärung:
src: Die URL zu deiner Umami-Instanz, z. B.https://analytics.myapp.com/umami.js.data-website-id: Die ID der Website, die du im Umami-Dashboard erstellt hast.strategy="afterInteractive": Das Skript wird erst nach dem Initialisieren der Seite geladen.
2. Seitenaufrufe automatisch tracken
Das Umami-Tracking-Skript erfasst Seitenaufrufe automatisch. Dank der Integration über das Script-Tag musst du dafür keine weiteren Anpassungen vornehmen.
3. Ereignisse mit HTML data-Attributen tracken
Um Ereignisse wie Button-Klicks oder Formularübermittlungen zu tracken, kannst du HTML data-Attribute verwenden. Diese Methode erfordert kein zusätzliches JavaScript.
Beispiel: Tracking eines Button-Klicks
export default function ContactButton() {
return (
<button data-umami-event="contact_button_click">
Kontakt aufnehmen
</button>
);
}
Erklärung:
data-umami-event: Definiert das Ereignis, das Umami tracken soll, z. B.contact_button_click.- Diese Methode minimiert den JavaScript-Bedarf und verbessert die Performance der Anwendung.
4. Dynamische Umgebungen unterstützen
Nutze Umgebungsvariablen, um die Tracking-URL und die Website-ID dynamisch basierend auf deiner Umgebung (Entwicklung, Produktion) zu konfigurieren.
Beispiel: Dynamische Konfiguration
// app/layout.tsx
import Script from 'next/script';
export default function RootLayout({ children }: { children: React.ReactNode }) {
const umamiUrl = process.env.NEXT_PUBLIC_UMAMI_URL || '';
const websiteId = process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID || '';
return (
<html lang="en">
<head>
{umamiUrl && websiteId && (
<Script
src={`${umamiUrl}/umami.js`}
data-website-id={websiteId}
strategy="afterInteractive"
/>
)}
</head>
<body>{children}</body>
</html>
);
}
Umgebungsvariablen setzen:
NEXT_PUBLIC_UMAMI_URL: URL deiner Umami-Instanz, z. B.https://analytics.myapp.com.NEXT_PUBLIC_UMAMI_WEBSITE_ID: ID der Website, die du tracken möchtest.
Mit diesen Schritten ist Umami effizient und datenschutzfreundlich in deine Next.js-Anwendung integriert.
Datenschutz und DSGVO
Ein zentraler Vorteil von Umami ist seine Datenschutzfreundlichkeit. Als Open-Source-Lösung wurde Umami entwickelt, um ohne Cookies oder personenbezogene Daten auszukommen, was die Einhaltung der DSGVO (Datenschutz-Grundverordnung) erleichtert. Dennoch gibt es einige Punkte, die du beachten solltest, um sicherzustellen, dass deine Anwendung den gesetzlichen Anforderungen entspricht.
1. Warum ist Umami datenschutzfreundlich?
Keine Cookies:
Umami verwendet keine Cookies, um Nutzerdaten zu speichern oder zu tracken. Das bedeutet, dass keine Cookie-Banner oder Einwilligungen erforderlich sind.
Anonymisierte Daten:
Umami speichert keine personenbezogenen Informationen wie IP-Adressen. Alle gesammelten Daten sind vollständig anonymisiert.
Selbsthosting:
Durch die Möglichkeit, Umami selbst zu hosten, hast du vollständige Kontrolle über alle gesammelten Daten und kannst sicherstellen, dass diese innerhalb der EU gespeichert werden, falls dies erforderlich ist.
2. Tipps zur DSGVO-konformen Nutzung
Hosting in der EU:
Wenn du deine Anwendung für Nutzer:innen innerhalb der EU betreibst, sollte die Umami-Instanz auf Servern in der EU gehostet werden, z. B. bei Hetzner oder AWS Frankfurt.
Datenschutzerklärung anpassen:
Auch wenn Umami keine personenbezogenen Daten sammelt, solltest du in deiner Datenschutzerklärung klarstellen, dass du ein Analyse-Tool nutzt. Beispiel:
Unsere Website verwendet Umami, ein datenschutzfreundliches Web-Analytics-Tool. Es werden keine personenbezogenen Daten erhoben oder Cookies gesetzt. Alle Daten sind vollständig anonymisiert.
Anonymisierung sicherstellen:
Stelle sicher, dass die Anonymisierungsfunktionen von Umami korrekt konfiguriert sind. Die Standardkonfiguration von Umami ist bereits DSGVO-konform.
3. Erweiterungen für zusätzliche Sicherheit
Nutzung von Subdomains:
Setze deine Umami-Instanz auf einer Subdomain wie analytics.myapp.com auf. Dies sorgt für eine klare Trennung zwischen deiner Hauptanwendung und der Analyseplattform.
Zugangsbeschränkungen:
Beschränke den Zugang zum Umami-Dashboard mit starken Passwörtern, um sicherzustellen, dass nur autorisierte Personen Zugriff auf die Daten haben.
Opt-Out-Möglichkeit anbieten:
Falls gewünscht, kannst du eine Opt-Out-Option implementieren, um Nutzern die Möglichkeit zu geben, das Tracking zu deaktivieren. Dies könnte über eine Einstellung in der Datenschutzerklärung erfolgen.
Beispiel: Opt-Out-Option
<button onClick={() => localStorage.setItem('umami.disabled', 1)}>Tracking deaktivieren</button>
4. Vorteile von Umami im Vergleich zu anderen Tools
| Funktion | Umami | Google Analytics |
|---|---|---|
| Cookies | Keine | Erforderlich |
| Datenspeicherung | Selbsthosting | Google-Server |
| DSGVO-Konformität | Einfach umzusetzen | Aufwendig |
| Anonymisierung | Standardmäßig | Manuelle Anpassung |
Mit diesen datenschutzfreundlichen Eigenschaften ist Umami eine ausgezeichnete Wahl für moderne Webanwendungen, die Wert auf den Schutz der Nutzerdaten legen.
Best Practices für Analytics
Die richtige Nutzung von Analytics-Daten ist entscheidend, um aussagekräftige Einblicke zu gewinnen und datenbasierte Entscheidungen zu treffen. Mit Umami und Next.js kannst du ein leistungsstarkes und datenschutzfreundliches Setup aufbauen. Hier sind einige bewährte Praktiken, die du beachten solltest:
1. Wichtige KPIs definieren
Auswahl relevanter Metriken
Nicht alle Daten sind gleichermaßen wichtig. Konzentriere dich auf Key Performance Indicators (KPIs), die direkt mit den Zielen deiner Website verbunden sind. Beispiele:
- E-Commerce: Conversion-Rate, durchschnittlicher Bestellwert, Abbruchraten im Checkout.
- Content-Websites: Seitenaufrufe, Verweildauer, meistgelesene Artikel.
- Lead-Generierung: Klicks auf Kontaktformulare, abgeschickte Formulare.
Beispiel: Conversion-Rate berechnen
Die Conversion-Rate ist der Prozentsatz der Nutzer:innen, die eine gewünschte Aktion ausführen, z. B. einen Kauf abschließen.
Conversion-Rate = (Anzahl der Conversions / Gesamtbesucher) * 100
2. Vermeidung von "Data Overload"
Zu viele Daten können überwältigend sein und die Analyse erschweren. Beschränke dich auf die wichtigsten Informationen:
- Dashboards optimieren: Zeige nur relevante Metriken an.
- Berichte erstellen: Automatisiere regelmäßige Berichte, die die wesentlichen Statistiken zusammenfassen.
- Filter anwenden: Nutze Filter im Umami-Dashboard, um Daten gezielt auszuwerten.
3. Ereignisse gezielt tracken
Nicht jede Interaktion muss getrackt werden. Fokus auf:
- Schlüsselfunktionen: Button-Klicks, die für deinen Conversion-Funnel relevant sind (z. B. "In den Warenkorb").
- Formularübermittlungen: Erfassung von Kontakt- oder Anmeldeformularen.
- Downloads: Tracke wichtige Downloads wie Whitepapers oder Preislisten.
Beispiel: Button-Tracking mit data-Attribut
<button data-umami-event="add_to_cart">In den Warenkorb</button>
4. Performance optimieren
Analytics-Tracking kann die Ladezeit der Website beeinflussen. Mit Umami und Next.js kannst du diese Auswirkungen minimieren:
- Asynchrones Laden: Nutze das
Script-Tag mitstrategy="afterInteractive", um das Tracking-Skript erst nach dem Laden der Hauptinhalte auszuführen. - Ereignis-Tracking ohne zusätzliches JavaScript: Verwende HTML
data-Attribute, um benutzerdefinierte Events zu tracken.
5. Datenschutz und Transparenz
Selbst mit einem datenschutzfreundlichen Tool wie Umami ist es wichtig, den Nutzer:innen die Kontrolle zu geben:
- Transparente Kommunikation: Beschreibe in deiner Datenschutzerklärung, welche Daten erfasst werden.
- Opt-Out-Möglichkeit: Biete eine einfache Möglichkeit, das Tracking zu deaktivieren.
6. Kontinuierliche Optimierung
Analytics ist keine einmalige Aufgabe. Überprüfe und optimiere dein Tracking regelmäßig:
- Datenqualität sicherstellen: Prüfe, ob alle wichtigen Ereignisse korrekt getrackt werden.
- Neue Metriken hinzufügen: Passe dein Tracking an, wenn sich die Ziele deiner Website ändern.
- A/B-Tests integrieren: Verwende Analytics-Daten, um die Ergebnisse von A/B-Tests zu analysieren.
Analytics ist ein leistungsstarkes Werkzeug, um die Nutzererfahrung zu verbessern und Geschäftsziele zu erreichen. Mit den richtigen Best Practices kannst du das volle Potenzial von Umami in deiner Next.js-Anwendung ausschöpfen.
Fazit
Die Integration von Umami in eine Next.js-Anwendung bietet dir ein leistungsstarkes, datenschutzfreundliches Analytics-Tool, das einfach zu konfigurieren und flexibel zu erweitern ist. Mit Funktionen wie anonymisiertem Tracking, benutzerdefinierten Ereignissen und einem intuitiven Dashboard ist Umami eine hervorragende Alternative zu etablierten Lösungen wie Google Analytics.
Zusammenfassung:
- Einfache Integration: Mit dem Next.js
Script-Tag lässt sich Umami schnell und effizient einbinden. - Flexible Ereignisverfolgung: Durch die Nutzung von HTML
data-Attributen kannst du benutzerdefinierte Events ohne zusätzliches JavaScript tracken. - Datenschutzkonformität: Umami erfordert keine Cookies, anonymisiert alle Daten und ist leicht DSGVO-konform umzusetzen.
- Vielfältige Analysemöglichkeiten: Das Umami-Dashboard bietet umfassende Einblicke in Seitenaufrufe, Traffic-Quellen und benutzerdefinierte Ereignisse.
Empfehlung:
Für Projekte, die Wert auf Datenschutz und Performance legen, ist Umami die ideale Wahl. Die Kombination aus selbst gehostetem Hosting und nativer Unterstützung im Next.js App Router macht es zu einem zuverlässigen Werkzeug für moderne Webanwendungen.
Mit diesen Best Practices und Umami hast du alles, was du benötigst, um datenbasierte Entscheidungen zu treffen und deine Anwendung kontinuierlich zu optimieren.
