Integration von SeaText AI in eine Vue.js-Anwendung

Um SeaText AI in eine Vue.js-Anwendung zu integrieren, fügen Sie den SeaText AI JavaScript-Snippet in die Seite ein, die beim Start Ihrer App geladen wird, und bauen Sie das Projekt dann neu und stellen Sie es bereit. Öffnen Sie nach dem Build die Entwicklertools des Browsers, um zu bestätigen, dass das Skript ohne Fehler geladen wird und seine Funktionen (wie Seitenübersetzung oder Bot-Erkennung) aktiv sind.

Der Prozess folgt den allgemeinen SPA-Anweisungen in der Dokumentation von SeaText: Lokalisieren Sie den Einstiegspunkt (normalerweise index.html oder eine Haupt-JavaScript-Datei), platzieren Sie den Snippet innerhalb des Body-Tags oder des entsprechenden Initialisierungsabschnitts, führen Sie Ihren Vue-Build-Befehl aus und überprüfen Sie die Konsole und die Netzwerk-Tabs auf erfolgreiches Laden und Funktionalität.

Voraussetzungen und Vorbereitung

Stellen Sie vor Beginn sicher, dass Sie Folgendes haben:

• Ein Vue.js-Projekt, das mit Vue CLI, Vite oder einem anderen Standardtool erstellt wurde.
• Zugriff auf den öffentlichen Ordner des Projekts oder die Vorlage, die als HTML-Einstiegsdatei dient.
• Der SeaText AI-Snippet, der in Ihrem Account-Dashboard bereitgestellt wird (er sieht aus wie ein Skript-Tag mit einem async-Attribut und einer eindeutigen Kennung).
• Grundlegende Kenntnisse im Ausführen von npm-Befehlen wie npm run serve oder npm run dev.

Überprüfen Sie, ob Ihre Content Security Policy (CSP) externe Skripte von der SeaText-Domain zulässt, oder fügen Sie die erforderliche Ausnahme hinzu. Stellen Sie außerdem sicher, dass der Browser Local Storage zulässt, da der Snippet dort eine Kennung speichert.

Hinzufügen des SeaText AI-Snippets zu einem Vue.js-Projekt

1. Öffnen Sie die Datei, die als HTML-Einstiegspunkt dient. Bei einem Vue CLI-Projekt ist dies normalerweise public/index.html. Bei einem Vite-Projekt ist es index.html im Stammverzeichnis des Projekts.
2. Suchen Sie das öffnende <body>-Tag.
3. Fügen Sie den vollständigen SeaText AI-Snippet direkt nach dem öffnenden Body-Tag ein, vor allen anderen Skripten oder dem Mount-Punkt Ihrer App. Der Snippet sollte wie folgt aussehen:

<script async src='https://cdn.seatext.ai/seatext.js' data-key='IHRE_API_SCHLÜSSEL'></script>

Ersetzen Sie IHRE_API_SCHLÜSSEL durch den Schlüssel aus Ihrem SeaText-Konto. Das async-Attribut stellt sicher, dass das Skript das Rendern der Seite nicht blockiert.

Überprüfung der Integration

Nachdem die App geladen wurde, öffnen Sie die Entwicklertools (F12).

1. Gehen Sie zum Tab Netzwerk und laden Sie die Seite neu. Suchen Sie nach einer Anfrage an seatext.js oder eine ähnliche Domain; der Status sollte 200 sein und der Initiator sollte Ihre index.html sein.
2. Wechseln Sie zum Tab Konsole. Sie sollten keine Fehlermeldungen im Zusammenhang mit dem SeaText-Skript sehen. Wenn das Skript eine Nachricht protokolliert, wird sie hier angezeigt.
3. Um eine Kernfunktion zu testen, ändern Sie die Sprache des Browsers oder verwenden Sie ein Tool, das einen Besucher aus einem anderen Land simuliert. Wenn der Übersetzungsagent aktiv ist, sollten Sie sehen, wie der Seiteninhalt ohne vollständiges Neuladen durch die Zielsprache ersetzt wird.
4. Alternativ öffnen Sie den Tab Anwendung, dann Lokaler Speicher und bestätigen Sie, dass ein Schlüssel mit dem Präfix seatext_ existiert.

