Comment Créer Un Site Avec Hugo Partie 11 : suivre les stats avec Matomo Analytics

Aldok

May 14, 2026 | 9 minutes

Revenir à l'index du tuto : Creer un site avec hugo

Résumer cet article avec : ChatGPT

Mistral

Claude

Perplexity Grok

Créer un site avec Hugo partie 11 : suivre les stats avec Matomo Analytics

Voilà, votre site est en ligne et il commence sa petite vie. À ce stade, une question légitime se pose : combien de gens passent par là ? Et c’est là que rentre en scène la fameuse couche “analytics”, soit la mesure de la fréquentation.

Pendant des années, le quasi-monopole sur ce sujet, c’était Google Analytics. Ça reste un produit puissant et gratuit, mais avec quelques inconvénients qui font qu’on a de plus en plus de raisons de chercher ailleurs :

Google Analytics 4 est devenu une vraie usine à gaz à configurer
La CNIL a tapé sur les doigts pas mal de sites en France pour des configurations non conformes au RGPD
Vos données de visite partent chez Google, qui s’en sert pour alimenter son propre business
Vous devez afficher une bannière cookies, et beaucoup de visiteurs refusent (donc les stats sont biaisées)

Aujourd’hui je vais vous présenter mon outil de prédilection sur ce sujet : Matomo Analytics (anciennement Piwik, pour ceux qui ont une vieille mémoire).

Pourquoi Matomo ?

Matomo, c’est :

Open source — le code est sur GitHub, vous pouvez l’auditer, le forker, contribuer
Pas de tracking tiers — vos données restent chez vous (ou chez Matomo Cloud si vous prenez leur hébergement)
RGPD-friendly par défaut — possibilité de tracker sans cookies, anonymisation des IP, respect du Do Not Track
Pas de bannière cookies requise — en configuration “no cookies”, c’est légalement OK en France (la CNIL le confirme)
Une interface complète — visites, sources, pages populaires, parcours, événements, objectifs…
Gratuit en self-hosted, et un cloud gratuit jusqu’à 100 000 visites/mois

Bref, pour un blog perso ou un site pro de taille raisonnable, c’est largement suffisant et bien plus respectueux que GA.

Les deux voies possibles

Pour utiliser Matomo, vous avez deux options :

Matomo Cloud — vous créez un compte sur matomo.cloud, ils s’occupent de tout. C’est gratuit jusqu’à 100k visites/mois, payant après. Recommandé si vous débutez ou si vous n’avez pas envie de gérer un serveur.
Matomo on-premise — vous installez Matomo sur votre propre serveur (PHP + base de données type MySQL/MariaDB). Plus de boulot mais 100% souverain, illimité, et gratuit pour toujours. Recommandé si vous avez déjà un serveur qui tourne.

Personnellement, j’ai opté pour la voie self-hosted parce que j’ai déjà un VPS qui tourne sur dkts.fr, et que ça me permet de centraliser les stats de tous mes sites au même endroit. Mais pour démarrer, Matomo Cloud est tout à fait recommandable.

Je vais détailler les deux options.

Voie 1 — Matomo Cloud (option simple)

Rendez-vous sur https://matomo.cloud/ et créez votre compte.
À l’inscription, vous choisissez un sous-domaine (du type votresite.matomo.cloud) qui sera l’adresse de votre interface d’admin.
Une fois connecté, ajoutez votre site web dans Administration → Mesurer → Sites web.
Matomo vous donne alors un code JavaScript de tracking à coller dans votre site. Il ressemble à ça :

<script>
  var _paq = window._paq = window._paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//votresite.matomo.cloud/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>

Notez bien deux éléments :

