Integrar scripts de terceros en una aplicación de página única (SPA) como React requiere un manejo cuidadoso del DOM. No puedes simplemente pegar una etiqueta de script en un archivo HTML si deseas 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 API del Proyecto: Tu identificador único (Encontrado en Configuración).
Idiomas de destino: La lista de códigos ISO habilitados para tu proyecto (por ejemplo, 'hi', 'es', 'fr').
Dominio: Tu dominio de producción (por ejemplo, yoursite.com).
Paso 1: Crear 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 su documento.
Acción: Crear un archivo llamado multilipi.tsx (o .js) en tu src/ carpeta y pegue 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 crítico 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 indican 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 de tu árbol de aplicación, típicamente App.tsx o App.js.
Acción: Importa y monta 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 nullno afecta tu diseño o espaciado de UI. 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 Verificación del DOM: Abre las Herramientas de desarrollador de Chrome (F12) → Pestaña Elementos → Expande .
Verifica que ves el etiquetas.
Verificar el page_translations.js el script está presente en la parte inferior del head.
La verificación de red: Abre la pestaña Red y filtra por "JS". Asegúrate page_translations.js se está cargando con el 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.