Umami

Que fait Umami ?

Aperçu

Umami est une plateforme d'analyse web respectueuse de la vie privée — elle suit les pages vues, les visiteurs et les événements personnalisés sans cookies ni collecte de données personnelles. Conforme au GDPR/CCPA par défaut (pas besoin de bannière de consentement). Auto-hébergeable sur votre propre infrastructure, ou utilisez Umami Cloud. Tableau de bord propre, statistiques en temps réel et une API pour un accès programmatique. La principale alternative open-source à Google Analytics.

Quand l'utiliser

• Besoin d'analytics web sans bannières de consentement liées aux cookies
• Conformité GDPR/CCPA obligatoire
• Vous ne faites pas confiance à Google avec vos données d'analyse
• Vous souhaitez auto-héberger les analytics sur votre infrastructure
• Analytics simples et propres, sans la complexité de GA4
• Accès API aux données d'analyse pour tableaux de bord/rapports

Instructions

Configuration de l'auto-hébergement

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

# Ou déploiement en un clic sur Vercel/Netlify/Railway
# Voir : https://umami.is/docs/install

Ajout du script de suivi

<!-- Ajoutez dans le <head> de votre site -->
<script
  defer
  src="https://analytics.mysite.com/script.js"
  data-website-id="votre-id-site"
></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="votre-id-site"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Suivi d'événements personnalisés

// Suivi d'événements personnalisés
// Umami expose un objet global `umami`

// Suivi des clics sur les boutons
document.getElementById("btn-inscription")?.addEventListener("click", () => {
  umami.track("click-inscription", { plan: "pro", source: "en-tete" });
});

// Suivi des soumissions de formulaire
function handleSubmit(formData: FormData) {
  umami.track("soumission-formulaire", {
    formulaire: "contact",
    sujet: formData.get("subject"),
  });
}

// Suivi avec React
function PricingCard({ plan }: { plan: string }) {
  return (
    <button
      onClick={() => umami.track("click-tarification", { plan })}
      data-umami-event="click-tarification"
      data-umami-event-plan={plan}
    >
      Choisir {plan}
    </button>
  );
}

Accès API

// api/analytics.ts — Récupérer les données d'analyse par programmation
const UMAMI_URL = "https://analytics.mysite.com";
const UMAMI_TOKEN = process.env.UMAMI_API_TOKEN;

async function getPageViews(websiteId: string, jours = 30) {
  const dateFin = Date.now();
  const dateDebut = dateFin - jours * 24 * 60 * 60 * 1000;

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

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

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

Exemples

Exemple 1 : Ajouter des analytics respectueux de la vie privée à un SaaS

Invite utilisateur : "Ajoutez des analytics à notre SaaS sans cookies ni bannières de consentement."

L'agent déploiera Umami, ajoutera le script de suivi, configurera des événements personnalisés pour les actions clés (inscription, mise à niveau, utilisation des fonctionnalités), et créera une intégration API pour les tableaux de bord internes.

Exemple 2 : Créer un tableau de bord d'analyse personnalisé

Invite utilisateur : "Récupérez nos données Umami dans un tableau de bord personnalisé pour l'équipe marketing."

L'agent utilisera l'API Umami pour récupérer les pages vues, les pages les plus consultées, les référents et les événements, puis les affichera dans un tableau de bord React.

Directives

• Pas de cookies = pas de bannière de consentement — conforme au GDPR par défaut
• Attribut data-umami-event — suivez les clics sans JavaScript
• umami.track(nom, données) pour les événements personnalisés — suivi flexible des événements
• Auto-hébergement pour un contrôle total — Docker, Vercel, Railway, ou tout hôte Node.js
• API pour un accès programmatique — créez des tableaux de bord et rapports personnalisés
• Support multi-site — une instance Umami suit plusieurs sites web
• Tableau de bord en temps réel — voyez les visiteurs actifs maintenant
• Suivi UTM — l'attribution des campagnes fonctionne automatiquement
• Script léger — <2KB, ne ralentit pas votre site
• PostgreSQL ou MySQL — votre choix pour la base de données backend