Integrare script di terze parti in un'applicazione a pagina singola (SPA) come React richiede un'attenta gestione del DOM. Non è possibile incollare semplicemente un tag script in un file HTML se si desidera un controllo dinamico. Questa guida dimostra come creare un "Componente Injector"un modo modulare, pulito e compatibile con React per caricare il motore MultiLipi.

Questo metodo garantisce il non blocco del thread principale, l'iniezione ottimale dei tag SEO e una corretta pulizia al momento dello smontaggio.

Prerequisiti

Prima di procedere, assicurati di avere quanto segue dalla tua dashboard MultiLipi:

Chiave API del progetto: Il tuo identificatore univoco (trovato nelle impostazioni).

Lingue target: L'elenco dei codici ISO abilitati per il tuo progetto (ad esempio, 'it', 'es', 'fr').

Dominio: Il tuo dominio di produzione (ad esempio, yoursite.com).

Passaggio 1: Crea il componente Injector

Costruzione del ponte.

Creeremo un componente specializzato il cui unico compito sarà quello di gestire l'iniezione dei tag SEO e dello script di traduzione nel del tuo documento.

Azione: Crea un file denominato multilipi.tsx (o .js) nel tuo src/ cartella e incolla il codice sottostante.

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;
}

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 inietta dinamicamente tag. Questo è fondamentale per indicare a Google che hi.example.com è la versione hindi del tuo sito.

Prestazioni (Preconnect): Le dns-prefetch e Preconnessione le righe indicano al browser di risolvere l'indirizzo IP del server MultiLipi prima ancora che lo script venga richiesto. Ciò riduce significativamente il tempo necessario per la visualizzazione del widget di traduzione.

Funzione di pulizia (return () => ...): In React, i componenti possono essere renderizzati nuovamente. Questa logica tiene traccia di ogni elemento che abbiamo aggiunto (added.push(el)) e li rimuove quando il componente viene smontato. Questo evita 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 del tuo albero applicativo, tipicamente App.tsx o App.js.

Azione: Importa e monta il componente.

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;

Perché posizionarlo qui?

Ambito globale: Posizionare in App.tsx garantisce che il motore di traduzione rimanga attivo indipendentemente dal percorso (pagina) in cui l'utente naviga.

Non visivo: Poiché il componente restituisce null, non influisce sul layout o sullo spaziatura dell'interfaccia utente. Funziona silenziosamente in background.

Checklist di verifica

Come confermare l'integrazione riuscita.

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 DOM: Apri Chrome DevTools (F12) → Scheda Elementi → Espandi .

Verifica di vedere il Tag.

Verifica il page_translations.js lo script è presente in fondo all'head.

Il controllo di rete: Apri la scheda "Network" e filtra per "JS". Assicurati che page_translations.js è in fase di caricamento con 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 / posYRegola questi numeri (0-100) per spostare la posizione predefinita del widget mobile sullo schermo.

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

"automatico": Tenta automaticamente di tradurre in base alla lingua del browser.

"manuale": Attende l'interazione dell'utente prima di tradurre.

Come integrare MultiLipi nel tuo sito React