Astro ist von diesen das am leichtesten zu installierende und hat eine Einzelheit, die der Erwartung widerspricht: das Tag gehört in den <head>, nicht vor das schließende </body>-Tag, wie es die allgemeine Anleitung sagt. Das ist keine Vorliebe. Es ist das, was das Tag eine clientseitige Navigation überstehen lässt, und der Grund steht unten auf dieser Seite.

Holen Sie sich zuerst das Snippet aus Ihrem Dashboard. Es sieht so aus, mit Ihrer eigenen Website-ID im Pfad:

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

In das gemeinsame Layout setzen

In das Layout, das jede Seite verwendet (meist src/layouts/Layout.astro), innerhalb des <head>:

---
// src/layouts/Layout.astro
---
<html lang="de">
  <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 ist wichtig. Astro verarbeitet <script>-Tags (bündelt sie, wandelt sie in Module um, kompiliert TypeScript) bei jedem Tag, dessen einziges Attribut src ist. is:inline weist es an, das Tag genau so in das HTML zu schreiben, wie es dasteht, und das ist es, was Sie bei einem Skript von der Domain eines anderen wollen. (Jedes andere Attribut fügt is:inline implizit ebenfalls hinzu, das defer oben täte es also schon allein; es auszuschreiben sagt, was Sie gemeint haben.)

Wenn Sie <ClientRouter /> verwenden

Astro ist standardmäßig eine Multi-Page-Anwendung: Jede Navigation ist ein echter Seitenaufruf, und es gibt nichts weiter zu bedenken.

Fügen Sie <ClientRouter /> hinzu (View Transitions), und es wird ein clientseitiger Router. Skomi kommt damit ohne Hilfe zurecht: Der Router navigiert mit history.pushState (und replaceState, wo ein Link darum bittet), und Skomis Skript umhüllt beide und hört auf popstate, jede Navigation ist also ein Seitenaufruf. Die verlassene Seite wird zuerst abgeschlossen, ihre Verweildauer gehört also ihr und nicht der nächsten.

⚠ Fügen Sie diesem Tag kein data-astro-rerun hinzu. Dieses Attribut gibt es, um ein Inline-Skript nach jeder Transition erneut laufen zu lassen, was hier heißt, den Tracker ein zweites, drittes und viertes Mal zu starten, und jeden Besuch entsprechend oft zu zählen. Lassen Sie es weg.

Warum in den Head und nicht vor </body>

Astros Dokumentation ist genau darin, was eine View Transition mit dem Dokument macht, und die beiden Hälften werden entgegengesetzt behandelt:

  • Der <body> wird vollständig ersetzt durch den Body der neuen Seite.
  • Im <head> werden „Skripte belassen, wenn sie auf der neuen Seite vorhanden sind".

Ein Tag am Ende des Body wird also bei jeder einzelnen Navigation entfernt und wieder eingefügt (was es erneut ausführt), während dasselbe Tag im Head eines von allen Seiten geteilten Layouts als bereits vorhanden erkannt und in Ruhe gelassen wird. Es läuft einmal, beim ersten Laden, und funktioniert von da an weiter.

Auf einer Website ohne <ClientRouter /> verhalten sich beide Positionen gleich, der Head ist also so oder so die richtige Antwort, und es gibt nichts zu ändern, wenn Sie View Transitions später hinzufügen.

Prüfen, ob es funktioniert

Laden Sie eine Seite auf der echten Domain, navigieren Sie zu einer zweiten Seite und dann zurück zur ersten. Sie sollten drei Seitenaufrufe sehen, einen je Navigation, nicht sechs. Sechs heißt, dass das Tag erneut ausgeführt wird, und das heißt, es steht im Body oder trägt data-astro-rerun.

Wenn überhaupt nichts ankommt, siehe was zu prüfen ist, wenn das Snippet nicht funktioniert.

Zwei Dinge, die kaputt aussehen und es nicht sind

Von localhost wird nichts erhoben. Ihre Entwicklungsadresse ist nicht die Domain, die Sie registriert haben, Aufrufe von dort werden also von der Herkunftsprüfung abgelehnt. Liefern Sie auf die echte Domain oder eine ihrer Subdomains aus und sehen Sie dort nach.

Eine Content Security Policy blockiert es, bis Sie es ihr sagen. Das Skript und die Daten, die es sendet, nutzen einen Host:

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