Die Integration von Drittanbieter-Skripten in eine Single Page Application (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 erstellen "Injector Component"—eine modulare, saubere und React-freundliche Möglichkeit, die MultiLipi-Engine zu laden.
Diese Methode stellt sicher, dass der Hauptthread nicht blockiert wird, eine optimale SEO-Tag-Injektion erfolgt und beim Unmounten ordnungsgemäß aufgeräumt wird.
Voraussetzungen
Stellen Sie sicher, dass Sie Folgendes von Ihrem MultiLipi Dashboard haben, bevor Sie fortfahren:
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 Produktionsdomain (z. B. yoursite.com).
Schritt 1: Erstellen Sie die Injector-Komponente
Die Brücke bauen.
Wir werden eine spezialisierte Komponente erstellen, deren einzige Aufgabe es ist, die Injektion von SEO-Tags und das Übersetzungs-Skript in die zu verwalten Ihres Dokuments.
Aktion: Erstellen Sie eine Datei namens multilipi.tsx (oder .js) in Ihrer src/ Ordner und fügen Sie den folgenden Code ein.
// 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-Analyse: Warum das funktioniert
useEffect Hook: Dies stellt sicher, dass der Code erst nach dem Mounten der Komponente ausgeführt wird, wodurch Blockierungen während der anfänglichen Hydrierungsphase verhindert werden.
SEO-Automatisierung (Hreflang): Der Code durchläuft Ihr LANGUAGES-Array und fügt dynamisch ein Tags. Dies ist entscheidend, um Google mitzuteilen, dass hi.example.com ist die Hindi-Version Ihrer Website.
Performance (Preconnect): Die 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 das Übersetzungs-Widget benötigt, 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
Die Ebene wird aktiviert.
Da die Logik nun gekapselt ist, müssen wir sie auf der höchsten Ebene Ihres Anwendungsbaums platzieren, typischerweise App.tsx or App.js.
Aktion: Importieren und montieren Sie die Komponente.
// 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
Nicht-visuell: Da die Komponente zurückgibt null, beeinträchtigt dies nicht Ihr UI-Layout oder Ihre Abstände. Es funktioniert leise im Hintergrund.
Überprüfungscheckliste
Wie man eine erfolgreiche Integration bestätigt.
Sobald Sie Ihre React-App speichern und ausführen (npm start or yarn dev), führen Sie diese Prüfungen durch:
Die visuelle Prüfung: Sehen Sie das Sprachumschalter-Widget, das an der von definierten Position schwebt posX und posY?
Die DOM-Prüfung: Öffnen Sie die Chrome-Entwicklertools (F12) → Elemente-Tab → Erweitern .
Überprüfen Sie, ob Sie die Tags.
Überprüfen Sie die page_translations.js Skript befindet sich am Ende des Head.
Der Netzwerk-Check: Öffnen Sie die Netzwerk-Registerkarte und filtern Sie nach "JS". Stellen Sie sicher, dass page_translations.js wird mit Status geladen 200 OK.
Zusätzliche Konfigurationsoptionen
Im bereitgestellten Code sehen Sie script.dataset Eigenschaften. Sie können diese Werte anpassen, um das Verhalten zu ändern:
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.