← Retour à l'accueil

Déployer Umami sur Coolify : L'alternative open-source et RGPD à Google Analytics

Installez Umami Analytics sur votre VPS avec Coolify. Une solution de statistiques web ultra-légère, open-source et sans bandeau de cookies obligatoires.

Installez Umami Analytics sur votre VPS avec Coolify. Une solution de statistiques web ultra-légère, open-source et sans bandeau de cookies obligatoires.

Pourquoi j’ai largué Google Analytics

J’ai utilisé Google Analytics sur mes projets persos pendant des années, par habitude. Puis j’ai fini par me demander pourquoi j’envoyais les données de mes visiteurs à Google gratuitement, surtout sur des sites que j’héberge moi-même.

Au-delà de l’éthique, GA est devenu pénible au quotidien. Le script gtag.js pèse des dizaines de kilooctets, ce qui est absurde sur un site statique optimisé. Il utilise des cookies de tracking tiers, ce qui impose d’afficher une bannière de consentement RGPD. Ces bannières dégradent l’expérience utilisateur et font fuir le trafic. L’interface de GA4, en prime, est un labyrinthe quand on veut simplement connaître le nombre de vues sur un article.

J’avais besoin d’autre chose. J’ai installé Umami.

Qu’est-ce qu’Umami Analytics ?

Umami collecte uniquement les données utiles (pages vues, sources, appareils) sans jamais identifier un visiteur.

Je suis passé dessus pour plusieurs raisons. D’abord, il ne dépose aucun cookie de tracking. Selon les directives de la CNIL pour les outils statistiques anonymes, cela dispense de la fameuse bannière de consentement. Le script minifié pèse environ 2 Ko. Les données sont stockées dans une base PostgreSQL sur votre propre serveur. L’interface va à l’essentiel et donne les informations importantes sur un seul écran.

Surtout, ça s’héberge très facilement si vous utilisez le catalogue Coolify.

Déployer Umami avec Coolify

Umami fait partie des services déployables en un clic sur Coolify.

Étape 1 : Créer un projet

Sur votre instance Coolify, allez dans Projects puis + New Project. Choisissez un nom comme monitoring-analytics.

Étape 2 : Ajouter la ressource

Cliquez sur + New Resource. Dans la barre de recherche du catalogue, tapez Umami et sélectionnez le service.

Étape 3 : Configurer et déployer

Coolify génère automatiquement les variables d’environnement nécessaires :

# Variables générées automatiquement par Coolify
APP_SECRET=une_chaine_aleatoire_generee
DATABASE_URL=postgresql://umami:password@db:5432/umami

Vous n’avez rien à modifier. Coolify s’occupe de créer le conteneur PostgreSQL, de faire le lien réseau et de générer les mots de passe. Cliquez sur Deploy. Le service démarre en quelques instants.

Étape 4 : Premier accès

Coolify vous fournit une URL temporaire. Connectez-vous avec les identifiants par défaut (admin / umami).

Changez immédiatement le mot de passe dans Settings → Profile.

Attention
Ne laissez pas les identifiants admin/umami en production. Les bots testent systématiquement ces accès sur les instances exposées.

Étape 5 : Configurer un domaine personnalisé

Dans les paramètres de votre service Umami sur Coolify, renseignez un domaine personnalisé (ex: stats.seigi-tech.fr). Pointez votre enregistrement DNS A vers l’IP de votre VPS. Coolify génère le certificat SSL Let’s Encrypt.

Astuce Anti-AdBlock
Utilisez toujours un sous-domaine personnalisé. Les bloqueurs de pub maintiennent des listes noires de domaines connus. Si vous utilisez l'URL par défaut de Coolify, votre script sera bloqué chez une bonne partie de vos visiteurs. Avec votre propre domaine, le script passe sous les radars.

Ajouter Umami sur votre site

Dans le dashboard Umami, allez dans Settings → Websites → Add Website. Entrez le nom et l’URL de votre site pour obtenir un Website ID unique.

Intégration sur un site HTML simple

Ajoutez ce script dans le <head> de vos pages :

<!-- Remplacez les valeurs par les vôtres -->
<script
  defer
  src="https://stats.votre-domaine.fr/script.js"
  data-website-id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
></script>

L’attribut defer empêche le script de bloquer le rendu de la page.

Intégration sur un site Astro

Sur Astro, placez le script dans le layout principal (src/layouts/BaseLayout.astro) :

---
// BaseLayout.astro
---
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>{title}</title>

    <!-- Script Umami : chargé sur toutes les pages -->
    <script
      is:inline
      defer
      src="https://stats.seigi-tech.fr/script.js"
      data-website-id="votre-website-id-umami"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>

La directive is:inline force Astro à injecter le script tel quel dans le HTML final, sans le traiter avec son bundler.

Tracking d’événements personnalisés

Vous pouvez suivre des interactions spécifiques via des attributs HTML.

<!-- Tracker un clic sur un bouton -->
<button
  data-umami-event="Clic CTA Newsletter"
  data-umami-event-position="hero"
>
  S'abonner
</button>

Ou en JavaScript :

// Tracker un événement avec des données custom
document.querySelector('#btn-demo').addEventListener('click', () => {
  umami.track('Demo demandée', { plan: 'free', source: 'homepage' });
});

Ces événements remontent en temps réel dans l’onglet Events du dashboard.

Bilan

Je n’ai pas rouvert Google Analytics depuis que j’ai fait ce changement. Le dashboard d’Umami suffit largement pour suivre le trafic, sans avoir à gérer les bandeaux de consentement. Les données restent sur mon serveur.


Pour aller plus loin