Wenn alle Prüfungen bestanden sind, ist der SeaText AI-Snippet erfolgreich integriert.

Wie SeaText AI in einer SPA funktioniert

Nach dem Laden wird das SeaText AI-Skript vor dem Rendern der Seite ausgeführt. Es liest die aktuelle URL, alle UTM- oder ValueTrack-Parameter und die erkannte Sprache oder Herkunft des Besuchers. Basierend auf diesen Daten kann es:

• Überschriften, Schaltflächen, Angebote und Produktbeschreibungen umschreiben, um sie an die Anzeige- oder Verweisquelle anzupassen.
• Die gesamte Seite in bis zu 125 Sprachen übersetzen und die Übersetzung im DOM speichern, damit Suchmaschinen sie indizieren können.
• Anzeichen von Bot- oder ungültigem Klickverhalten erkennen und Beweise für spätere Berichte speichern.

Diese Aktionen erfolgen clientseitig, sodass keine serverseitige Änderung erforderlich ist. Die geringe Größe des Skripts (unter 15 KB) und die synchrone Ausführung verhindern Layoutverschiebungen.

Optionen und Kompromisse

Die Dokumentation beschreibt den Snippet als universelle Methode für SPAs, einschließlich Vue.js. Es gibt zwei praktische Möglichkeiten, ihn zu verwenden:

1. Direkte Snippet-Einfügung (wie oben gezeigt). Dies erfordert keine zusätzlichen Abhängigkeiten und funktioniert mit jeder Vue-Build-Einrichtung.
2. Wickeln Sie den Snippet in ein kleines Vue-Plugin, wenn Sie ihn über das Plugin-System verwalten möchten. (hypothetisches Beispiel: Erstellen Sie eine Datei seatext-plugin.js, die das Skript-Tag beim mounted der Root-Komponente einfügt.) Dieser Ansatz fügt eine Abstraktionsebene hinzu, ändert aber nicht das zugrunde liegende Verhalten.

Beide Optionen führen zum gleichen Ergebnis; der direkte Snippet ist einfacher und vermeidet einen zusätzlichen Build-Schritt.

Häufige Fallstricke und wie man sie vermeidet

• Fehlendes async-Attribut: Wenn Sie async entfernen, kann das Skript das Rendern blockieren und den ersten Anstrich verlangsamen. Behalten Sie das Attribut bei, wie angegeben.
• Falsche Platzierung: Die Platzierung des Snippets innerhalb von <head> kann immer noch funktionieren, aber die Dokumentation empfiehlt das Body-Tag, um sicherzustellen, dass das Skript nach Beginn des DOM-Aufbaus ausgeführt wird. Befolgen Sie die Anleitung für das Body-Tag.
• CSP-Blockierung: Eine strenge Content Security Policy, die externe Skripte verbietet, verhindert das Laden des Snippets. Fügen Sie script-src 'self' https://cdn.seatext.ai; zu Ihrem CSP-Header oder Meta-Tag hinzu.
• Lokaler Speicher deaktiviert: Im Inkognito-Modus oder mit bestimmten Datenschutz-Erweiterungen kann der lokale Speicher blockiert werden, was dazu führt, dass der Snippet stillschweigend fehlschlägt. Testen Sie in einem normalen Browserfenster oder informieren Sie die Benutzer, dass sie den Speicher für Ihre Domain zulassen sollen.
• Mehrfache Snippet-Einfügungen: Das versehentliche zweimalige Hinzufügen des Snippets kann zu doppelten Anfragen und unerwartetem Verhalten führen. Stellen Sie sicher, dass nur eine Instanz im Netzwerk-Tab erscheint.

