Kolmannen osapuolen skriptien integroiminen Single Page -sovellukseen (SPA), kuten React, vaatii DOM:n huolellista käsittelyä. Et voi yksinkertaisesti liittää skriptitagia HTML-tiedostoon, jos haluat dynaamista hallintaa. Tämä opas osoittaa, miten luodaan omistettu "Injektorikomponentti" —modulaarinen, puhdas ja React-ystävällinen tapa ladata MultiLipi-moottori.

Tämä menetelmä varmistaa, ettei pääsäike tukkeudu, optimaalisen SEO-tunnisteen injektion ja asianmukaisen siivouksen irrotuksen yhteydessä.

Ennakkovaatimukset

Ennen kuin etenet, varmista, että sinulla on seuraavat tiedot MultiLipi Dashboardiltasi:

Projektin API-avain: Yksilöllinen tunnisteesi (löytyy asetuksista).

Kohdekielet: ISO-koodien lista, jotka on käytössä projektissasi (esim. 'Hei', 'es', 'fr' ).

Alue: Tuotantoalueesi (esim. yoursite.com).

Vaihe 1: Luo injektorikomponentti

Sillan rakentaminen.

Luomme erikoistuneen osan, jonka ainoa tehtävä on hallita SEO-tunnisteiden ja käännösskriptin injektiointia <head>asiakirjastasi.

Toiminta: Luo tiedosto nimeltä multilipi.tsx (tai .js) sinun src/ kansioon ja liitä koodi alle.

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: Miksi tämä toimii

useEffect-koukku: Tämä varmistaa, että koodi toimii vasta komponenttien kiinnittymisen jälkeen, estäen tukkeutumisen alkuperäisessä nesteytysvaiheessa.

SEO-automaatio (Hreflang): Koodi iteroi LANGUAGES-taulukkosi läpi ja injektoi dynaamisesti <link rel="alternate">tunnisteet. Tämä on ratkaisevan tärkeää, jotta Googlelle kerrotaan hi.example.comon sivustosi hindinkielinen versio.

Suorituskyky (Esiliitäntä): Sitä DNS-prefetch ja Esiliitäntä rivit käskevät selainta ratkaisemaan MultiLipi-palvelimen IP-osoitteen ennen kuin skriptiä edes pyydetään. Tämä lyhentää merkittävästi aikaa, joka kuluu käännöswidgetin ilmestymiseen.

Puhdistusfunktio (return () => ...): Reactissa komponentit voivat renderöidä uudelleen. Tämä logiikka seuraa jokaista lisättyä alkiota ( lisätty.push(el) ) ja poistaa ne, jos komponentti irtoaa. Tämä estää päällekkäiset skriptitunnisteet ja muistivuodot.

Vaihe 2: Alusta juurisovelluksessa

Kerroksen aktivoiminen.

Nyt kun logiikka on kapseloitu, meidän täytyy sijoittaa se sovelluspuun korkeimmalle tasolle, tyypillisesti App.tsx tai App.js.

Toiminta: Tuo ja kiinnitä komponentti.

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;

Miksi laittaa se tänne?

Maailmanlaajuus: Sijoittuminen <AddScriptToHead />App.tsx takaa, että käännösmoottori pysyy aktiivisena riippumatta siitä, mihin reittiin (sivuun) käyttäjä siirtyy.

Ei-visuaalinen: Koska komponentti palautuu null , se ei vaikuta käyttöliittymän asetteluun tai väliin. Se toimii hiljaa taustalla.

Vahvistustarkistuslista

Kuinka varmistaa onnistunut integraatio.

Kun tallennat ja käynnistät React-sovelluksesi ( NPM-aloitus tai Lankakehittäjä ), suorittaa seuraavat tarkistukset:

Visuaalinen tarkistus: Näetkö Language Switcher -widgetin leijuvan kohdassa määritelty posX ja PosY ?

DOM-tarkistus: Avaa Chrome DevTools (F12) → Elements -välilehti → laajenna <head>.

Varmista, että näet <link rel="alternate" hreflang="hi"...>tunnisteet.

Tarkista page_translations.jskirjoitus on läsnä alareunassa.

Verkon tarkistus: Avaa Verkkovälilehti ja suodata "JS":llä. Varmista page_translations.jslatautuu tilassa 200 OK .

Lisäasetukset

Annetussa koodissa näet script.dataset Omaisuudet. Voit säätää näitä arvoja mukauttaaksesi käyttäytymistä:

script.dataset.posX / posY : Säädä näitä lukuja (0–100) siirtääksesi kelluvan widgetin oletusasentoa näytöllä.

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

"Auto" : Yrittää automaattisesti kääntää selaimen kielen perusteella.

"manuaali" : Odottaa käyttäjän vuorovaikutusta ennen kääntämistä.

Kuinka integroida MultiLipi React-verkkosivustollesi