L’URL (//votresite.matomo.cloud/) — c’est votre instance Matomo
Le siteId (1 dans l’exemple) — l’identifiant numérique de votre site dans Matomo

Gardez ce snippet sous la main, on va l’intégrer dans Hugo un peu plus loin.

Voie 2 — Matomo on-premise (option costaud)

Pour installer Matomo sur votre propre serveur, il vous faut :

Un serveur web (Apache, Nginx, Caddy…)
PHP 7.2.5 minimum (idéalement PHP 8.x)
Une base de données : MySQL 5.5+ ou MariaDB 10+
Un sous-domaine dédié, du genre stats.votresite.fr

Les grandes étapes :

Créer une base de données dédiée pour Matomo (via phpMyAdmin, Adminer ou en ligne de commande)
Télécharger Matomo depuis https://matomo.org/download/, décompresser dans le dossier servi par votre serveur web
Lancer l’installeur web en visitant https://stats.votresite.fr/ — l’assistant vous guide étape par étape
Renseigner les infos : connexion BDD, création du compte admin, configuration du premier site
À la fin, Matomo vous donne le même snippet JavaScript que dans la voie 1, à intégrer dans votre site

L’installation prend en gros 10 minutes si tout va bien. Le plus chiant c’est de configurer le sous-domaine et le SSL en amont, mais ça c’est valable pour tout service auto-hébergé.

Astuce pratique : pour la maintenance, pensez à configurer une tâche cron qui exécute le script d’archivage de Matomo. Sans ça, votre interface va devenir de plus en plus lente avec le temps. La doc officielle explique ça très bien : https://matomo.org/docs/setup-auto-archiving/

Intégrer Matomo dans Hugo proprement

Bon, c’est ici que ça devient intéressant. On pourrait simplement coller le snippet JavaScript dans head.html du thème et hop, c’est plié. Mais on peut faire ça beaucoup plus propre en utilisant les outils de Hugo.

Étape 1 — Paramétrer dans hugo.toml

D’abord, on déclare les paramètres Matomo dans hugo.toml :

[params.matomo]
  url = "//stats.votresite.fr/"
  siteId = "1"

L’intérêt : on garde les valeurs sensibles (URL, identifiant) dans le fichier de config, séparées du code. Si vous voulez changer un jour, c’est une seule ligne à modifier.

Étape 2 — Créer un partial dédié

Créez le fichier themes/sandbox/layouts/partials/matomo.html :

{{ with .Site.Params.matomo }}
<script>
  var _paq = window._paq = window._paq || [];
  _paq.push(['disableCookies']);
  _paq.push(['setDoNotTrack', true]);
  _paq.push(['enableHeartBeatTimer']);
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="{{ .url }}";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '{{ .siteId }}']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
{{ end }}

J’ai ajouté trois options par rapport au snippet par défaut, qui rendent votre tracking RGPD-friendly d’emblée :

disableCookies — Matomo n’utilise pas de cookies pour identifier les visiteurs. Du coup pas besoin de bannière cookies. Le tracking devient un peu moins précis sur les visiteurs récurrents (impossible de savoir si une nouvelle visite est de la même personne qu’hier) mais c’est largement acceptable.
setDoNotTrack — Matomo respecte le signal “Do Not Track” envoyé par certains navigateurs. Si l’utilisateur l’a activé, il n’est pas tracké.
enableHeartBeatTimer — Matomo envoie un ping toutes les 15 secondes pour mesurer plus précisément le temps passé sur la page (sinon la dernière page d’une session a un temps de visite “0 seconde” car aucune nouvelle pageview n’a été déclenchée).

Étape 3 — Inclure le partial uniquement en production

C’est l’astuce qui change tout. Vous ne voulez pas polluer vos stats avec vos propres visites de développement quand vous lancez hugo server en local. Heureusement, Hugo expose une variable hugo.Environment qui indique le contexte d’exécution.

Dans themes/sandbox/layouts/partials/head.html, juste avant la balise </head>, ajoutez :

{{ if eq hugo.Environment "production" }}
  {{ partial "matomo.html" . }}
{{ end }}

Comment ça marche concrètement :

En local avec hugo server, l’environnement est development → Matomo n’est pas chargé, vos visites de test ne polluent pas les stats.
Au build de production sur Netlify, l’environnement est production (parce qu’on a mis HUGO_ENV = "production" dans netlify.toml à la partie 9) → Matomo est chargé, le tracking fonctionne.

Vous pouvez aussi forcer ce comportement en local pour tester avec :