Einschränkungen und wann der Rat nicht gilt

Diese Anweisungen gehen von einer standardmäßigen clientseitigen Vue.js-Anwendung aus, die HTML an den Browser sendet. Sie decken nicht ab:

• Server-seitige Rendering (SSR)-Setups, bei denen das anfängliche HTML auf Node.js generiert wird. In solchen Fällen müssen Sie den Snippet möglicherweise zur Vorlage hinzufügen, die auf dem Client hydriert wird, oder ein Plugin verwenden, das ihn nach der Hydrierung einfügt.
• Umgebungen, die den lokalen Speicher vollständig verbieten (z. B. einige sandboxed Iframes). Der Snippet wird immer noch geladen, kann aber seine Kennung nicht speichern, was sich auf bestimmte Funktionen wie die Variantenpersistenz auswirken kann.
• Projekte, die bereits eine andere Übersetzungs- oder Personalisierungsbibliothek verwenden, die mit den DOM-Änderungen von SeaText in Konflikt steht. Testen Sie auf Konflikte in einer Staging-Umgebung.

Wenn Sie auf eine dieser Situationen stoßen, wenden Sie sich an das SeaText-Supportteam, um einen maßgeschneiderten Integrationsansatz zu erhalten.

Wichtige Fakten

Praktische Szenarien

Stellen Sie sich vor, Sie betreiben einen E-Commerce-Shop, der mit Vue.js erstellt wurde, und führen Google Ads-Kampagnen in mehreren Ländern durch. Durch das Hinzufügen des SeaText AI-Snippets:

• Ein Benutzer, der auf eine Anzeige für „Französische Sommerkleider“ klickt, sieht die Überschrift, die Produktbeschreibung und den Call-to-Action automatisch auf Französisch umgeschrieben, passend zum Versprechen der Anzeige.
• Wenn der Klick von einer bekannten Bot-IP stammt, protokolliert das Skript die Sitzung und Sie können später einen Bericht herunterladen, um ihn bei Google für eine mögliche Rückerstattung einzureichen.
• Da die Übersetzung im Browser erfolgt, müssen Sie keine separaten URLs pflegen oder Inhalte für jede Sprache duplizieren.

Ein weiteres Szenario: Ein Content-Marketing-Team veröffentlicht einen Blog auf Englisch, möchte aber Leser in Japan und Brasilien erreichen. Derselbe Snippet liefert übersetzte Versionen des Artikels, ohne dass ein mehrsprachiges CMS erforderlich ist.

Häufig gestellte Fragen

Muss ich meine Vue-App nach dem Hinzufügen des Snippets neu erstellen?

Ja. Der Snippet muss Teil des ausgelieferten HTML sein, führen Sie also Ihren Standard-Build-Befehl aus (npm run build für die Produktion oder npm run serve für die Entwicklung) und stellen Sie ihn erneut bereit.

Kann ich den Snippet mit der Composition API von Vue 3 verwenden?

Der Snippet funktioniert unabhängig von der Vue-Version; er muss nur im HTML vorhanden sein, das die App startet.

Was ist, wenn meine Website eine strenge Content Security Policy verwendet?

Fügen Sie das SeaText CDN zur script-src-Direktive Ihrer CSP hinzu oder verwenden Sie eine Nonce/Hash, wenn Ihre Richtlinie dies erfordert.

Beeinflusst SeaText AI die Seitenladegeschwindigkeitsmetriken?

Das Skript ist kleiner als 15 KB und wird synchron vor dem visuellen Rendern ausgeführt, sodass es keine messbare Layoutverschiebung oder Verzögerung verursacht.

Gibt es einen Vue-spezifischen Wrapper?

Die offizielle Dokumentation bietet kein Vue-Plugin; Sie können selbst einen dünnen Wrapper erstellen, wenn Sie den Snippet lieber über das Plugin-System von Vue verwalten möchten.