Démarrage rapide

You are going to install sessio in this project. sessio is a web analytics and session replay tool: a script ("the tracker") records visits (page views, clicks, scrolling, JavaScript errors, network requests) so they can be replayed and analysed in a dashboard.

Before you start, ask me for my site's installation snippet if it is not already in this conversation. I find it in my sessio dashboard: Sites page, "Installation snippet" button on the site's card. It looks like this:

<script>window.TrackerConfig={token:"TRACKING_CODE"}</script>
<script src="https://api-sessio.flamme.work/tracker.js"></script>

Use my snippet exactly as it is, without changing the token or the address.

1. Install the snippet the right way
- Both tags go FIRST in the <head> of every page, before any other script, and WITHOUT async or defer: the tracker hooks fetch, XMLHttpRequest and the console when it runs, and misses everything sent before it.
- Find the project's framework and root page:
  - Static HTML: in the <head> of every page, or of the shared template.
  - Next.js (App Router): in the <head> of the root layout app/layout.tsx, as plain <script> tags (the configuration through dangerouslySetInnerHTML), not next/script.
  - Next.js (Pages Router): in pages/_document.tsx, inside <Head>.
  - Vite, React, Vue, Svelte, Angular: in index.html, at the top of the <head>.
  - Nuxt: app.head.script in nuxt.config, first in the list.
  - WordPress / PHP theme: in header.php right after <head>, or a wp_head hook with priority 1.
  - Anything else: the HTML template shared by all pages.
- For a single-page app, nothing else to do: route changes are detected automatically.
- If the project has a Content-Security-Policy, allow the sessio API domain in script-src and connect-src.
- Do not load the tracker on admin pages or internal areas that must not be recorded.

2. Protect sensitive data
- Form fields are masked by default in replays.
- Add the sessio-block class to areas that must never appear (payment details, identity documents, health information, private account content): they are replaced by an empty rectangle.
- Add the sessio-ignore class to fields whose input must not be tracked.

3. Prepare tracking of key actions
- Give a stable, explicit and unique id (camelCase or kebab-case, for example buyButton, trialCta, signupFormSubmit) to key buttons and links that lack one: sign-up, log-in, purchase, add to cart, quote request, contact, download. Do not change existing ids the code relies on.
- For a conversion that is not a visible click (payment confirmed, sign-up completed, form validated server-side), send an event from the code at the moment it succeeds:
  window.Sessio?.customEvent('signup_completed', { plan: 'pro' })
  The first argument is a short, stable name, the second a free-form object (no personal data).

4. Identify logged-in users (optional)
- If the site has accounts, after log-in, call:
  window.Sessio?.identify("readable identifier, for example the email or display name")
  to find their sessions in the dashboard. Only call it if this complies with the site's privacy policy.

5. Check
- Run the site, open a page in the browser and check in the Network tab that tracker.js loads and that an "open" call to the sessio API returns 200.
- For details, temporarily add debug:true to TrackerConfig ({token:"…",debug:true}): the tracker logs what it does in the console. Remove it afterwards.

6. Finally, give me a summary
- The files you changed.
- The ids added to buttons, with the page and label of each.
- The customEvent events added, and when each one fires.
- The areas protected by sessio-block or sessio-ignore.
- Three funnel ideas to create in the sessio dashboard (Funnels page) with these ids and events, step by step.

Tu vas installer sessio dans ce projet. sessio est un outil d'analytics web et de session replay : un script (« le tracker ») enregistre les visites (pages vues, clics, défilement, erreurs JavaScript, requêtes réseau) pour les rejouer et les analyser dans un dashboard.

Avant de commencer, demande-moi le snippet d'installation de mon site s'il ne figure pas dans cette conversation. Je le trouve dans mon dashboard sessio : page Sites, bouton « Snippet d'installation » de la carte du site. Il a cette forme :

<script>window.TrackerConfig={token:"CODE_DE_SUIVI"}</script>
<script src="https://api-sessio.flamme.work/tracker.js"></script>

Utilise exactement mon snippet, sans changer le jeton ni l'adresse.

1. Installer le snippet, de la bonne façon
- Les deux balises vont en PREMIER dans le <head> de toutes les pages, avant tout autre script, et SANS async ni defer : le tracker intercepte fetch, XMLHttpRequest et la console au moment où il s'exécute, et rate tout ce qui part avant lui.
- Repère le framework et la page racine du projet :
  - HTML statique : dans le <head> de chaque page, ou du gabarit commun.
  - Next.js (App Router) : dans le <head> du layout racine app/layout.tsx, en balises <script> classiques (la configuration via dangerouslySetInnerHTML), pas next/script.
  - Next.js (Pages Router) : dans pages/_document.tsx, dans <Head>.
  - Vite, React, Vue, Svelte, Angular : dans index.html, en haut du <head>.
  - Nuxt : app.head.script dans nuxt.config, en tête de liste.
  - WordPress / thème PHP : dans header.php juste après <head>, ou un hook wp_head de priorité 1.
  - Autre : le gabarit HTML commun à toutes les pages.
- Pour une application monopage, rien d'autre à faire : les changements de route sont détectés seuls.
- Si le projet a une Content-Security-Policy, autorise le domaine de l'API sessio dans script-src et connect-src.
- Ne charge pas le tracker sur les pages d'administration ou les espaces internes qui ne doivent pas être enregistrés.

2. Protéger les données sensibles
- Les champs de formulaire sont masqués par défaut dans les replays.
- Ajoute la classe sessio-block aux zones qui ne doivent jamais apparaître (données bancaires, documents d'identité, informations de santé, contenu privé d'un compte) : elles sont remplacées par un rectangle vide.
- Ajoute la classe sessio-ignore aux champs dont la saisie ne doit pas être suivie.

3. Préparer le suivi des actions importantes
- Donne un id stable, explicite et unique (en camelCase ou kebab-case, par exemple boutonAcheter, ctaEssai, formInscriptionEnvoyer) aux boutons et liens clés qui n'en ont pas : inscription, connexion, achat, ajout au panier, demande de devis, contact, téléchargement. Ne change pas les id existants dont le code dépend.
- Pour une conversion qui ne correspond pas à un clic visible (paiement confirmé, inscription réussie, formulaire validé côté serveur), envoie un événement depuis le code, au moment où elle réussit :
  window.Sessio?.customEvent('inscription_terminee', { plan: 'pro' })
  Le premier argument est un nom court et stable, le second un objet libre (sans donnée personnelle).

4. Identifier les utilisateurs connectés (facultatif)
- Si le site a des comptes, après la connexion, appelle :
  window.Sessio?.identify("identifiant lisible, par exemple l'email ou le nom affiché")
  pour retrouver ses sessions dans le dashboard. Ne l'appelle que si cela respecte la politique de confidentialité du site.

5. Vérifier
- Lance le site, ouvre une page dans le navigateur et vérifie dans l'onglet Réseau que tracker.js se charge puis qu'un appel « open » vers l'API sessio répond 200.
- Pour le détail, ajoute temporairement debug:true dans TrackerConfig ({token:"…",debug:true}) : le tracker écrit ce qu'il fait dans la console. Retire-le ensuite.

6. Pour finir, donne-moi un récapitulatif
- Les fichiers modifiés.
- La liste des id ajoutés sur les boutons, avec la page et le libellé de chacun.
- Les événements customEvent ajoutés, avec le moment où ils partent.
- Les zones protégées par sessio-block ou sessio-ignore.
- Trois idées de funnels à créer dans le dashboard sessio (page Funnels) avec ces id et ces événements, étape par étape.