O Astro é o mais fácil destes para instalar e tem um pormenor contraintuitivo: a etiqueta vai no <head>, e não antes da etiqueta </body> de fecho como dizem as instruções gerais. Isto não é uma preferência. É o que faz a etiqueta sobreviver a uma navegação do lado do cliente, e a razão está no fim desta página.

Vai buscar primeiro o fragmento ao teu painel. Tem este aspeto, com o teu próprio identificador de sítio no caminho:

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

Põe-no no layout partilhado

No layout que todas as páginas usam (normalmente o src/layouts/Layout.astro), dentro do <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>

O is:inline importa. O Astro processa as etiquetas <script> (junta-as num pacote, converte-as em módulos, compila TypeScript) em qualquer etiqueta cujo único atributo seja o src. O is:inline diz-lhe para apresentar a etiqueta no HTML exatamente como está escrita, que é o que queres para um script servido a partir do domínio de outra pessoa. (Qualquer outro atributo também acrescenta implicitamente o is:inline, portanto o defer acima já o faria sozinho; escrevê-lo diz o que querias dizer.)

Se usas o <ClientRouter />

O Astro é de origem uma aplicação de várias páginas: todas as navegações são um carregamento de página verdadeiro, e não há mais nada em que pensar.

Acrescenta o <ClientRouter /> (transições de vista) e passa a ser um encaminhador do lado do cliente. A Skomi trata disso sem ajuda nenhuma: o encaminhador navega com history.pushState (e replaceState, quando uma ligação lho pede), e o script da Skomi embrulha os dois e escuta o popstate, portanto cada navegação é uma página vista. A página que se está a deixar é fechada primeiro, portanto o tempo nela pertence-lhe a ela em vez de à seguinte.

⚠ Não acrescentes data-astro-rerun a esta etiqueta. Esse atributo existe para forçar um script embutido a correr outra vez depois de cada transição, o que aqui quer dizer arrancar o rastreador uma segunda, terceira e quarta vez, e contar todas as visitas outras tantas vezes. Deixa-o de fora.

Porquê o cabeçalho, e não antes do </body>

A documentação do Astro é precisa quanto ao que uma transição de vista faz ao documento, e as duas metades são tratadas ao contrário uma da outra:

  • O <body> é completamente substituído pelo corpo da página nova.
  • No <head>, "os scripts ficam se existirem na página nova".

Portanto uma etiqueta no fim do corpo é removida e reinserida em cada navegação (o que a faz correr de novo), enquanto a mesma etiqueta no cabeçalho de um layout que todas as páginas partilham é reconhecida como já presente e deixada em paz. Corre uma vez, no primeiro carregamento, e continua a funcionar a partir daí.

Num sítio sem <ClientRouter /> as duas posições comportam-se de forma idêntica, portanto o cabeçalho é a resposta certa em qualquer dos casos e não há nada para mudar se acrescentares transições de vista mais tarde.

Confirma que está a funcionar

Carrega uma página no domínio verdadeiro, navega para uma segunda página, e depois volta à primeira. Devias ver três páginas vistas, uma por navegação, não seis. Seis quer dizer que a etiqueta está a ser executada de novo, o que quer dizer que está no corpo ou que traz data-astro-rerun.

Se não chegar rigorosamente nada, vê o que verificar quando o fragmento não funciona.

Duas coisas que vão parecer partidas e não estão

Não se recolhe nada do localhost. O teu endereço de desenvolvimento não é o domínio que registaste, portanto os registos vindos dali são recusados pela verificação de origem. Publica no domínio verdadeiro, ou num subdomínio dele, e olha lá.

Uma Política de Segurança de Conteúdo bloqueia-o enquanto não lhe disseres que não. O script e os dados que ele envia usam um único anfitrião:

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