TerminalSkills/skills

Umami

Überblick

Umami ist eine datenschutzfreundliche Webanalytik-Plattform – sie verfolgt Seitenaufrufe, Besucher und benutzerdefinierte Ereignisse ohne Cookies oder Erhebung personenbezogener Daten. Standardmäßig DSGVO-/CCPA-konform (kein Cookie-Consent-Banner nötig). Selbst hostbar auf eigener Infrastruktur oder über Umami Cloud. Sauberes Dashboard, Echtzeit-Statistiken und eine API für programmatischen Zugriff. Die #1 quelloffene Google Analytics-Alternative.

Wann verwenden

• Website-Analysen ohne Cookie-Consent-Banner benötigt
• DSGVO-/CCPA-Konformität ist Pflicht
• Google bei Analysedaten nicht vertrauen möchten
• Analysen auf eigener Infrastruktur hosten möchten
• Einfache, saubere Analysen ohne die Komplexität von GA4
• API-Zugriff auf Analysedaten für Dashboards/Reports

Anleitung

Self-Host-Einrichtung

# Docker Compose
git clone https://github.com/umami-software/umami.git
cd umami
docker compose up -d

# Oder One-Click-Deployment auf Vercel/Netlify/Railway
# Siehe: https://umami.is/docs/install

Tracking-Skript hinzufügen

<!-- In den <head> Ihrer Website einfügen -->
<script
  defer
  src="https://analytics.mysite.com/script.js"
  data-website-id="ihre-website-id"
></script>

// Next.js – app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          defer
          src="https://analytics.mysite.com/script.js"
          data-website-id="ihre-website-id"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Benutzerdefinierte Ereignisverfolgung

// Benutzerdefinierte Ereignisse verfolgen
// Umami stellt ein globales Objekt `umami` bereit

// Klicks auf Schaltflächen verfolgen
document.getElementById("signup-btn")?.addEventListener("click", () => {
  umami.track("signup-click", { plan: "pro", source: "header" });
});

// Formularübermittlungen verfolgen
function handleSubmit(formData: FormData) {
  umami.track("form-submit", {
    form: "contact",
    subject: formData.get("subject"),
  });
}

// Mit React verfolgen
function PricingCard({ plan }: { plan: string }) {
  return (
    <button
      onClick={() => umami.track("pricing-click", { plan })}
      data-umami-event="pricing-click"
      data-umami-event-plan={plan}
    >
      {plan} auswählen
    </button>
  );
}

API-Zugriff

// api/analytics.ts – Analysedaten programmatisch abrufen
const UMAMI_URL = "https://analytics.mysite.com";
const UMAMI_TOKEN = process.env.UMAMI_API_TOKEN;

async function getPageViews(websiteId: string, days = 30) {
  const endDate = Date.now();
  const startDate = endDate - days * 24 * 60 * 60 * 1000;

  const res = await fetch(
    `${UMAMI_URL}/api/websites/${websiteId}/pageviews?startAt=${startDate}&endAt=${endDate}&unit=day`,
    { headers: { Authorization: `Bearer ${UMAMI_TOKEN}` } }
  );
  return res.json();
}

async function getTopPages(websiteId: string) {
  const endDate = Date.now();
  const startDate = endDate - 7 * 24 * 60 * 60 * 1000;

  const res = await fetch(
    `${UMAMI_URL}/api/websites/${websiteId}/metrics?startAt=${startDate}&endAt=${endDate}&type=url`,
    { headers: { Authorization: `Bearer ${UMAMI_TOKEN}` } }
  );
  return res.json();  // [{ x: "/pricing", y: 1234 }, ...]
}

Beispiele

Beispiel 1: Datenschutzfreundliche Analysen zu einer SaaS hinzufügen

Benutzeraufforderung: „Füge Analysen zu unserer SaaS hinzu, ohne Cookies oder Consent-Banner.“

Der Agent wird Umami bereitstellen, das Tracking-Skript einfügen, benutzerdefinierte Ereignisse für wichtige Aktionen (Registrierung, Upgrade, Feature-Nutzung) einrichten und eine API-Integration für interne Dashboards erstellen.

Beispiel 2: Ein benutzerdefiniertes Analysedashboard erstellen

Benutzeraufforderung: „Rufe unsere Umami-Daten in ein benutzerdefiniertes Dashboard für das Marketing-Team ab.“

Der Agent wird über die Umami-API Seitenaufrufe, Top-Seiten, Referrer und Ereignisse abrufen und diese in einem React-Dashboard darstellen.

Richtlinien

• Keine Cookies = kein Consent-Banner – standardmäßig DSGVO-konform
• data-umami-event-Attribut – Klicks ohne JavaScript verfolgen
• umami.track(name, data) für benutzerdefinierte Ereignisse – flexible Ereignisverfolgung
• Self-Host für volle Kontrolle – Docker, Vercel, Railway oder jeder Node.js-Host
• API für programmatischen Zugriff – eigene Dashboards und Reports erstellen
• Multi-Site-Unterstützung – eine Umami-Instanz verfolgt mehrere Websites
• Echtzeit-Dashboard – aktive Besucher sofort sehen
• UTM-Tracking – Kampagnen-Attribution funktioniert automatisch
• Leichtgewichtiges Skript – <2KB, verlangsamt Ihre Website nicht
• PostgreSQL oder MySQL – Ihre Wahl für die Backend-Datenbank