Kann ich SeaText AI für meine SPA verwenden, ohne den Scope zu konfigurieren?

Nein, Sie können SeaText AI für Ihre SPA nicht zuverlässig verwenden, ohne den Scope zu konfigurieren.

Ohne einen definierten Scope kann die KI keine Inhaltsänderungen erkennen, die auftreten, wenn die SPA die Ansicht über clientseitiges Routing aktualisiert, sodass Optimierungen möglicherweise übersehen oder auf veraltete Inhalte angewendet werden.

Warum der Scope für clientseitig geroutete SPAs obligatorisch ist

In einer Single-Page-Anwendung lädt der Browser die Seite nicht neu, wenn der Benutzer navigiert. Stattdessen tauscht das Framework Komponenten innerhalb eines Root-Containers aus, während sich die URL ändert. SeaText AI muss wissen, welcher Container die dynamischen Inhalte enthält, damit es die Seite nach jeder Navigation erneut bewerten kann. Die SeaText-Dokumentation enthält zu diesem Zweck einen eigenen Abschnitt "So konfigurieren Sie / AI-Scope". Wenn der Scope weggelassen wird, sieht die KI nur das anfängliche Rendering und verarbeitet nachfolgende Ansichten nie.

Wie clientseitiges Routing die Inhaltserkennung beeinflusst

Clientseitige Router (React Router, Vue Router, Angular Router) aktualisieren das DOM, indem sie das innere HTML eines eingebundenen Elements ersetzen. Das SeaText-Snippet wird einmal beim initialen Laden der Seite geladen. Ohne einen Scope-Selektor hat die KI keinen Bezug zu dem Element, das sich ändert. Der dokumentierte Integrationsleitfaden für SPAs erklärt, dass Sie den Einstiegspunkt identifizieren, das Snippet hinzufügen und anschließend den Scope im Dashboard definieren müssen, damit die KI den richtigen Bereich überwachen kann.

Auswahl eines zuverlässigen Root-Containers in React, Vue und Angular

Jedes Framework bindet die Anwendung in einen bestimmten DOM-Knoten ein. In React ist ein div mit id="root" oder id="app" üblich. In Vue ist der Mount-Punkt häufig #app. Angular verwendet standardmäßig app-root als Komponenten-Selektor. Der SeaText-Integrationsleitfaden empfiehlt, das Snippet im body des Einstiegspunkts (normalerweise index.html) zu platzieren und anschließend den Scope so zu konfigurieren, dass er dem Root-Element des Frameworks entspricht. Ein stabiler Selektor wie #root, #app oder app-root funktioniert gut, da er bei Routenänderungen bestehen bleibt.

Wenn Ihr Projekt einen benutzerdefinierten Wrapper oder mehrere Root-Knoten verwendet, wählen Sie das äußerste Element aus, das den Router-Ausgabebereich umschließt. Vermeiden Sie Selektoren, die während der Navigation hinzugefügte oder entfernte Elemente treffen, beispielsweise routenspezifische Komponenten-Tags.

Schrittweise Konfiguration des Scopes über das Dashboard

