Astro est le plus simple de tous pour l'installation, avec un détail contre-intuitif : la balise va dans le <head>, pas avant la balise </body> fermante comme le disent les instructions générales. Ce n'est pas une préférence. C'est ce qui permet à la balise de survivre à une navigation côté client, et la raison est en bas de cette page.

Récupérez d'abord l'extrait depuis votre tableau de bord. Il ressemble à ceci, avec votre propre identifiant de site dans le chemin :

<script src="https://t.skomi.com/s/your-site-id.js" defer></script>

Placez-le dans la mise en page partagée

Dans la mise en page qu'utilisent toutes vos pages (le plus souvent src/layouts/Layout.astro), à l'intérieur du <head> :

---
// src/layouts/Layout.astro
---
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <slot name="head" />
    <script is:inline defer src="https://t.skomi.com/s/your-site-id.js"></script>
  </head>
  <body>
    <slot />
  </body>
</html>

is:inline a son importance. Astro traite les balises <script> (les regroupe, les convertit en modules, compile le TypeScript) pour toute balise dont src est le seul attribut. is:inline lui dit de rendre la balise dans le HTML exactement telle qu'elle est écrite, ce que vous voulez pour un script servi depuis le domaine de quelqu'un d'autre. (N'importe quel autre attribut ajoute implicitement is:inline lui aussi : le defer ci-dessus suffirait donc à lui seul ; l'écrire noir sur blanc dit ce que vous vouliez dire.)

Si vous utilisez <ClientRouter />

Astro est par défaut une application multi-pages : chaque navigation est un vrai chargement de page, et il n'y a rien d'autre à quoi penser.

Ajoutez <ClientRouter /> (les transitions de vue) et il devient un routeur côté client. Skomi s'en accommode sans aide : le routeur navigue avec history.pushState (et replaceState, là où un lien le demande), et le script de Skomi enveloppe les deux et écoute popstate : chaque navigation est donc une page vue. La page que l'on quitte est terminée en premier, si bien que son temps passé lui appartient plutôt que d'aller à la suivante.

⚠ N'ajoutez pas data-astro-rerun à cette balise. Cet attribut existe pour forcer un script en ligne à s'exécuter de nouveau après chaque transition, ce qui signifie ici démarrer le traceur une deuxième, une troisième et une quatrième fois, et compter chaque visite autant de fois. Laissez-le de côté.

Pourquoi le head, et pas avant </body>

La documentation d'Astro est précise sur ce qu'une transition de vue fait au document, et les deux moitiés sont traitées à l'opposé :

  • Le <body> est entièrement remplacé par celui de la nouvelle page.
  • Dans le <head>, les scripts déjà présents sur la nouvelle page sont conservés.

Une balise en fin de body est donc retirée puis réinsérée à chaque navigation (ce qui la ré-exécute), alors que la même balise dans le head d'une mise en page partagée par toutes les pages est reconnue comme déjà présente et laissée tranquille. Elle s'exécute une fois, au premier chargement, et continue de fonctionner à partir de là.

Sur un site sans <ClientRouter />, les deux emplacements se comportent de façon identique : le head est donc la bonne réponse dans les deux cas et il n'y aura rien à changer si vous ajoutez les transitions de vue plus tard.

Vérifier que cela fonctionne

Chargez une page sur le vrai domaine, naviguez vers une deuxième page, puis revenez à la première. Vous devriez voir trois pages vues, une par navigation, pas six. Six signifie que la balise est ré-exécutée, donc qu'elle est dans le body ou qu'elle porte data-astro-rerun.

Si rien n'arrive du tout, voir que vérifier quand l'extrait ne fonctionne pas.

Deux choses qui auront l'air cassées et ne le sont pas

Rien n'est collecté depuis localhost. Votre adresse de développement n'est pas le domaine que vous avez enregistré : les relevés qui en viennent sont donc refusés par la vérification d'origine. Déployez sur le vrai domaine, ou sur un sous-domaine, et regardez là.

Une politique de sécurité du contenu le bloquera tant qu'on ne lui dit pas le contraire. Le script et les données qu'il envoie utilisent un seul hôte :

script-src  https://t.skomi.com
connect-src https://t.skomi.com