L'integrazione di script di terze parti in una Single Page Application (SPA) come React richiede una gestione attenta del DOM. Non è possibile semplicemente incollare un tag script in un file HTML se si desidera un controllo dinamico. Questa guida mostra come creare un "Componente Iniettore"dedicato, un modo modulare, pulito e compatibile con React per caricare il motore di MultiLipi.
Questo metodo garantisce l'assenza di blocchi del thread principale, un'iniezione ottimale dei tag SEO e una corretta pulizia alla rimozione del componente.
Prerequisiti
Prima di procedere, assicurati di avere quanto segue dalla tua dashboard di MultiLipi:
Chiave API del progetto: Il tuo identificativo univoco (presente nelle Impostazioni).
Lingue di destinazione: L'elenco dei codici ISO abilitati per il tuo progetto (ad es., 'hi', 'es', 'fr').
Dominio: Il tuo dominio di produzione (ad es., yoursite.com).
Passaggio 1: Crea il componente di iniezione
Costruzione del ponte.
Creeremo un componente specializzato il cui unico compito è gestire l'iniezione dei tag SEO e dello script di traduzione all'interno del del tuo documento.
Azione: Crea un file denominato multilipi.tsx (o .js) nella tua cartella src/ e incolla il codice sottostante.
// 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;
}Analisi approfondita del codice: perché funziona
Hook useEffect: Ciò garantisce che il codice venga eseguito solo dopo il montaggio del componente, evitando blocchi durante la fase di idratazione iniziale.
Automazione SEO (Hreflang): Il codice scorre l'array LANGUAGES e inquina dinamicamente tag. Questo è fondamentale per comunicare a Google che hi.example.com è la versione in hindi del tuo sito.
Prestazioni (Preconnect): Il dns-prefetch e preconnect le righe indicano al browser di risolvere l'indirizzo IP del server MultiLipi prima ancora che lo script venga richiesto. Questo riduce significativamente il tempo necessario affinché il widget di traduzione compaia.
Funzione di pulizia (return () => ...): In React, i componenti possono subire un nuovo rendering. Questa logica tiene traccia di ogni elemento che abbiamo aggiunto (added.push(el)) e li rimuove se il componente viene smontato. Questo previene tag di script duplicati e perdite di memoria.
Passaggio 2: Inizializza nell'App principale
Attivazione del livello.
Ora che la logica è incapsulata, dobbiamo posizionarla al livello più alto dell'albero dell'applicazione, tipicamente App.tsx o App.js.
Azione: Importa e monta il componente.
// 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;Perché posizionarlo qui?
Ambito Globale: Posizionare
Non Visivo: Poiché il componente restituisce null, non influisce sul layout o sulla spaziatura della tua interfaccia utente. Funziona silenziosamente in background.
Lista di Controllo per la Verifica
Come confermare il successo dell'integrazione.
Una volta salvata ed eseguita la tua app React (npm start o yarn dev), esegui questi controlli:
Il Controllo Visivo: Vedi il widget del selettore della lingua fluttuare nella posizione definita da posX e posY?
Il Controllo del DOM: Apri gli Strumenti per sviluppatori di Chrome (F12) → Scheda Elementi → Espandi .
Verifica di visualizzare i tag.
Verifica che il page_translations.js script sia presente in fondo all'head.
Il Controllo di Rete: Apri la scheda Rete e filtra per "JS". Assicurati che page_translations.js si stia caricando con lo stato 200 OK.
Opzioni di configurazione aggiuntive
Nel codice fornito vedrai script.dataset proprietà. Puoi modificare questi valori per personalizzare il comportamento:
script.dataset.posX / posY: regola questi numeri (0-100) per spostare la posizione predefinita del widget mobile sullo schermo.
script.setAttribute("mode", "auto"):
"auto": tenta automaticamente di tradurre in base alla lingua del browser.
"manual": attende l'interazione dell'utente prima di tradurre.