hugo server --environment production

C’est franchement satisfaisant comme setup : un seul code source, deux comportements selon l’environnement, géré proprement.

Configuration Matomo recommandée pour le RGPD

Quelques réglages à faire côté serveur Matomo (dans l’interface admin) pour être au carré côté vie privée :

Administration → Vie privée → Anonymisation :
- Anonymiser les IP : 2 octets au minimum (suffisant pour la CNIL)
- Forcer l’anonymisation systématique
- Supprimer les logs de plus de X mois (12 mois c’est confortable)
Administration → Vie privée → Demandes des utilisateurs :
- Activer le mécanisme d’opt-out (Matomo génère un iframe d’opt-out à intégrer dans votre page “Politique de confidentialité”)
Administration → Vie privée → Tracking sans cookies :
- Vérifier que c’est bien activé (cohérent avec le disableCookies du code côté client)

Avec ce setup, en France comme dans le reste de l’UE, vous êtes dispensé de l’obligation de bannière cookies pour la partie analytics. La CNIL le confirme dans ses recommandations sur les “outils de mesure d’audience exemptés du consentement”.

Que peut-on suivre ?

Une fois en place, l’interface Matomo vous donne accès à plein d’infos très utiles :

Visites & visiteurs : nombre par jour, géolocalisation (au pays/à la ville selon l’anonymisation), navigateur, OS, résolution écran
Pages : les plus visitées, le temps moyen passé, le taux de rebond
Sources : d’où viennent vos visiteurs (recherche organique, réseaux sociaux, sites référents, accès direct)
Mots-clés : ce qu’ils ont tapé dans le moteur de recherche (de plus en plus rare malheureusement, à cause du “not provided” de Google, mais parfois on a des surprises)
Événements personnalisés : vous pouvez tracker des clics sur des boutons, des téléchargements, etc.
Objectifs : définir un objectif (ex: “soumission du formulaire de contact”) et suivre son taux de conversion

C’est suffisamment riche pour un blog ou un site vitrine, et clairement plus simple à appréhender que GA4.

Alternatives ultra-légères

Si Matomo vous paraît encore trop “lourd” pour vos besoins, il existe des alternatives encore plus minimalistes, souvent appréciées par les développeurs :

Plausible — open source, simplissime, payant en cloud (à partir de 9 €/mois), self-hostable. Très joli dashboard, le minimum vital.
Umami — open source, free en cloud (offre limitée), self-hostable. Très simple, propre, moderne.
GoatCounter — open source, gratuit pour les petits sites (jusqu’à 100k pv/mois), self-hostable. Le plus minimaliste de tous.

Ces trois alternatives suivent la même philosophie : pas de cookies, pas de tracking individualisé, juste l’essentiel. Si vous voulez juste savoir “combien de gens viennent sur mes articles”, elles sont parfaites.

Personnellement je suis resté sur Matomo parce que j’aime bien avoir les fonctionnalités avancées (objectifs, événements personnalisés, segments) sous le coude au cas où, mais pour 80% des cas d’usage, Plausible ou Umami suffisent.

Conclusion

Et voilà, vous savez maintenant tout (ou presque) sur la mise en place d’un suivi de fréquentation respectueux et efficace sur votre site Hugo !

Avec ce setup, vous avez :

Des stats fiables qui ne dépendent pas du bon vouloir d’un géant américain
Un tracking conforme au RGPD sans bannière cookies à afficher
Un mécanisme propre qui sépare dev et prod
Le tout en quelques lignes de Hugo bien rangées

Dans la suite de cette série, je prévois encore quelques articles bonus pour aller plus loin (asset pipeline, page bundles, render hooks). Stay tuned !

Annexes & liens utiles

Site officiel Matomo : https://matomo.org/
Documentation d’installation : https://matomo.org/docs/installation/
Guide RGPD de Matomo : https://matomo.org/gdpr-analytics/
Recommandations CNIL sur la mesure d’audience : https://www.cnil.fr/fr/cookies-et-autres-traceurs/regles/cookies-solutions-pour-les-outils-de-mesure-daudience