Poser la balise sur Next.js, Nuxt ou Astro — et le piège de la CSP

La balise est une ligne de HTML. Ce qui suit, ce sont les trois endroits où ça coince vraiment.

Next.js (App Router) — dans app/layout.tsx :

import Script from 'next/script'
// …
<Script defer src="https://letock.fr/t.js" data-site="TA_CLE" />

Nuxt — dans nuxt.config.ts, sous app.head.script.

Astro — dans ton layout, juste avant </body>. Rien de particulier.

Le piège qui coûte une demi-journée : la CSP à nonce

Si ton site sert une Content-Security-Policy avec un nonce par réponse — c’est le cas de beaucoup de sites Next.js modernes — le navigateur bloque la balise sans un mot. Pas d’erreur rouge, pas d’avertissement : rien. Tu vois « Aucune mesure n’est encore arrivée » et tu cherches du mauvais côté.

Ça nous est arrivé sur letock.fr même, et on a mis une demi-journée à le voir.

La balise doit porter le nonce de la réponse :

const nonce = (await headers()).get('x-nonce') ?? undefined
<Script nonce={nonce} defer src="https://letock.fr/t.js" data-site="TA_CLE" />

Comment vérifier en dix secondes : ouvre la console du navigateur, onglet Réseau, cherche t.js. S’il n’apparaît pas du tout alors que la balise est dans le HTML, c’est la CSP.

Deux choses qui surprennent, et qui sont voulues

La clé est par domaine. La balise de monsite.fr ne mesure pas boutique.monsite.fr. Chaque domaine a la sienne, et c’est ce qui permet de les lire séparément.

Les visiteurs ne se suivent pas d’un jour à l’autre. L’empreinte est salée par domaine et jetée chaque nuit. Un habitué quotidien compte une fois par jour. On préfère le dire que d’afficher un chiffre flatteur qu’on ne peut pas tenir.

Le premier événement peut mettre une heure à apparaître sur l’écran d’audience : l’agrégat horaire est reconstruit par le worker. Le direct, lui, est immédiat.