So überprüfen Sie, ob SeaText-Skripte in einer Single-Page-Anwendung korrekt geladen werden

Direkte Antwort

Um SeaText in einer Single-Page-Anwendung zu überprüfen, rufen Sie SeaText.reinit() oder SeaText.update() auf, wenn sich die Route ändert. Bestätigen Sie außerdem, dass das SeaText-Skript-Tag nur im initialen HTML erscheint. Es sollte bei der Navigation nicht erneut eingefügt werden.

Dies ist der Kern einer korrekten SPA-Einrichtung. Wenn das Skript-Tag einmal vorhanden ist und der Route-Hook die Methode nach jeder Routenänderung aufruft, kann SeaText weiter funktionieren, während Benutzer durch Ihre App navigieren.

Warum sich die SPA-Integration von traditionellen Websites unterscheidet

Mehrseitige Websites laden bei jedem Klick ein neues HTML-Dokument. Der Browser findet das SeaText-Skript erneut und führt es von Grund auf aus. SPAs laden einmal und tauschen Inhalte im Browser aus. Sie fordern nie eine zweite Kopie dieses HTML-Dokuments an.

SeaText verwendet ein async-Attribut auf seinem Skript-Tag. Das bedeutet, dass das Skript lädt, ohne das Rendern der Seite zu blockieren. SeaText speichert außerdem eine ID in localStorage. Diese ID hilft SeaText, denselben Besucher über Routen hinweg zu erkennen.

Da das Skript bereits läuft, müssen Sie SeaText mitteilen, wann sich der sichtbare Inhalt geändert hat. Eine clientseitige Routenänderung setzt die JavaScript-Umgebung nicht zurück. Der Router entfernt die alte Ansicht und rendert eine neue. SeaText benötigt ein Signal, um diese neue Ansicht zu inspizieren. Dieses Signal ist SeaText.reinit() oder SeaText.update().

Wenn Sie das Skript-Tag stattdessen zu jeder Route hinzufügen, können Sie mehrere Kopien erstellen. Die alte Kopie kann weiterlaufen. Die neue Kopie kann eine neue Sitzung starten. Das kann Varianten, Übersetzungen oder Personalisierung zurücksetzen. Behalten Sie das Skript-Tag in der statischen Einstiegsdatei.

Schnelle Überprüfungsschritte

1. Lokalisieren Sie den Einstiegspunkt. Finden Sie heraus, wo Ihre SPA eingebunden wird. Dies ist normalerweise index.html, main.js, main.tsx oder App.vue.
2. Bestätigen Sie, dass das Snippet vorhanden ist. Das SeaText-Snippet sollte einmal innerhalb des body-Tags dieser Einstiegsdatei erscheinen. Platzieren Sie es nicht in einer Komponentenvorlage, die bei Routenänderung neu rendert.
3. Erstellen und stellen Sie die App bereit. Führen Sie Ihren normalen Dev-Befehl aus, wie z. B. npm start, npm run serve oder ng serve.
4. Inspizieren Sie den Netzwerk-Tab. Laden Sie die Seite neu. Überprüfen Sie, dass die SeaText-Skriptanfrage HTTP 200 zurückgibt und die Antwort JavaScript ist.
5. Prüfen Sie den Konsolen-Tab. Suchen Sie nach Fehlern, die SeaText, seatext oder die Skript-Domain erwähnen. Eine saubere Konsole bedeutet, dass das Skript geparst und ausgeführt wurde.
6. Lösen Sie eine SeaText-Funktion aus. Ändern Sie eine Sprache oder zeigen Sie eine Variante an. Bestätigen Sie, dass die Funktion auf der aktuellen Route erscheint.
7. Navigieren Sie zu einer anderen Route. Verwenden Sie Ihren App-Router, um Ansichten zu wechseln. Öffnen Sie den Netzwerk-Tab erneut. Das SeaText-Skript sollte nicht ein zweites Mal angefragt werden.

Diese Schritte überprüfen das initiale Laden. Sie beweisen noch nicht, dass SeaText nach der Navigation neu initialisiert wird.

Überprüfung von Routenänderungen

Ein sauberes initiales Laden ist nur die Hälfte des Tests. Sie müssen auch beweisen, dass SeaText reagiert, wenn sich die Route ändert. Verwenden Sie einen Route-Listener oder einen Router-Hook, um SeaText.reinit() aufzurufen, nachdem die neue Route gerendert wurde.

Hier ist ein generisches Muster. Der Ereignisname hängt von Ihrem Router ab. Der wichtige Teil ist der Aufruf der SeaText-Methode.

