Die Integration von Drittanbieter-Skripten in eine Single-Page-Anwendung (SPA) wie React erfordert sorgfältige Handhabung des DOM. Sie können nicht einfach ein Skript-Tag in eine HTML-Datei einfügen, wenn Sie dynamische Kontrolle wünschen. Diese Anleitung zeigt, wie Sie eine dedizierte "Injector Component"— eine modulare, saubere und React-freundliche Methode zum Laden der MultiLipi-Engine.

Diese Methode gewährleistet keine Blockierung des Hauptthreads, eine optimale Injektion von SEO-Tags und eine ordnungsgemäße Bereinigung beim Unmounting.

Voraussetzungen

Stellen Sie vor dem Fortfahren sicher, dass Sie Folgendes von Ihrem MultiLipi-Dashboard haben:

Projekt-API-Schlüssel: Ihre eindeutige Kennung (in Einstellungen gefunden).

Zielsprachen: Die Liste der für Ihr Projekt aktivierten ISO-Codes (z. B. 'hi', 'es', 'fr').

Domain: Ihre Produktionsdomäne (z. B. yoursite.com).

Schritt 1: Erstellen Sie die Injector-Komponente

Die Brücke bauen.

Wir erstellen eine spezialisierte Komponente, deren einzige Aufgabe es ist, die Injektion von SEO-Tags und des Übersetzungsskripts in die Ihres Dokuments.

Aktion: Erstellen Sie eine Datei namens multilipi.tsx (oder .js) in Ihrem src/ Ordner und fügen Sie den folgenden Code ein.

TypeScript

// multilipi.tsx
import { useEffect } from "react";

const LANGUAGES = ["hi", "ar"] as const; // Replace with your languages
const DOMAIN = "example.com";           // Replace with your actual domain
const MULTILIPI_KEY = "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"; // Replace with your actual key

export default function AddScriptToHead() {
  useEffect(() => {
    const head = document.head;
    const added: HTMLElement[] = [];

    const add = <T extends HTMLElement>(el: T) => {
      head.appendChild(el);
      added.push(el);
      return el;
    };

    // Alternate hreflang links
    LANGUAGES.forEach((lang) => {
      const link = document.createElement("link");
      link.rel = "alternate";
      link.hreflang = lang;
      link.href = `https://${lang}.${DOMAIN}/`;
      add(link);
    });

    // DNS prefetch & preconnect
    const dns = document.createElement("link");
    dns.rel = "dns-prefetch";
    dns.href = "//multilipiseo.multilipi.com";
    add(dns);

    const preconnect = document.createElement("link");
    preconnect.rel = "preconnect";
    preconnect.href = "https://multilipiseo.multilipi.com";
    preconnect.crossOrigin = "anonymous";
    add(preconnect);

    // Add MultiLipi translation script
    const script = document.createElement("script");
    script.src = "https://script-cdn.multilipi.com/static/JS/page_translations.js";
    script.crossOrigin = "anonymous";
    script.dataset.posX = "50";
    script.dataset.posY = "50";
    script.setAttribute("multilipi-key", MULTILIPI_KEY);
    script.setAttribute("mode", "auto");
    add(script);

    // Cleanup on component unmount
    return () => {
      added.forEach((el) => el.parentNode?.removeChild(el));
    };
  }, []);

  return null;
}

Code Deep Dive: Warum das funktioniert

useEffect Hook: Dies stellt sicher, dass der Code erst ausgeführt wird, nachdem die Komponente gemountet wurde, und verhindert Blockaden während der anfänglichen Hydratisierungsphase.

SEO-Automatisierung (Hreflang): Der Code durchläuft Ihr LANGUAGES-Array und fügt dynamisch Tags. Dies ist entscheidend, um Google mitzuteilen, dass hi.example.com ist die Hindi-Version Ihrer Website.

Leistung (Preconnect): Das dns-prefetch und preconnect Zeilen weisen den Browser an, die IP-Adresse des MultiLipi-Servers aufzulösen, bevor das Skript überhaupt angefordert wird. Dies reduziert die Zeit, die benötigt wird, bis das Übersetzungs-Widget erscheint, erheblich.

Bereinigungsfunktion (return () => ...): In React können Komponenten neu gerendert werden. Diese Logik verfolgt jedes Element, das wir hinzugefügt haben (added.push(el)) und entfernt sie, wenn die Komponente unmountet wird. Dies verhindert doppelte Skript-Tags und Speicherlecks.

Schritt 2: Im Root-App initialisieren

Aktiviere die Ebene.

Jetzt, da die Logik gekapselt ist, müssen wir sie auf der höchsten Ebene Ihres Anwendungsbaums platzieren, typischerweise App.tsx oder App.js.

Aktion: Die Komponente importieren und einbinden.

TypeScript

// App.tsx
import AddScriptToHead from './multilipi'; // adjust the path as needed

function App() {
  return (
    <>
      {/* Load the MultiLipi script */}
      <AddScriptToHead />

      {/* Rest of your App UI */}
    </>
  );
}

export default App;

Warum hier platzieren?

Globaler Geltungsbereich: Platzieren in App.tsx garantiert, dass die Übersetzungs-Engine aktiv bleibt, unabhängig davon, zu welcher Route (Seite) der Benutzer navigiert.

Nicht-visuell: Da die Komponente zurückgibt null, beeinträchtigt dies nicht Ihr UI-Layout oder Ihre Abstände. Es funktioniert geräuschlos im Hintergrund.

Checkliste zur Überprüfung

So bestätigen Sie die erfolgreiche Integration.

Sobald Sie Ihre React-App speichern und ausführen (npm start oder yarn dev), führen Sie diese Prüfungen durch:

Die visuelle Überprüfung: Sehen Sie das Sprachumschalter-Widget, das an der von Ihnen definierten Position schwebt posX und posY?

Der DOM-Check: Öffnen Sie die Chrome-Entwicklertools (F12) → Elemente-Tab → Erweitern .

Überprüfen Sie, ob Sie die Tags.

Überprüfen Sie die page_translations.js Skript am Ende des Head-Bereichs vorhanden ist.

Die Netzwerkprüfung: Öffnen Sie den Netzwerk-Tab und filtern Sie nach "JS". Stellen Sie sicher, dass page_translations.js wird geladen mit Status 200 OK.

Zusätzliche Konfigurationsoptionen

Im bereitgestellten Code sehen Sie script.dataset Eigenschaften. Sie können diese Werte anpassen, um das Verhalten anzupassen:

script.dataset.posX / posY: Passen Sie diese Zahlen (0-100) an, um die Standardposition des schwebenden Widgets auf dem Bildschirm zu ändern.

script.setAttribute("mode", "auto"):

"auto": Versucht automatisch, basierend auf der Browsersprache zu übersetzen.

"manuell": Wartet auf Benutzerinteraktion, bevor übersetzt wird.

So integrieren Sie MultiLipi in Ihre React-Website