チュートリアル: ReactプロジェクトでのJS SDKの設定

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

JS SDKを使用してReactアプリケーションをSitecore Searchと統合する前に、ReactプロジェクトにJS SDKをインストールして設定する必要があります。このチュートリアルのさまざまな手順では、Searchパッケージのインストールと認証について説明します。

このチュートリアルでは、次の方法について説明します。

JS SDKとUI Components for Reactをインストールします。
資格情報を取得します。
資格情報で認証します。

JS SDKとUI Components for Reactのインストール

開発者は、Sitecore Search JS SDKパッケージとUI Componentsパッケージをプロジェクトにインストールできます。Reactコードでは、他のJSパッケージからインポートするのと同じように、これらのパッケージからクラス、関数、およびオブジェクトをインポートできます。

最新のJS SDKとReact UI Componentsをインストールするには、次の手順を実行します。

React用のSearch JS SDKをプロジェクトに追加するには、プロジェクトで次のコマンドを実行します。
RequestResponse
```
npm install --save @sitecore-search/react
```
ReactのSearch UI Componentsをプロジェクトに追加するには、プロジェクトで次のコマンドを実行します。
RequestResponse
```
npm install --save @sitecore-search/ui
```

ReactプロジェクトのRootコンポーネントで、次に示すようにWidgetsProviderコンポーネントをインポートします。

RequestResponse

import { WidgetsProvider } from "@sitecore-search/react";

const Root = () => {
    return (
        <WidgetsProvider>
        </WidgetsProvider>
)};

資格情報の取得

お客様のプライバシーとコンテンツを保護するため、リクエストを行う前に、アプリケーションがSearchで認証する必要があります。アカウントとドメインに関連付けられている認証情報を使用する必要があります。

Search資格情報を取得するには:

個人の資格情報でCustomer Engagement Console (CEC) にログインします。
メニューバーで、Developer Resourcesをクリックします。
右側のAPI Keysペインで、データリクエストのキーをコピーします。

資格情報による認証

お客様のプライバシーとコンテンツを保護するため、リクエストを行う前に、アプリケーションがSearchで認証する必要があります。アカウントとドメインに関連付けられている認証情報を使用する必要があります。データリクエストを行う前に認証するか、最初のデータリクエストと一緒に認証するかを選択できます。

大事な

JS SDKはCookieを設定し、イベントを追跡するときにUUIDを含めます。訪問者情報UUIDは、検索結果をパーソナライズするために必要です。

JS SDKがアプリケーションを正常に認証すると、JS SDKは今後のすべての要求に必要な認証情報を含めます。

認証情報は、ReactアプリケーションのRootまたはAppコンポーネントに含めることをお勧めします。

サブドメインの設定時に認証するには:

ReactプロジェクトのRootコンポーネントで、次のコードブロックに示すように、認証用の正しい資格情報を持つWidgetsProviderコンポーネントを追加します。

RequestResponse

import { WidgetsProvider } from "@sitecore-search/react";

const Root = () => {
    return (
        <WidgetsProvider
                env='<environment>'
                customerKey='<customer key>'
                serviceHost='<api domain>'
            >
            <MyApp />
        </WidgetsProvider>
)};

メモ

使用する認証情報は、ドメインの設定方法によって異なりますSitecore Search。サブドメインがSearchで設定されていない場合の認証手順については、「ドメインを設定せずに認証する」を参照してください。

env属性の場合、値はapse2 (アジア / オセアニアドメインの場合)、prodEu (ヨーロッパドメインの場合)、prod (米国のドメインの場合)、staging (米国のドメインの場合) のいずれかである必要があります。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、