Astro è il più facile di questi su cui installare e ha un dettaglio controintuitivo: il tag va nel <head>, non prima del tag </body> di chiusura come dicono le istruzioni generali. Non è una preferenza. È quello che fa sopravvivere il tag a una navigazione lato client, e la ragione è in fondo a questa pagina.

Vai prima a prendere lo snippet dalla tua dashboard. Ha questo aspetto, con il tuo identificativo di sito nel percorso:

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

Mettilo nel layout condiviso

In qualunque layout usino tutte le pagine (di solito src/layouts/Layout.astro), dentro il <head>:

---
// src/layouts/Layout.astro
---
<html lang="en">
  <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 conta. Astro elabora i tag <script> (li mette in pacchetti, li converte in moduli, compila il TypeScript) per qualunque tag il cui unico attributo sia src. is:inline gli dice di rendere il tag dentro l'HTML esattamente com'è scritto, che è quello che vuoi per uno script servito dal dominio di qualcun altro. (Anche qualunque altro attributo aggiunge implicitamente is:inline, quindi il defer qui sopra lo farebbe da solo; scriverlo dice quello che intendevi.)

Se usi <ClientRouter />

Astro di serie è un'applicazione a più pagine: ogni navigazione è un caricamento di pagina vero, e non c'è altro a cui pensare.

Aggiungi <ClientRouter /> (le transizioni di vista) e diventa un router lato client. Skomi se ne occupa senza nessun aiuto: il router naviga con history.pushState (e con replaceState, dove un collegamento glielo chiede), e lo script di Skomi li avvolge tutti e due e ascolta popstate, quindi ogni navigazione è una pagina vista. La pagina che si sta lasciando viene chiusa per prima, quindi il suo tempo sulla pagina appartiene a lei invece che alla successiva.

⚠ Non aggiungere data-astro-rerun a questo tag. Quell'attributo esiste per costringere uno script in linea a girare di nuovo dopo ogni transizione, che qui vuol dire avviare il tracker una seconda, una terza e una quarta volta, e contare ogni visita altrettante volte. Lascialo perdere.

Perché l'intestazione, e non prima di </body>

La documentazione di Astro è precisa su che cosa una transizione di vista fa al documento, e le due metà sono trattate al contrario:

  • Il <body> viene sostituito del tutto con il corpo della pagina nuova.
  • Nel <head>, «gli script restano se esistono sulla pagina nuova».

Quindi un tag alla fine del corpo viene tolto e reinserito a ogni singola navigazione (cosa che lo fa girare di nuovo), mentre lo stesso tag nell'intestazione di un layout condiviso da tutte le pagine viene riconosciuto come già presente e lasciato stare. Gira una volta, al primo caricamento, e da lì continua a funzionare.

Su un sito senza <ClientRouter /> le due posizioni si comportano in modo identico, quindi l'intestazione è la risposta giusta in entrambi i casi e non c'è niente da cambiare se aggiungi le transizioni di vista più avanti.

Controlla che funzioni

Carica una pagina sul dominio vero, naviga verso una seconda pagina, e poi torna alla prima. Dovresti vedere tre pagine viste, una per navigazione, non sei. Sei vuol dire che il tag viene rieseguito, che vuol dire che sta nel corpo o che porta data-astro-rerun.

Se non arriva proprio niente, vedi che cosa controllare quando lo snippet non funziona.

Due cose che sembreranno rotte e non lo sono

Da localhost non si raccoglie niente. Il tuo indirizzo di sviluppo non è il dominio che hai registrato, quindi i registri che arrivano da lì sono rifiutati dalla verifica dell'origine. Pubblica sul dominio vero, o su un suo sottodominio, e guarda lì.

Una Content Security Policy lo blocca finché non le dici di no. Lo script e i dati che manda usano un solo host:

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