📍 Article principal du cluster : Umami Analytics 2026 : guide complet.

Snippet Umami = 1 ligne HTML. Mais l’intégration optimale varie selon framework. Ce tutoriel détaille les méthodes propres pour WordPress, Next.js 15 (App Router), Astro 4, Vue, et site HTML statique.

Prérequis

Umami installé (voir tutoriel installation).
Site enregistré, Website ID copié.
Niveau attendu : débutant/intermédiaire.
Temps estimé : 10-30 minutes selon stack.

Snippet de base

<script defer src="https://analytics.votre-entreprise.com/script.js"
  data-website-id="VOTRE_UUID_WEBSITE"></script>

Coller dans <head> ou juste avant </body>.

WordPress

Méthode 1 — Plugin officiel

Extensions → Ajouter → « Umami Analytics ». Installer + Activer. Réglages → Umami :

Tracker URL : https://analytics.votre-entreprise.com/script.js.
Website ID : votre UUID.
Track admin : OFF.

Méthode 2 — Code dans theme

Si pas de plugin, dans functions.php du thème enfant :

add_action('wp_head', function() {
  if (is_admin()) return;
  echo '<script defer src="https://analytics.votre-entreprise.com/script.js" data-website-id="UUID"></script>';
});

Next.js 15 App Router

Dans app/layout.tsx :

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        {process.env.NODE_ENV === 'production' && (
          <Script defer
            src="https://analytics.votre-entreprise.com/script.js"
            data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
            strategy="afterInteractive"
          />
        )}
      </body>
    </html>
  );
}

Astro 4

Dans src/layouts/Layout.astro :

---
const isProd = import.meta.env.PROD;
---
<html>
<head>
  <slot name="head" />
  {isProd && (
    <script defer
      src="https://analytics.votre-entreprise.com/script.js"
      data-website-id={import.meta.env.UMAMI_WEBSITE_ID}></script>
  )}
</head>
<body>
  <slot />
</body>
</html>

Vue 3

Dans main.ts :

if (import.meta.env.PROD) {
  const script = document.createElement('script');
  script.defer = true;
  script.src = 'https://analytics.votre-entreprise.com/script.js';
  script.setAttribute('data-website-id', import.meta.env.VITE_UMAMI_WEBSITE_ID);
  document.head.appendChild(script);
}

Site HTML statique

Coller dans <head> de chaque page (ou template global) :

<script defer src="https://analytics.votre-entreprise.com/script.js"
  data-website-id="UUID"></script>

Options avancées

Auto-track outbound clicks

data-auto-track="true"
data-track-outbound="true"

Honor Do Not Track

data-do-not-track="true"

Domains specific only

data-domains="boutique.com,blog.boutique.com"

Cache et tag-manager

Pour Google Tag Manager (legacy), créer Custom HTML tag avec snippet. Trigger : All Pages.

Vérification

1. Console browser

F12 → Network → filter « umami ». Visite page = requête POST /api/send avec status 200.

2. Real-time Umami

Dashboard Umami → Real-time. Compteur visiteurs incrément à chaque visite.

3. Custom event de test

Dans console browser : umami.track('test-event'). Voir dans Events Umami.

Erreurs fréquentes

Erreur	Cause	Solution
404 script.js	URL incorrecte	Vérifier sans typo
403 CORS	Domain pas dans whitelist	Settings Umami site → permissions
Adblockers bloquent	Pattern reconnu	Configurer reverse proxy via votre domaine
Stats admin uniquement	Pas IP exclude	Settings Umami exclude IPs admin
Pageviews multipliées	SPA navigation events	Auto-detect activé par défaut
Track sur dev	Pas de production check	Conditionner avec NODE_ENV

Adaptation au contexte ouest-africain

Trois précisions. Performance mobile : 2 Ko script + defer = aucun impact perçu sur 3G/4G. Reverse proxy domain : analytics.votre-domaine.com = pas de blocage adblocker. Multi-langue : un seul Umami site couvre /fr/ et /ar/, dashboard filtre par path.

Tutoriels frères

FAQ

SPA single-page applications ? Auto-detect par défaut. Sur Next.js, Vue, React : navigation traquée automatiquement.

WordPress sans plugin ? Possible via mu-plugin custom. Plugin officiel plus simple.

SSR vs SSG ? Pour SSG (Astro), tracking client-side identique. Aucune diff perçue.

iframe tracking ? Non par défaut. Custom code requis.

AMP pages ? AMP analytics protocol différent. Umami pas natif AMP.

Pour aller plus loin

🔝 Retour au pilier : Guide complet Umami 2026
Documentation Tracker : umami.is/docs/tracker-configuration

Installation et tracking snippet Umami : tutoriel WordPress, Next.js, Astro 2026