window.addEventListener('navigation', function () {
  if (window.SeaText && typeof window.SeaText.reinit === 'function') {
    window.SeaText.reinit();
  }
});

Ersetzen Sie navigation durch das Ereignis, das Ihr Router bereitstellt. Wenn Ihre Integration update() verwendet, ersetzen Sie den Methodennamen.

Erwartete Ergebnisse für jeden Schritt

Verwenden Sie diese Prüfungen, nachdem Sie den Listener hinzugefügt haben:

• Öffnen Sie die App. Erwartet: Das SeaText-Skript lädt einmal im Netzwerk-Tab.
• Navigieren Sie zu einer neuen Route. Erwartet: Ihr Listener wird ausgelöst und ruft SeaText.reinit() oder SeaText.update() einmal auf.
• Beobachten Sie den Netzwerk-Tab erneut. Erwartet: Keine neue Anfrage für die SeaText-Skriptdatei.
• Prüfen Sie die Konsole. Erwartet: Keine Fehler von SeaText.
• Lösen Sie eine SeaText-Funktion aus. Erwartet: Die Funktion wird auf der neuen Route angewendet.

Wenn das Skript neu lädt, verschieben Sie das Snippet zurück in die statische Einstiegsdatei. Wenn die Funktion nicht angewendet wird, prüfen Sie, ob der Route-Hook nach den DOM-Updates ausgeführt wird.

Framework-spezifische Route-Hooks

Jeder Router hat einen anderen Ort, um Routenänderungen abzufangen. Das Ziel ist dasselbe: Nachdem die neue Route gerendert wurde, rufen Sie SeaText.reinit() oder SeaText.update() auf.

React Router

Verwenden Sie useLocation() und useEffect(). Platzieren Sie den Observer innerhalb Ihrer Router-Komponente.

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

function SeaTextRouteObserver() {
  const location = useLocation();

  useEffect(() => {
    if (window.SeaText && typeof window.SeaText.reinit === 'function') {
      window.SeaText.reinit();
    }
  }, [location]);

  return null;
}

Erwartet: Wenn sich der Pfadname ändert, läuft der Effekt und SeaText initialisiert auf der neuen Seite neu.

Next.js App Router

Verwenden Sie usePathname() in einer Client-Komponente. Rendern Sie diese Komponente in Ihrem Root-Layout, damit sie eingebunden bleibt.

'use client';
import { usePathname } from 'next/navigation';
import { useEffect } from 'react';

export default function SeaTextRouteObserver() {
  const pathname = usePathname();

  useEffect(() => {
    if (window.SeaText && typeof window.SeaText.reinit === 'function') {
      window.SeaText.reinit();
    }
  }, [pathname]);

  return null;
}

Erwartet: Jede App-Router-Navigation ändert pathname und löst den Effekt aus.

Next.js Pages Router

Verwenden Sie den useRouter()-Hook und das routeChangeComplete-Ereignis. Binden Sie den Observer in _app.js oder _app.tsx ein.

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function SeaTextRouteObserver() {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = () => {
      if (window.SeaText && typeof window.SeaText.reinit === 'function') {
        window.SeaText.reinit();
      }
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => router.events.off('routeChangeComplete', handleRouteChange);
  }, [router]);

  return null;
}

Erwartet: Der Handler wird nach jeder abgeschlossenen Routenänderung ausgelöst und ruft SeaText einmal auf.

Vue Router

Verwenden Sie den afterEach-Hook des Routers in Ihrer Router-Setup-Datei.

router.afterEach(() => {
  if (window.SeaText && typeof window.SeaText.reinit === 'function') {
    window.SeaText.reinit();
  }
});

Erwartet: Nach jeder Navigation läuft der Hook. Das SeaText-Skript-Tag bleibt in index.html.

Angular Router

Filtern Sie das NavigationEnd-Ereignis in AppComponent oder einem Root-Service.

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

export class AppComponent {
  constructor(private router: Router) {
    this.router.events
      .pipe(filter((event) => event instanceof NavigationEnd))
      .subscribe(() => {
        (window as any).SeaText?.reinit?.();
      });
  }
}

Erwartet: SeaText initialisiert nach jeder abgeschlossenen Angular-Navigation neu.

Wenn Ihre installierte Version update() statt reinit() bereitstellt, ersetzen Sie den Methodennamen in diesen Beispielen. Fragen Sie beim Anbieter nach, wenn Sie unsicher sind.

Häufige Probleme und wie man sie behebt

