Kolmannen osapuolen skriptien integrointi Single Page Applicationiin (SPA), kuten Reactiin, vaatii DOM:n huolellista käsittelyä. Et voi yksinkertaisesti liittää skriptitagia HTML-tiedostoon, jos haluat dynaamista hallintaa. Tämä opas näyttää, kuinka luodaan erillinen "Injector Component"—modulaarinen, puhdas ja React-ystävällinen tapa ladata MultiLipi-moottori.

Tämä menetelmä varmistaa, ettei pääsäie esty, SEO-tagien optimaalisen injektoinnin ja asianmukaisen puhdistuksen irrotettaessa.

Edellytykset

Varmista ennen jatkamista, että sinulla on seuraavat tiedot MultiLipi-hallintapaneelistasi:

Projektin API-avain: Ainutlaatuinen tunnuksesi (Löytyy asetuksista).

Kohdekiellet: Projektillesi käytössä olevien ISO-koodien luettelo (esim. 'hi', 'es', 'fr').

Verkkotunnus: Tuotantoverkkotunnuksesi (esim. yoursite.com).

Vaihe 1: Luo Injector Component

Rakennetaan silta.

Luomme erikoistuneen komponentin, jonka ainoa tehtävä on hallita SEO-tagien ja käännösskriptin injektointia dokumenttiisi.

Toiminto: Luo tiedosto nimeltä multilipi.tsx (tai .js) kansioosi src/ ja liitä alla oleva koodi.

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

Koodin syväanalyysi: Miksi tämä toimii

useEffect Hook: Tämä varmistaa, että koodi suoritetaan vasta komponentin latautumisen jälkeen, estäen estymisen alkuvaiheen hydraatiovaiheen aikana.

SEO-automaatio (Hreflang): Koodi käy läpi LANGUAGES-taulukkosi ja lisää dynaamisesti tageja. Tämä on ratkaisevan tärkeää Googlen kertomiseksi, että hi.example.com on sivustosi hindinkielinen versio.

Suorituskyky (Preconnect): The dns-prefetch ja preconnect rivit kertovat selaimelle, että MultiLipi-palvelimen IP-osoite ratkaistaan ennen kuin skriptiä edes pyydetään. Tämä vähentää merkittävästi käännöslaajennuksen ilmestymiseen kuluvaa aikaa.

Siivoustoiminto (return () => ...): Reactissa komponentit voivat renderöityä uudelleen. Tämä logiikka seuraa jokaista lisäämäämme elementtiä (added.push(el)) ja poistaa ne, jos komponentti poistetaan käytöstä. Tämä estää päällekkäisiä skriptitageja ja muistivuotoja.

Vaihe 2: Alusta juurisovelluksessa

Kerroksen aktivointi.

Nyt kun logiikka on kapseloitu, meidän on sijoitettava se sovelluspuun ylimmälle tasolle, tyypillisesti App.tsx or App.js.

Toiminto: Tuo ja liitä 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 sijoittaa se tänne?

Globaali laajuus: Sijoittaminen App.tsx-tiedostoon takaa, että käännöskone pysyy aktiivisena riippumatta siitä, mihin reittiin (sivulle) käyttäjä navigoi.

Ei-visuaalinen: Koska komponentti palauttaa null, se ei vaikuta käyttöliittymäsi asetteluun tai välilyönteihin. Se toimii hiljaa taustalla.

Tarkistuslista

Kuinka vahvistaa onnistunut integrointi.

Kun olet tallentanut ja käynnistänyt React-sovelluksesi ("npm start or yarn dev"), suorita nämä tarkistukset:

Visuaalinen tarkistus: Näetkö kielenvaihtajapalkin kelluvan siinä asennossa, jonka posX ja posY?

Määrittää? DOM-tarkistus: Avaa Chrome DevTools (F12) → Elements Tab → Laajenna .

Varmista, että näet tagit.

Varmista, että page_translations.js skripti on läsnä head-osion alareunassa.

Verkkotarkistus: Avaa Network Tab ja suodata "JS":n mukaan. Varmista, että page_translations.js ladataan tilalla 200 OK.

Lisäasetusvaihtoehdot

Annetussa koodissa näet script.dataset ominaisuudet. Voit muokata näitä arvoja mukauttaaksesi toimintaa:

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

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

"auto": Yrittää automaattisesti kääntää selaimeen perustuvan kielen mukaan.

"manual": Odottaa käyttäjän toimia ennen kääntämistä.

Kuinka integroida MultiLipi React-verkkosivustoosi