--- title: "Engage SDKパッケージを使ってReactアプリを統合する" slug: "integrate-engage-sdk-react" abstract: "Engage SDK npmパッケージをインストールしてSitecore CDPにReactアプリを統合する方法。" --- # Engage SDKパッケージを使ってReactアプリを統合する > !注もし組織に[JSS Next.js](https://doc.sitecore.com/xmc/en/developers/jss/22/jss-xmc/en/javascript-services-sdk--jss--for-next-js.html)やJSS AngularアプリケーションがSitecoreAIに接続されている場合は、[Sitecore Cloud SDK](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/en/sitecore-cloud-sdk-for-javascript.html)を使ってSitecoreAIサイトにSitecore CDP関連機能を実装してください。また、[Cloud SDKとEngage SDKの比較](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/en/cloud-sdk-comparison-charts.html)も参照してください。 このトピックでは、Engage SDKパッケージを使ってReactアプリを統合する方法を説明します。 このウォークスルーでは、以下の方法を説明します: > !注**始める前に** > > - [Sitecore CDPインスタンスに関する必要な情報を収集してください。](https://doc.sitecore.com/cdp/ja/developers/api/integrating-with-sitecore-cdp/walkthroughs-for-integrating/collect-required-details.html "Collect required details") > > - Reactアプリを用意して統合しましょう。 > ## インストールと初期化@sitecore/エンゲージ アプリを統合する最初のステップは、@sitecore/engageパッケージをインストールして初期化することです。 パッケージのインストールと初期化は以下の通りです: 1. ターミナルでReactアプリのルートフォルダを開きます。 2. 以下のコマンドを実行してEngage SDKをインストールしてください: npm install @sitecore/engage 3. コードエディターでReactアプリのルートフォルダを開きます。 4. srcフォルダ内に「engage.js」というファイルを作成します。 5. engage.jsに以下のコードを貼り付けます: import { createContext, useContext, useState, useEffect, useCallback } from "react"; import { init } from "@sitecore/engage"; const EngageContext = createContext(); function EngageProvider({ children }) { const engage, setEngage = useState({}); const loadEngage = useCallback(async () => { const engage = await init({ clientKey: "", targetURL: "", pointOfSale: "", cookieDomain: "", cookieExpiryDays: 365, forceServerCookieMode: false, includeUTMParameters: true, webPersonalization: true /\* boolean or object. See Settings object for all options. Set to \`false\` if you don't have Personalize. \*/ }); setEngage(engage); }, ); useEffect(() => { loadEngage(); }, loadEngage); return {children}; } function useEngage() { const engage = useContext(EngageContext); return engage; } export { EngageProvider, useEngage }; プレースホルダーの値は、[Sitecore CDPインスタンスの必要な詳細に置き換えてください。](https://doc.sitecore.com/cdp/ja/developers/api/integrating-with-sitecore-cdp/preparing-to-integrate/collect-required-details.html "Collect required details") > !重要**クッキー同意**本番環境では、サイト訪問者が同意を得た場合のみEngage SDKを読み込み、クッキーを設定してください。サイト訪問者がクッキーを受け入れているかどうかを確認する [コード例](https://doc.sitecore.com/cdp/ja/developers/api/integrating-with-sitecore-cdp/walkthroughs-for-integrating/cookies.html "Cookies") も参照してください。 > !重要**コンテンツセキュリティポリシー(CSP)**Engage SDKスクリプトが読み込まれるようにするために、コンテンツ [セキュリティポリシー(CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)に以下の内容を追加する必要があるかもしれません: > > - Stream [APIのターゲットエンドポイント](https://doc.sitecore.com/cdp/ja/developers/api/integrating-with-sitecore-cdp/walkthroughs-for-integrating/collect-required-details.html#UUID-60c4c930-3cfe-e0ad-3b98-69ceff75989f_section-idm1903325950147122 "Stream API target endpoint")。 > > - https://d1mj578wat5n4o.cloudfront.net > > - ウェブパーソナライゼーションを実行していて、環境が**AP地域**、**EU地域**、**または米国地域**であれば: > > > https://d35vb5cccm4xzp.cloudfront.net > > - ウェブパーソナライゼーションを使い、環境が **JP地域**であれば: > > https://d2ez8k04aaol9g.cloudfront.net この脚本: - Engage用のコンテキストである EngageContext とプロバイダーコンポーネント EngageProviderを作成します。 - EngageProviderでは、Sitecore CDPインスタンスの詳細を使って非同期的にEngage APIを読み込み、クライアントからクッキーを設定します。 - EngageのインスタンスをエクスポートAPI EngageProvider。 - useEngageフックをエクスポートすると、アプリ内でEngage機能を簡単に呼び出せます。 6. index.jsでは、アプリをEngageProviderに包み込みます。EngageProviderアプリをレンダリングし、Engageのすべての機能がアプリ全体で利用可能になります。 import { EngageProvider } from "./engage"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); 7. 端末でnpm startを入力してReactアプリを起動します。ウェブブラウザのコンソールでEngage;を入力します。オブジェクトが戻ってきたら、Engageの初期化が成功したことになります。 ## 初めてのVIEWイベントをSend @sitecore/engageパッケージをインストールし初期化した後、データを収集してSitecore CDPに送信します。VIEWイベントはウェブページが読み込まれるたびにトリガーされるため、VIEWイベントを送信します。 VIEWイベントを送信するには: 1. App.jsでは、App関数のuseEngageフックを使って、engage.pageView()関数を呼び出してVIEWイベントデータを送ります: import { useEffect, useCallback } from "react"; import { useEngage } from "./engage"; export default function App() { const engage = useEngage(); const sendPageViewEvent = useCallback(async () => { const response = await engage.pageView({ channel: "", currency: "" }); // For testing and debugging purposes only if (response) { console.log("Copy-paste the following line into Sitecore CDP > Guests > Search field:"); console.log(engage.getBrowserId()); } }, engage); useEffect(() => { if (Object.keys(engage).length !== 0) { sendPageViewEvent(); } }, engage, sendPageViewEvent); return <>; } プレースホルダーの値は、[Sitecore CDPインスタンスの必要な詳細に置き換えてください。](https://doc.sitecore.com/cdp/ja/developers/api/integrating-with-sitecore-cdp/preparing-to-integrate/collect-required-details.html "Collect required details") このスクリプトはVIEWイベントオブジェクトを作成し、コンポーネントが初めてレンダリングされた直後にイベントデータをSitecore CDPに送信します。また、ブラウザのIDもコンソールにログします。次の手順でブラウザIDを使ってSitecore CDP内のVIEWイベントを見つけます。 2. ウェブブラウザでアプリを再読み込みます。ウェブページが読み込まれると、VIEWイベントがトリガーされ、イベントデータが送信されます。 ## Sitecore CDPがあなたのVIEWイベントをキャプチャしたか確認してください VIEWイベントを送信した後、Sitecore CDPにログインしてイベントを見つけます。 Sitecore CDPがあなたのVIEWイベントをキャプチャしたことを確認するために: 1. ウェブブラウザのコンソールで、次のようなテキストを見つけてください: a38b230c-11eb-4cf9-8d5d-274e9f344925​ 2. テキストをコピーしてください。 3. Sitecore CDPで **ゲストをクリックし、**検索ドロップダウンで **ブラウザID**を選択し、コピーしたテキストを検索欄に貼り付けます。 匿名のゲストが展示している。 ![Search field in the Guests screen.](https://doc.sitecore.com/api/markdown-image/cdp/ja/developers/api/images/cdp-guests-bid.jpg) このゲストは、さっきあなたがアプリを読み込んでいたことです。次に、このゲストに関連付けられたVIEWイベントを見つけます。 4. ゲストをクリックしてください。ゲストプロフィールが表示されます。 5. ゲストプロフィールページでイベント **ビューアー**をクリックします。このゲストに関連するイベントのリストが表示されます。リストにはVIEWイベントが含まれています。これは前回の手順でトリガーされたイベントです。 ## 今後のステップ 現在、あなたのアプリをSitecore CDPと無事に統合しました。アプリからイベントを送信し、Sitecore CDPがリアルタイムでユーザーデータをキャプチャしていることを確認しました。 次に、次のことができます: - [Send他の行動データ](https://doc.sitecore.com/cdp/ja/developers/api/integrating-with-sitecore-cdp/understanding-integration-details/sending-events-using-the-engage-sdk.html "Sending events using the Engage SDK")、例えば [IDENTITYイベント](https://doc.sitecore.com/cdp/ja/developers/api/stream-api/sitecore-engage-sdk-reference/functions/engage-identity.html "Engage.identity(eventData[, extensionData])") や [カスタムイベント](https://doc.sitecore.com/cdp/ja/developers/api/stream-api/sitecore-engage-sdk-reference/functions/engage-event.html "Engage.event(type, eventData[, extensionData])")など。 - [ユーザーがサイト上の商品やショッピングカートとやり取りする際に取引データをSendします。](https://doc.sitecore.com/cdp/ja/developers/api/integrating-with-sitecore-cdp/understanding-integration-details/sending-orders-using-the-engage-sdk.html "Sending orders using the Engage SDK") - もし経験があれば、 [Sitecore Personalizeを体験したり実験をしたり](https://doc.sitecore.com/cdp/ja/developers/api/integrating-with-sitecore-cdp/understanding-integration-details/running-personalization.html "Running personalization")することができます。