AccueilSe connecter
Installer le tracker

Installer le tracker

Le snippet, où le placer pour ne rien manquer, et l'installation dans les principaux frameworks.

#Installer avec une IA

Vous codez avec un assistant (Claude Code, Cursor, Copilot, ChatGPT) ? Copiez ce prompt et collez-le dans votre assistant, ouvert sur le projet de votre site : il installe sessio au bon endroit, protège les zones sensibles et prépare vos boutons pour les funnels.

Install with AICopy this prompt and paste it into Claude Code, Cursor, Copilot or ChatGPT, opened on your project.
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.

Votre assistant vous rend à la fin la liste des ID et des événements ajoutés : ce sont les valeurs à reprendre dans les événements sur mesure et les funnels.

#Le snippet

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

La première ligne donne au tracker votre code de suivi ; la seconde le charge depuis votre API sessio.

#Pourquoi en premier, et sans async

Le tracker intercepte fetch, XMLHttpRequest, sendBeacon et la console au moment où il s'exécute. Tout ce que la page fait avant lui lui échappe. Chargé en premier dans le <head>, de façon synchrone, il voit tout, dès la première requête.

Attention

Avec async, ou placé après les scripts de votre site, les requêtes du chargement partent avant lui : elles apparaissent dans le replay avec leur statut et leur durée, mais sans méthode, payload ni réponse.

Le tracker est léger et mis en cache par le navigateur ; la librairie d'enregistrement de l'écran (rrweb), plus lourde, est elle chargée en arrière-plan sans bloquer la page.

#Applications monopages (SPA)

Rien à faire : les changements de vue par history.pushState, replaceState et le bouton Précédent sont détectés automatiquement et comptés comme des pages vues distinctes.

#Next.js

Dans le layout racine (app/layout.tsx), placez les deux balises dans <head> :

tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <head>
        <script dangerouslySetInnerHTML={{ __html: 'window.TrackerConfig={token:"VOTRE_CODE"}' }} />
        <script src="https://api-sessio.flamme.work/tracker.js" />
      </head>
      <body>{children}</body>
    </html>
  );
}

#React (Vite, Create React App)

Collez le snippet dans index.html, en haut du <head>, avant le script de votre application.

#Vue, Nuxt, Angular

Même principe : index.html (Vue, Angular) ou la configuration app.head de Nuxt, en premier.

#WordPress

Ajoutez le snippet dans header.php, juste après <head>, ou avec une extension d'insertion de code réglée sur « en-tête, priorité haute ».

#Politique de sécurité (CSP)

Si votre site envoie un en-tête Content-Security-Policy, autorisez le domaine de votre API :

text
script-src 'self' https://api-sessio.flamme.work;
connect-src 'self' https://api-sessio.flamme.work;

La ligne window.TrackerConfig=… étant un script en ligne, placez-la dans un fichier à part si votre CSP interdit les scripts en ligne.

#Vérifier l'installation

Ouvrez la console de votre navigateur sur votre site et tapez :

js
Sessio._debug()

Vous devez voir un pageviewId : la visite est enregistrée.

PrécédentDémarrage rapideSuivant Options du tracker