Engage SDKパッケージを使ってReactアプリを統合する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
!注もし組織にJSS Next.jsやJSS AngularアプリケーションがSitecoreAIに接続されている場合は、Sitecore Cloud SDKを使ってSitecoreAIサイトにSitecore CDP関連機能を実装してください。また、Cloud SDKとEngage SDKの比較も参照してください。
このトピックでは、Engage SDKパッケージを使ってReactアプリを統合する方法を説明します。
このウォークスルーでは、以下の方法を説明します:
!注始める前に
Reactアプリを用意して統合しましょう。
インストールと初期化@sitecore/エンゲージ
アプリを統合する最初のステップは、@sitecore/engageパッケージをインストールして初期化することです。
パッケージのインストールと初期化は以下の通りです:
-
ターミナルでReactアプリのルートフォルダを開きます。
-
以下のコマンドを実行してEngage SDKをインストールしてください:
npm install @sitecore/engage
-
コードエディターでReactアプリのルートフォルダを開きます。
-
srcフォルダ内に「engage.js」というファイルを作成します。
-
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: "<client_key_PLACEHOLDER>", targetURL: "<stream_api_target_endpoint_PLACEHOLDER>", pointOfSale: "<point_of_sale_PLACEHOLDER>", cookieDomain: "<cookie_domain_PLACEHOLDER>", 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 <EngageContext.Provider value={engage}>{children}</EngageContext.Provider>; }
function useEngage() { const engage = useContext(EngageContext); return engage; }
export { EngageProvider, useEngage };
プレースホルダーの値は、Sitecore CDPインスタンスの必要な詳細に置き換えてください。
!重要クッキー同意本番環境では、サイト訪問者が同意を得た場合のみEngage SDKを読み込み、クッキーを設定してください。サイト訪問者がクッキーを受け入れているかどうかを確認する コード例 も参照してください。
!重要**コンテンツセキュリティポリシー(CSP)**Engage SDKスクリプトが読み込まれるようにするために、コンテンツ セキュリティポリシー(CSP)に以下の内容を追加する必要があるかもしれません:
-
Stream APIのターゲットエンドポイント。
-
ウェブパーソナライゼーションを実行していて、環境がAP地域、EU地域、または米国地域であれば:
https://d35vb5cccm4xzp.cloudfront.net
- ウェブパーソナライゼーションを使い、環境が JP地域であれば:
この脚本:
- Engage用のコンテキストである EngageContext とプロバイダーコンポーネント EngageProviderを作成します。
- EngageProviderでは、Sitecore CDPインスタンスの詳細を使って非同期的にEngage APIを読み込み、クライアントからクッキーを設定します。
- EngageのインスタンスをエクスポートAPI EngageProvider。
- useEngageフックをエクスポートすると、アプリ内でEngage機能を簡単に呼び出せます。
-
-
index.jsでは、アプリをEngageProviderに包み込みます。EngageProviderアプリをレンダリングし、Engageのすべての機能がアプリ全体で利用可能になります。
import { EngageProvider } from "./engage";
const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode>
-
端末でnpm startを入力してReactアプリを起動します。ウェブブラウザのコンソールでEngage;を入力します。オブジェクトが戻ってきたら、Engageの初期化が成功したことになります。
初めてのVIEWイベントをSend
@sitecore/engageパッケージをインストールし初期化した後、データを収集してSitecore CDPに送信します。VIEWイベントはウェブページが読み込まれるたびにトリガーされるため、VIEWイベントを送信します。
VIEWイベントを送信するには:
-
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: "<channel_PLACEHOLDER>", currency: "<currency_PLACEHOLDER>" });
// 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インスタンスの必要な詳細に置き換えてください。
このスクリプトはVIEWイベントオブジェクトを作成し、コンポーネントが初めてレンダリングされた直後にイベントデータをSitecore CDPに送信します。また、ブラウザのIDもコンソールにログします。次の手順でブラウザIDを使ってSitecore CDP内のVIEWイベントを見つけます。
-
ウェブブラウザでアプリを再読み込みます。ウェブページが読み込まれると、VIEWイベントがトリガーされ、イベントデータが送信されます。
Sitecore CDPがあなたのVIEWイベントをキャプチャしたか確認してください
VIEWイベントを送信した後、Sitecore CDPにログインしてイベントを見つけます。
Sitecore CDPがあなたのVIEWイベントをキャプチャしたことを確認するために:
-
ウェブブラウザのコンソールで、次のようなテキストを見つけてください:
a38b230c-11eb-4cf9-8d5d-274e9f344925
-
テキストをコピーしてください。
-
Sitecore CDPで **ゲストをクリックし、**検索ドロップダウンで ブラウザIDを選択し、コピーしたテキストを検索欄に貼り付けます。
匿名のゲストが展示している。
このゲストは、さっきあなたがアプリを読み込んでいたことです。次に、このゲストに関連付けられたVIEWイベントを見つけます。
-
ゲストをクリックしてください。ゲストプロフィールが表示されます。
-
ゲストプロフィールページでイベント ビューアーをクリックします。このゲストに関連するイベントのリストが表示されます。リストにはVIEWイベントが含まれています。これは前回の手順でトリガーされたイベントです。
今後のステップ
現在、あなたのアプリをSitecore CDPと無事に統合しました。アプリからイベントを送信し、Sitecore CDPがリアルタイムでユーザーデータをキャプチャしていることを確認しました。
次に、次のことができます:
- Send他の行動データ、例えば IDENTITYイベント や カスタムイベントなど。
- ユーザーがサイト上の商品やショッピングカートとやり取りする際に取引データをSendします。
- もし経験があれば、 Sitecore Personalizeを体験したり実験をしたりすることができます。