• Skript lädt, aber Funktionen erscheinen nicht. Prüfen Sie, ob localStorage zugänglich ist. Einige Datenschutzmodi oder sandboxed iframes blockieren es. Bestätigen Sie außerdem, dass Ihr Route-Hook SeaText.reinit() oder SeaText.update() aufruft.
• Skriptanfragen bei jeder Routenänderung. Das Snippet befindet sich wahrscheinlich in einer Komponente, die neu eingebunden wird. Verschieben Sie es in die statische index.html.
• Cross-Origin-Fehler in der Konsole. Wenn Ihre SPA Inhalte von mehreren Domains bereitstellt, erlauben Sie die SeaText-Skript-Domain in Ihrer Content Security Policy und in den CORS-Headern.
• 404 bei Skriptanfrage. Die Snippet-URL ist möglicherweise veraltet. Kopieren Sie das neueste Snippet aus Ihrem SeaText-Dashboard.
• Re-Init läuft mehr als einmal. Fügen Sie den Route-Observer nur an einer Stelle hinzu. Wenn Sie ihn in mehreren Komponenten einbinden, rufen Sie die Methode möglicherweise mehrfach auf.

Einschränkungen und wann dieser Rat nicht gilt

Dieser Leitfaden behandelt clientseitiges Skriptladen und Routen-Neuinitialisierung. Er validiert nicht die KI-Umschreibungs-, Übersetzungs- oder A/B-Testing-Logik von SeaText. Diese benötigen separate Funktionstests.

Die Schritte setzen eine Standard-SPA mit einer statischen Einstiegsdatei voraus. Wenn Ihre SPA eine Micro-Frontend-Architektur verwendet, bei der jedes Fragment seine eigenen Skripte einfügt, gilt die Einzel-Snippet-Regel möglicherweise nicht. Konsultieren Sie den SeaText-Support für diese Topologie.

Wenn Ihre App Server-Side-Rendering verwendet, prüfen Sie, dass das Snippet nicht in der Server-Ausgabe dupliziert wird. Die Route-Hooks gehören weiterhin in den Client.

Headless-Testing-Tools müssen auf die Skriptausführung warten. Ein einfaches Seitenladen reicht möglicherweise nicht aus. Warten Sie, bis die SeaText-Methode verfügbar ist, bevor Sie Ergebnisse prüfen.

FAQ

Muss ich SeaText.reinit() bei jeder Routenänderung aufrufen?

Ja, bei clientseitigen Routenänderungen. Der Routenwechsel ändert das sichtbare DOM, daher muss SeaText die Seite neu scannen. Laden Sie das SeaText-Skript während der Navigation nicht neu. Behalten Sie das Skript-Tag im initialen HTML und rufen Sie SeaText.reinit() oder SeaText.update() vom Router-Hook aus auf.

Wann sollte ich SeaText.update() statt SeaText.reinit() verwenden?

Verwenden Sie die Methode, die Ihre Integration bereitstellt. Als allgemeines Muster passt reinit() zu einer vollständigen Routenänderung, während update() zu einer kleineren Inhaltsänderung auf derselben Seite passt. Wenn Ihr Build nur eine Methode bereitstellt, verwenden Sie diese. Fragen Sie beim Anbieter nach, wenn Sie unsicher sind.

Kann ich das SeaText-Skript dynamisch über JavaScript laden?

Nicht empfohlen. Das Snippet ist für die statische Platzierung im initialen HTML konzipiert. Dynamische Injektion kann Race Conditions, Doppelladen oder Content Security Policy-Fehler verursachen.

Was ist, wenn meine SPA eine strikte Content Security Policy verwendet?

Fügen Sie die SeaText-Skript-Domain zur script-src-Direktive hinzu. Da das Skript mit SeaText-Endpunkten kommuniziert, erlauben Sie auch connect-src. Wiederholen Sie dann die Netzwerk- und Konsolenprüfungen.

Wie überprüfe ich dies in einem Produktions-Build?

Führen Sie npm run build aus und stellen Sie die Ausgabe bereit. Öffnen Sie DevTools, prüfen Sie die Tabs Netzwerk und Konsole, navigieren Sie zwischen Routen und bestätigen Sie, dass das SeaText-Skript nicht neu lädt.

Weiterführende Literatur und Vergleichsquellen

Diese externen Quellen bieten zusätzlichen Kontext zur Bewertung des Themas. Ihre Aufnahme stellt keine Empfehlung dar.

• Load Testing Single-Page Applications - LoadView
• Test a single page application - SPA
• Load Testing a Single-Page Application (SPA) - LoadForge Docs

Mehr erfahren

Besuchen Sie die Website für weitere Informationen.