Integrar scripts de terceros en una Aplicación de Página Única (SPA) como React requiere un manejo cuidadoso del DOM. No puede simplemente pegar una etiqueta de script en un archivo HTML si desea un control dinámico. Esta guía demuestra cómo crear un dedicado "Componente Inyector"—una forma modular, limpia y amigable con React de cargar el motor MultiLipi.
Este método asegura que no haya bloqueo del hilo principal, inyección óptima de etiquetas SEO y limpieza adecuada al desmontar.
Prerrequisitos
Antes de continuar, asegúrate de tener lo siguiente de tu Panel de MultiLipi:
Clave de API del proyecto: Tu identificador único (Se encuentra en Configuración).
Idiomas de destino: La lista de códigos ISO habilitados para tu proyecto (ej. 'hi', 'es', 'fr').
Dominio: Tu dominio de producción (ej. yoursite.com).
Paso 1: Crea el Componente Inyector
Construyendo el puente.
Crearemos un componente especializado cuyo único trabajo será gestionar la inyección de etiquetas SEO y el script de traducción en el de tu documento.
Acción: Crea un archivo llamado multilipi.tsx o .js) en tu src/ carpeta y pega el código a continuación.
// 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;
}Análisis Profundo del Código: Por qué funciona
Hook useEffect: Esto asegura que el código se ejecute solo después de que el componente se monte, evitando bloqueos durante la fase inicial de hidratación.
Automatización SEO (Hreflang): El código itera a través de tu array LANGUAGES e inyecta dinámicamente etiquetas. Esto es fundamental para decirle a Google que hi.example.com es la versión en hindi de tu sitio.
Rendimiento (Preconnect): El dns-prefetch y preconnect las líneas le dicen al navegador que resuelva la dirección IP del servidor MultiLipi antes de que se solicite el script. Esto reduce significativamente el tiempo que tarda en aparecer el widget de traducción.
Función de limpieza (return () => ...): En React, los componentes pueden volver a renderizarse. Esta lógica rastrea cada elemento que agregamos (added.push(el)) y los elimina si el componente se desmonta. Esto evita etiquetas de script duplicadas y fugas de memoria.
Paso 2: Inicializar en la aplicación raíz
Activando la capa.
Ahora que la lógica está encapsulada, necesitamos colocarla en el nivel más alto del árbol de su aplicación, típicamente App.tsx o App.js.
Acción: Importar y montar el 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;¿Por qué colocarlo aquí?
Ámbito global: Colocando
No visual: Dado que el componente devuelve null, no afecta el diseño ni el espaciado de tu interfaz de usuario. Funciona silenciosamente en segundo plano.
Lista de Verificación de Verificación
Cómo confirmar la integración exitosa.
Una vez que guardes y ejecutes tu aplicación React (npm start o yarn dev), realiza estas comprobaciones:
La Verificación Visual: ¿Ves el widget del Selector de Idioma flotando en la posición definida por posX y posY?
La comprobación del DOM: Abre las Herramientas de Desarrollador de Chrome (F12) → Pestaña Elementos → Expande .
Verifica que ves el etiquetas.
Verifica las page_translations.js el script esté presente al final del head.
La Verificación de Red: Abre la Pestaña de Red y filtra por "JS". Asegúrate de que page_translations.js está cargando con estado 200 OK.
Opciones de Configuración Adicionales
En el código proporcionado, verás script.dataset propiedades. Puedes ajustar estos valores para personalizar el comportamiento:
script.dataset.posX / posY: Ajusta estos números (0-100) para mover la posición predeterminada del widget flotante en la pantalla.
script.setAttribute("mode", "auto"):
"auto": Intenta traducir automáticamente según el idioma del navegador.
"manual": Espera la interacción del usuario antes de traducir.