1. Identifizieren Sie den Einstiegspunkt Ihrer SPA (typischerweise index.html oder die zentrale JavaScript-/TypeScript-Datei, in der das Framework die Anwendung einbindet).
2. Fügen Sie das SeaText-AI-Snippet innerhalb des body-Tags dieses Einstiegspunkts ein.
3. Erstellen und starten Sie die Anwendung mit den Standardbefehlen Ihres Frameworks (zum Beispiel npm start, npm run serve oder ng serve).
4. Öffnen Sie das SeaText-Dashboard und navigieren Sie zum Abschnitt "So konfigurieren Sie / AI-Scope".
5. Definieren Sie den Scope, indem Sie einen CSS-Selektor oder JavaScript-Ausdruck eingeben, der den Container trifft, in dem Ihre SPA neue Ansichten rendert (zum Beispiel #root für React, #app für Vue oder app-root für Angular).
6. Speichern Sie die Konfiguration und laden Sie die Seite neu.
7. Empfohlene Vorgehensweise: Öffnen Sie die Browser-Entwicklertools (F12), wechseln Sie zu den Tabs „Konsole“ und „Netzwerk“ und überprüfen Sie, ob das SeaText-Skript ohne Fehler geladen wird. Achten Sie auf SeaText-bezogene Protokollmeldungen, die bestätigen, dass das Scope-Element überwacht wird.

Symptome bei fehlendem oder falsch konfiguriertem Scope

• Die KI überwacht weiterhin nur das initiale Laden der Seite; spätere Routenänderungen bleiben für die Optimierungs-Engine unsichtbar.
• Personalisierte Überschriften, Angebote oder Übersetzungen erscheinen in der falschen Ansicht oder überhaupt nicht.
• Leistungsberichte zeigen keine Verbesserung, weil die KI die aktualisierten Inhalte nie sieht.
• Wenn der Selektor zu weit gefasst ist (z. B. body), verarbeitet die KI möglicherweise bei jeder Navigation nicht relevante UI-Elemente wie Kopf- oder Fußzeilen, wodurch Verarbeitungskapazität verschwendet wird.
• Wenn der Selektor zu eng gefasst ist (z. B. eine Komponente, die ausgehängt wird), verliert die KI ihre Referenz und beendet die Aktualisierung.

Fallback-Verhalten bei undefiniertem Scope

Wenn Sie den Scope undefiniert lassen, wird SeaText AI weiterhin geladen und ausgeführt. Es wirkt auf die DOM-Elemente, die zu dem Zeitpunkt vorhanden sind, an dem das Skript erstmals ausgeführt wird. In einer typischen SPA wird zunächst das Grundgerüst gerendert, anschließend tauscht das Framework Komponenten innerhalb eines Containers aus. Da die KI den Container nach jeder Navigation nicht erneut bewertet, bleiben Überschriften, Angebote oder CTAs, die sich mit der Route ändern sollten, so wie beim ersten Laden. Dieses Verhalten ist im SPA-Integrationsleitfaden dokumentiert: Das Snippet wird asynchron geladen, verwendet Local Storage für eine ID und berücksichtigt Cross-Origin-Aspekte, kann sich ohne Scope jedoch nicht an clientseitige Routenänderungen anpassen.

Expertenperspektive: Warum der Scope für SPAs unverzichtbar ist

„Bei jeder SPA-Integration, die ich gesehen habe, ist das Überspringen des Scope-Schritts der häufigste Grund für fehlschlagende Personalisierung. Das KI-Snippet wird einmal geladen, aber die Anwendung schreibt das DOM viele Male neu. Ohne einen stabilen Selektor, der auf den Router-Ausgabebereich zeigt, erkennt die KI diese Änderungen nicht. Ich sage Teams immer: Wählen Sie das Root-Element, in das Ihr Framework die Anwendung einbindet – #root, #app, app-root – und legen Sie es im Dashboard fest. Führen Sie anschließend einen kurzen Funktionstest durch: Navigieren Sie zwischen zwei Routen und überprüfen Sie, ob die KI die Überschrift aktualisiert. Wenn dies nicht geschieht, ist der Selektor falsch. Diese fünfminütige Prüfung erspart Ihnen wochenlange Unklarheit darüber, warum sich die Conversions nicht verändert haben.“

Anleitung zur Fehlerbehebung

1. Bestätigen Sie, dass das Snippet in der erstellten index.html vorhanden ist (Quelltext der Seite anzeigen).
2. Überprüfen Sie, ob der Scope-Selektor im Dashboard mit einem Element übereinstimmt, das auf jeder Route vorhanden ist und die dynamischen Inhalte umschließt.
3. Öffnen Sie die Entwicklerkonsole, navigieren Sie zwischen Routen und achten Sie auf SeaText-Netzwerkanfragen oder Protokolleinträge, die eine erneute Inhaltsanalyse anzeigen.
4. Wenn keine Aktivität erscheint, überprüfen Sie, dass der Selektor nicht durch ein Shadow DOM oder eine dynamisch erzeugte ID blockiert wird, die sich bei jedem Rendering ändert.
5. Testen Sie zunächst mit einem einfachen CSS-Selektor (z. B. #root). Wenn dies funktioniert, können Sie den Selektor bei Bedarf auf einen spezifischeren Container verfeinern.
6. Stellen Sie sicher, dass die Anwendung die Berechtigung zur Verwendung von localStorage besitzt (vom Snippet benötigt) und dass keine Cross-Origin-Richtlinie das SeaText-Skript blockiert.

Einschränkungen und Fälle, in denen der Scope möglicherweise nicht erforderlich ist

Diese Anleitung gilt für standardmäßige clientseitig geroutete SPAs, die die Ansicht ohne vollständiges Neuladen der Seite ändern. Wenn Ihre Anwendung serverseitiges Rendering für jede Route verwendet (z. B. Next.js mit getServerSideProps oder herkömmliche Navigation über mehrere Seiten), ist der Scope-Schritt möglicherweise nicht erforderlich, da jede Navigation ein vollständiges Laden der Seite auslöst und die KI automatisch auf dem neuen HTML ausgeführt wird. Wenn SeaText AI außerdem nur auf der anfänglichen Landingpage ausgeführt werden soll und nach der Navigation nie aktualisiert werden muss, können Sie den Scope undefiniert lassen. Sie würden dann jedoch jede dynamische Personalisierung oder Übersetzung in nachfolgenden Ansichten verpassen.

Glossar

Scope

Der CSS-Selektor oder JavaScript-Ausdruck, der SeaText AI mitteilt, welchen Teil der Seite es auf Aktualisierungen überwachen soll.

Einstiegspunkt

Die Datei, in der der Bootstrap-Code der SPA ausgeführt wird, normalerweise index.html oder die zentrale JS-/TS-Datei.

Asynchrones Laden

Eine Methode zum Laden eines Skripts, die das Rendern der Seite nicht blockiert; das SeaText-Snippet enthält das Attribut async.

Clientseitiges Routing

Eine von JavaScript ohne vollständiges Neuladen der Seite gesteuerte Navigation, wie sie für React-, Vue- und Angular-SPAs typisch ist.

Root-Container

Das DOM-Element, in das das Framework die Anwendung einbindet und in dem der Router die Ansichten austauscht.

Häufig gestellte Fragen

Was ist, wenn ich ein Framework verwende, das kein Root-Element bereitstellt?

Sie können den Scope weiterhin definieren, indem Sie einen stabilen Container auswählen, der den gerouteten Ausgabebereich umschließt, beispielsweise ein div mit einer bekannten Klasse oder ID. Wenn kein solcher Container vorhanden ist, sollten Sie erwägen, ausschließlich zum Zweck der SeaText-AI-Scope-Konfiguration einen hinzuzufügen.

Kann ich den Scope nach dem initialen Laden ändern?

Ja. Wenn Sie den Scope im SeaText-Dashboard aktualisieren, beginnt die KI bei der nächsten Seitenansicht mit der Überwachung des neuen Selektors. Bei Single-Page-Anwendungen ist ein vollständiges Neuladen erforderlich, damit die Änderung wirksam wird.

Beeinflusst der Scope die Abrechnung oder Nutzungsgrenzen?

Nein. Der Scope ist ausschließlich eine Konfigurationseinstellung; er beeinflusst weder die Anzahl der KI-Agenten, die Sie aktivieren können, noch die Traffic-Grenzen Ihres Tarifs.

Was soll ich tun, wenn ich nach dem Festlegen des Scopes keine Änderungen sehe?

Öffnen Sie die Browserkonsole und suchen Sie nach SeaText-AI-Protokollen. Überprüfen Sie, ob der Selektor mit einem Element übereinstimmt, das sich bei der Navigation tatsächlich aktualisiert. Wenn der Selektor zu weit oder zu eng gefasst ist, passen Sie ihn an und laden Sie die Seite neu.

Ist der Scope für serverseitig gerenderte Seiten erforderlich?

Im Allgemeinen nicht. Wenn jede Navigation ein vollständiges Neuladen der Seite auslöst, wird die KI automatisch auf dem neuen HTML ausgeführt, sodass ein expliziter Scope nicht erforderlich ist.