Astro es el más fácil de todos para instalar y tiene un detalle contraintuitivo: la etiqueta va en el <head>, no antes de la etiqueta </body> de cierre como dicen las instrucciones generales. No es una preferencia. Es lo que hace que la etiqueta sobreviva a una navegación del lado del cliente, y la razón está al final de esta página.

Consigue primero el fragmento desde tu panel. Tiene esta pinta, con tu propio identificador de sitio en la ruta:

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

Ponlo en la maquetación compartida

En la maquetación que usan todas tus páginas (normalmente src/layouts/Layout.astro), dentro del <head>:

---
// src/layouts/Layout.astro
---
<html lang="es">
  <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 importa. Astro procesa las etiquetas <script> (las empaqueta, las convierte en módulos, compila el TypeScript) para toda etiqueta cuyo único atributo sea src. is:inline le dice que dibuje la etiqueta en el HTML exactamente como está escrita, que es lo que quieres para un script servido desde el dominio de otra persona. (Cualquier otro atributo añade is:inline de forma implícita también, así que el defer de arriba lo haría por sí solo; escribirlo dice lo que querías decir.)

Si usas <ClientRouter />

Astro es una aplicación multipágina de serie: cada navegación es una carga de página de verdad, y no hay nada más en lo que pensar.

Añade <ClientRouter /> (las transiciones de vista) y se convierte en un enrutador del lado del cliente. Skomi se apaña con eso sin ayuda: el enrutador navega con history.pushState (y replaceState, donde un enlace lo pide), y el script de Skomi envuelve los dos y escucha popstate, así que cada navegación es una página vista. La página que se deja se termina primero, para que su tiempo en la página le pertenezca a ella y no a la siguiente.

⚠ No le añadas data-astro-rerun a esta etiqueta. Ese atributo existe para forzar que un script en línea se ejecute otra vez después de cada transición, lo que aquí significa arrancar el rastreador una segunda, una tercera y una cuarta vez, y contar cada visita otras tantas veces. Déjalo fuera.

Por qué el head, y no antes de </body>

La documentación de Astro es precisa sobre lo que una transición de vista le hace al documento, y las dos mitades se tratan al revés:

  • El <body> se sustituye por completo por el de la página nueva.
  • En el <head>, los scripts que ya estén en la página nueva se conservan.

Así que una etiqueta al final del body se quita y se vuelve a insertar en cada navegación (lo que la ejecuta de nuevo), mientras que la misma etiqueta en el head de una maquetación que comparten todas las páginas se reconoce como ya presente y se deja en paz. Se ejecuta una vez, en la primera carga, y sigue funcionando a partir de ahí.

En un sitio sin <ClientRouter /> las dos posiciones se comportan igual, así que el head es la respuesta correcta en los dos casos y no habrá nada que cambiar si añades transiciones de vista más adelante.

Comprobar que funciona

Carga una página en el dominio real, navega a una segunda página, y luego vuelve a la primera. Deberías ver tres páginas vistas, una por navegación, no seis. Seis significa que la etiqueta se está volviendo a ejecutar, o sea que está en el body o lleva data-astro-rerun.

Si no llega nada en absoluto, véase qué comprobar cuando el fragmento no funciona.

Dos cosas que parecerán rotas y no lo están

No se recoge nada desde localhost. Tu dirección de desarrollo no es el dominio que registraste, así que los registros que vengan de ahí los rechaza la comprobación de origen. Despliega en el dominio real, o en un subdominio suyo, y mira ahí.

Una política de seguridad de contenido lo bloqueará hasta que le digas que no. El script y los datos que manda usan un solo host:

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