L'intégration de scripts tiers dans une application monopage (SPA) comme React nécessite une gestion minutieuse du DOM. Vous ne pouvez pas simplement coller une balise de script dans un fichier HTML si vous souhaitez un contrôle dynamique. Ce guide montre comment créer un composant "Injecteur"dédié — une manière modulaire, propre et adaptée à React de charger le moteur MultiLipi.

Cette méthode garantit l'absence de blocage du thread principal, l'injection optimale des balises SEO et un nettoyage approprié lors du démontage.

Prérequis

Avant de continuer, assurez-vous d'avoir les éléments suivants de votre tableau de bord MultiLipi :

Clé API du projet : Votre identifiant unique (Trouvé dans les Paramètres).

Langues cibles : La liste des codes ISO activés pour votre projet (par exemple, 'hi', 'es', 'fr').

Domaine : Votre domaine de production (par exemple, yoursite.com).

Étape 1 : Créer le composant Injecteur

Construire le pont.

Nous allons créer un composant spécialisé dont le seul rôle sera de gérer l'injection des balises SEO et du script de traduction dans le de votre document.

Action : Créez un fichier nommé multilipi.tsx (ou .js) dans votre src/ dossier et collez le code ci-dessous.

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

Plongée dans le code : Pourquoi cela fonctionne

Hook useEffect : Cela garantit que le code s'exécute uniquement après le montage du composant, évitant ainsi le blocage pendant la phase d'hydratation initiale.

Automatisation SEO (Hreflang) : Le code parcourt votre tableau LANGUAGES et injecte dynamiquement des balises balises. Ceci est essentiel pour indiquer à Google que hi.example.com est la version hindi de votre site.

Performance (Preconnect) : Le dns-prefetch et preconnect les lignes indiquent au navigateur de résoudre l'adresse IP du serveur MultiLipi avant même que le script ne soit demandé. Cela réduit considérablement le temps nécessaire à l'apparition du widget de traduction.

Fonction de nettoyage (return () => ...) : Dans React, les composants peuvent être rendus à nouveau. Cette logique suit chaque élément que nous avons ajouté (added.push(el)) et les supprime si le composant est démonté. Cela évite les doublons de balises de script et les fuites de mémoire.

Étape 2 : Initialisation dans l'application racine

Activation de la couche.

Maintenant que la logique est encapsulée, nous devons la placer au plus haut niveau de l'arborescence de votre application, généralement App.tsx ou App.js.

Action : Importer et monter le composant.

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;

Pourquoi le placer ici ?

Portée Globale : Placer dans App.tsx garantit que le moteur de traduction reste actif quelle que soit la route (page) vers laquelle l'utilisateur navigue.

Non Visuel : Étant donné que le composant renvoie null, il n'affecte pas votre disposition d'interface utilisateur ou votre espacement. Il fonctionne silencieusement en arrière-plan.

Liste de vérification

Comment confirmer une intégration réussie.

Une fois que vous avez enregistré et exécuté votre application React (npm start ou yarn dev), effectuez ces vérifications :

La Vérification Visuelle : Voyez-vous le widget de changement de langue flotter dans la position définie par posX et posY?

La Vérification du DOM : Ouvrez Chrome DevTools (F12) → Onglet Éléments → Développez .

Vérifiez que vous voyez les balises.

Vérifiez que le page_translations.js script est présent en bas de la tête.

La Vérification Réseau : Ouvrez l'onglet Réseau et filtrez par "JS". Assurez-vous que page_translations.js se charge avec le statut 200 OK.

Options de configuration supplémentaires

Dans le code fourni, vous verrez script.dataset propriétés. Vous pouvez ajuster ces valeurs pour personnaliser le comportement :

script.dataset.posX / posY: Ajustez ces nombres (0-100) pour déplacer la position par défaut du widget flottant sur l'écran.

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

"auto": Tente automatiquement de traduire en fonction de la langue du navigateur.

"manual": Attend l'interaction de l'utilisateur avant de traduire.

Comment intégrer MultiLipi à votre site web React