Reactのようなシングルページアプリケーション（SPA）にサードパーティスクリプトを統合するには、DOMの慎重な処理が必要です。動的な制御が必要な場合、HTMLファイルにスクリプトタグを単純に貼り付けることはできません。このガイドでは、専用の "インジェクターコンポーネント"—MultiLipiエンジンをロードするための、モジュール化され、クリーンで、Reactフレンドリーな方法。

このメソッドは、メインスレッドのブロックなし、最適なSEOタグインジェクション、およびアンマウント時の適切なクリーンアップを保証します。

前提条件

続行する前に、MultiLipiダッシュボードから以下のものが揃っていることを確認してください。

プロジェクトAPIキー: 一意の識別子（設定で見つかります）。

対象言語: プロジェクトで有効になっているISOコードのリスト（例: 'hi', 'es', 'fr').

ドメイン: 本番ドメイン（例： yoursite.com).

ステップ1：インジェクターコンポーネントの作成

ブリッジを構築しています。

SEOタグと翻訳スクリプトの挿入を管理するだけの特殊なコンポーネントを作成します。ドキュメントの

アクション: という名前のファイルを作成します multilipi.tsx （または.js）の src/ フォルダにコピーし、以下のコードを貼り付けてください。

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

コードの詳細: なぜこれが機能するのか

useEffect Hook: これにより、コンポーネントがマウントされた後にのみコードが実行され、初期のハイドレーションフェーズ中のブロックが防止されます。

SEO自動化 (Hreflang): コードは、LANGUAGES配列を反復処理し、動的に注入しますタグ。これは、Googleに次のことを伝える上で重要です hi.example.com は、サイトのヒンディー語版です。

パフォーマンス (プリコネクト): ザ・ dns-prefetch および preconnect 行は、スクリプトがリクエストされる前にブラウザにMultiLipiサーバーのIPアドレスを解決するように指示します。これにより、翻訳ウィジェットが表示されるまでの時間が大幅に短縮されます。

クリーンアップ関数（return () => ...）： Reactでは、コンポーネントは再レンダリングされることがあります。このロジックは、追加したすべての要素を追跡します（added.push(el))、コンポーネントがアンマウントされたら削除します。これにより、重複したスクリプトタグやメモリリークを防ぎます。

ステップ2：ルートアプリで初期化する

レイヤーをアクティブ化しています。

ロジックがカプセル化されたので、アプリケーションツリーの最も高いレベル、通常は App.tsx または App.js.

アクション: インポートしてコンポーネントをマウントします。

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;

なぜここに配置するのか？

グローバルスコープ: 配置 App.tsx 内のこれにより、ユーザーがどのルート（ページ）に移動しても、翻訳エンジンがアクティブな状態を維持することが保証されます。

非視覚的: コンポーネントが返されたとき nullUIレイアウトやスペーシングには影響しません。バックグラウンドでサイレントに動作します。

確認チェックリスト

統合が成功したことを確認する方法。

Reactアプリを保存して実行すると（npm start または yarn dev）これらのチェックを実行します。

視覚的な確認: 定義された位置に言語スイッチャーウィジェットが表示されていることを確認してください posX および posY?

DOMチェック: Chrome開発者ツールを開く（F12）→ Elementsタブ → 展開 .

表示されていることを確認してくださいタグ。

確認してください page_translations.js スクリプトがheadの最下部に存在します。

ネットワークチェック: ネットワークタブを開き、「JS」でフィルタリングします。確認してください page_translations.js がステータスで読み込まれています 200 OK.

追加設定オプション

提供されたコードには、次のものが表示されます。 script.dataset プロパティ。これらの値を調整して、動作をカスタマイズできます。

script.dataset.posX / posY：これらの数値（0〜100）を調整して、フローティングウィジェットの画面上のデフォルト位置を移動します。

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

"auto": ブラウザの言語に基づいて自動的に翻訳を試みます。

"manual": ユーザーの操作を待ってから翻訳します。

MultiLipiをReactウェブサイトに統合する方法