Intégrer des scripts tiers dans une application à page unique (SPA) comme React nécessite une gestion attentive du DOM. Vous ne pouvez pas simplement coller une balise script dans un fichier HTML si vous voulez un contrôle dynamique. Ce guide montre comment créer un service dédié « Composant injecteur » — une manière modulaire, propre et compatible avec React de charger le moteur MultiLipi.

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

Prérequis

Avant de continuer, assurez-vous d’avoir ce qui suit dans 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, 'salut', '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 la seule tâche est de gérer l’injection de balises SEO et du script de traduction dans le <head> de votre document.

Action : Créez un fichier nommé multilipi.tsx (ou .js) dans ton src/ 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;
}

Code Deep Dive : pourquoi cela fonctionne

Crochet useEffect : Cela garantit que le code ne s’exécute qu’après le montage du composant, évitant ainsi le blocage lors de la phase initiale d’hydratation.

Automatisation SEO (Hreflang) : Le code est itéré à travers votre tableau LANGUAGES et injecte dynamiquement <link rel="alternate">Tags. C’est crucial pour informer Google de cela hi.example.comest la version hindi de votre site.

Performance (Préconnexion) : Le dns-prélecture et préconnexion des 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 (retour () => ...) : Dans React, les composants peuvent se re-rendre. Cette logique suit chaque élément que nous avons ajouté ( added.push(el) ) et les retire si le composant se démonte. Cela évite les balises de script en double et les fuites de mémoire.

Étape 2 : Initialiser dans l’application racine

Activation de la couche.

Maintenant que la logique est encapsulée, il faut la placer au niveau le plus élevé de votre arbre d’applications, en général App.tsx ou App.js.

Action : Importez et montez 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 mondiale : Classement <AddScriptToHead />dans App.tsx garantit que le moteur de traduction reste actif quel que soit le chemin (page) emprunté par l’utilisateur.

Non visuel : Puisque la composante revient Solution sans code , cela n’affecte pas la disposition ou l’espacement de votre interface utilisateur. Il fonctionne silencieusement en arrière-plan.

Liste de contrôle de vérification

Comment confirmer une intégration réussie.

Une fois que vous avez sauvegardé et lancé votre application React :( Démarrage du NPM ou Yarn dev ), effectuez ces vérifications :

Le test visuel : Voyez-vous le widget Language Switcher flotter dans la position définie par posX et PosY ?

Le contrôle du DOM : Ouvrir Chrome DevTools (F12) →onglet Éléments → Étendre <head> .

Vérifiez que vous voyez le <link rel="alternate" hreflang="hi"...>étiquettes.

Vérifier le page_translations.jsl’écriture est présente au bas de la tête.

Le contrôle du réseau : Ouvrez l’onglet réseau et filtrez par « JS ». Assurez-vous page_translations.jsse 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 chiffres (0 à 100) pour déplacer la position par défaut du widget flottant à l’écran.

script.setAttribute(« mode », « auto ») :

« auto » : Tente automatiquement de traduire en fonction du langage du navigateur.

« manuel » : Attend l’interaction de l’utilisateur avant de traduire.

Comment intégrer MultiLipi à votre site React