analyticsOS — Suivi d'audience

Que fait analyticsOS — Suivi d'audience ?

analyticsOS enregistre les pages vues, clics, défilements, formulaires, erreurs, performances et utilisateurs connectés via un seul script par application. L'installation consiste en deux balises dans le <head> de la page ; l'essentiel du travail consiste à les placer au bon endroit selon la stack et à ne pas exposer de données personnelles.

Ce dont vous avez besoin de la part de l'utilisateur

La page de configuration analyticsOS affiche une invite avec trois valeurs. Demandez celles qui manquent ; ne les devinez jamais.

• Hôte : là où s'exécute analyticsOS, par exemple https://analytics.example.com.
• Clé : la clé publique de l'application, prj_…. Ce n'est pas un secret : elle apparaît dans chaque page qui charge le script.
• Mode : Identified (applications avec connexions, consentement dans leurs CGU) ou Anonymous (sites publics, rien stocké sur l'appareil).

Installation

1. Identifier la stack et lire sa référence avant toute modification :

   • Next.js (App Router ou Pages Router) : references/nextjs.md
   • Flask ou autre application Jinja : references/flask.md
   • Webflow : references/webflow.md
   • Tout autre (HTML brut, Vite, Astro, SvelteKit, Rails, Django, PHP, WordPress…) : references/any-site.md

2. Variables d'environnement, pas de valeurs en dur : ANALYTICS_HOST et ANALYTICS_KEY, avec le préfixe nécessaire pour les exposer à la page (NEXT_PUBLIC_ pour Next.js, VITE_ pour Vite). Placez-les dans le fichier .env local, ajoutez les noms avec des valeurs vides dans .env.example, et demandez à l'utilisateur de les configurer dans les paramètres de son hébergeur (Railway → Variables, Vercel → Variables d'environnement…) pour chaque environnement où le suivi doit fonctionner.

3. Les deux balises, dans <head> sur chaque page, uniquement quand la clé est définie. Sans clé, rien ne doit se charger : c'est l'interrupteur pour le développement local et les aperçus.

   <script>
     window.aos =
       window.aos ||
       function () {
         ;(window.aos.q = window.aos.q || []).push(arguments)
       }
   </script>
   <script defer src="{ANALYTICS_HOST}/s/{ANALYTICS_KEY}.js"></script>
   

   La première balise met en file d'attente les appels effectués avant le chargement du script ; la seconde charge le script avec les paramètres de l'application.

4. Utilisateurs connectés (uniquement en mode Identifié) : voir references/events.md. En mode anonyme, n'ajoutez aucun appel identify et ne stockez rien sur le visiteur.

5. Nommer les sections principales des pages clés avec data-section="Pricing" (hero, tarifs, formulaire d'inscription…) afin que les rapports puissent les nommer, et mettre data-private sur tout élément dont le texte ne doit jamais être lu : noms de clients, montants, adresses, toute donnée personnelle.

6. Content-Security-Policy : si le projet en définit une, autorisez l'hôte dans script-src et connect-src.

7. Rien d'autre : n'ajoutez pas d'autres outils d'analyse, cookies ou bannières de consentement. analyticsOS n'en a pas besoin.

8. Terminer : lancez la build du projet et le linteur, listez les fichiers modifiés, et demandez à l'utilisateur d'ouvrir l'application dans un navigateur. La page de configuration analyticsOS coche la première page vue en quelques secondes.

Ce que le script capture déjà

N'écrivez pas de code pour ces éléments ; ils sont fournis par le script :

• pages vues, y compris les navigations côté client dans les applications monopages ;
• clics sur les liens, boutons et tout élément avec data-aos-event, ainsi que les liens sortants, téléchargements, rage clicks et dead clicks ;
• profondeur de défilement et temps passé sur la page ;
• formulaires commencés, soumis et abandonnés (jamais ce qui a été saisi) ;
• Core Web Vitals (LCP, INP, CLS, FCP, TTFB), erreurs JavaScript et requêtes de même origine échouées.

Les événements personnalisés, clics nommés et identification figurent dans references/events.md.

Règles de confidentialité

Ces règles s'appliquent à tous les projets, quelle que soit la demande de l'utilisateur :

• N'envoyez jamais d'adresse e-mail, nom, numéro de téléphone ou toute donnée saisie par une personne : ni dans les attributs identify, ni dans les propriétés track, ni dans les noms data-aos-event.
• Identifiez avec l'ID utilisateur interne de l'application, jamais l'e-mail.
• Marquez les éléments affichant des données personnelles avec data-private. Le script ne lit jamais les inputs, textareas ou contenteditable.
• Les navigateurs envoyant Do Not Track ou Global Privacy Control ne sont pas suivis du tout, et les appels aos() sont ignorés. Ne contournez pas cela.

Quand rien n'arrive

Ouvrez l'application avec l'onglet réseau du navigateur :

• /s/{key}.js doit se charger (200), puis les requêtes vers {host}/api/e répondent 204.
• 403 de /api/e : le domaine de la page n'est pas dans les domaines autorisés de l'application (analyticsOS → paramètres de l'application). Ajoutez-le, ou laissez la liste vide pendant les tests.
• 404 : la clé est erronée ou a été tournée il y a plus de 24 heures.
• Aucune requête : la variable de clé n'est pas définie dans cet environnement, une Content-Security-Policy bloque l'hôte, ou le navigateur envoie Do Not Track / Global Privacy Control.
• Next.js, les événements s'arrêtent après la première page : les balises ont été ajoutées comme éléments <script> simples dans une mise en page imbriquée. Utilisez next/script dans la mise en page racine (voir references/nextjs.md).