Engage SDKパッケージ(クライアントセットクッキー)を使ってNextアプリを統合する

インストールと初期化@sitecore/エンゲージ

アプリを統合する最初のステップは、@sitecore/engageパッケージをインストールして初期化することです。

パッケージのインストールと初期化は以下の通りです:

1. ターミナルでNext.jsアプリのルートフォルダを開きます。

2. 以下のコマンドを実行してEngage SDKをインストールしてください:

   npm install @sitecore/engage

3. コードエディターでNext.jsアプリのルートフォルダを開きます。

4. ルーターの種類によります:

   • Pages Routerを使う場合はpages/apiフォルダにengage.jsというファイルを作成します。
   • App Router - を使う場合は、appフォルダ内に_apiというサブフォルダを作成します。そして_apiフォルダ内にengage.jsというファイルを作成します。

5. engage.jsに以下のコードを貼り付けます:

   import { init } from "@sitecore/engage";

   let engage;

   const loadEngage = async () => { 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. */ }); };

   loadEngage(); export { engage };

   プレースホルダーの値は、Sitecore CDPインスタンスの必要な詳細に置き換えてください。

   !重要クッキー同意本番環境では、サイト訪問者が同意を得た場合のみEngage SDKを読み込み、クッキーを設定してください。サイト訪問者がクッキーを受け入れているかどうかを確認する コード例 も参照してください。

   !重要**コンテンツセキュリティポリシー(CSP)**Engage SDKスクリプトが読み込まれるようにするために、コンテンツ セキュリティポリシー(CSP)に以下の内容を追加する必要があるかもしれません:

   • Stream APIのターゲットエンドポイント。

   • https://d1mj578wat5n4o.cloudfront.net

   • ウェブパーソナライゼーションを実行していて、環境がAP地域、EU地域、または米国地域であれば:

   https://d35vb5cccm4xzp.cloudfront.net

   • ウェブパーソナライゼーションを使い、環境が JP地域であれば:

   https://d2ez8k04aaol9g.cloudfront.net

   この脚本:

   • @sitecore/engageパッケージからinit()関数をインポートします。
   • Sitecore CDPインスタンスの詳細を使ってEngage APIを非同期的に読み込み、クライアントからクッキーを設定します。
   • Engage APIのインスタンスを変数としてエクスポートします engage。

6. モジュールをインポートするには:

   • Pages Routerを使う場合は、pagesフォルダのindex.jsファイルで、ReactからuseEffectをインポートし、engage.jsからengageしてください:

     import { useEffect } from "react"; import { engage } from "./api/engage.js";

   • App Routerを使う場合は、appフォルダのpage.jsファイルで、ReactからuseEffect、_api/engageからengageしてください。また、ファイルの上部、すべてのインポートの上に"use client"指示を追加してください:

     "use client"; import { useEffect } from "react"; import { engage } from "./_api/engage";

初めてのVIEWイベントをSend

@sitecore/engageパッケージをインストールし初期化した後、データを収集してSitecore CDPに送信します。VIEWイベントはウェブページが読み込まれるたびにトリガーされるため、VIEWイベントを送信します。

VIEWイベントを送信するには:

1. VIEWイベントデータを送信するには:

   • Pages Router - をindex.jsファイルのHome関数で使用する場合は、engage.pageView()関数を呼び出します:

     export default function Home() {

     // Send VIEW event -> useEffect(() => { if (engage !== undefined) { sendPageViewEvent(); }; }, );

     const sendPageViewEvent = 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()); }; }; // <- Send VIEW event

     return (<></>) }

   • App Router - をpage.jsファイルのHome関数で使用する場合は、engage.pageView()関数を呼び出します:

     export default function Home() {

     // Send VIEW event -> useEffect(() => { if (engage !== undefined) { sendPageViewEvent(); }; }, );

     const sendPageViewEvent = 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()); }; }; // <- Send VIEW event

     return (<></>) }

   プレースホルダーの値は、Sitecore CDPインスタンスの必要な詳細に置き換えてください。

   このスクリプトはVIEWイベントオブジェクトを作成し、コンポーネントが初めてレンダリングされた直後にイベントデータをSitecore CDPに送信します。また、ブラウザのIDもコンソールにログします。次の手順でブラウザIDを使ってSitecore CDP内のVIEWイベントを見つけます。

2. 端末でnpm run devを入力してNext.jsアプリを起動します。ウェブページが読み込まれると、VIEWイベントがトリガーされ、イベントデータが送信されます。

Sitecore CDPがあなたのVIEWイベントをキャプチャしたか確認してください

VIEWイベントを送信した後、Sitecore CDPにログインしてイベントを見つけます。

Sitecore CDPがあなたのVIEWイベントをキャプチャしたことを確認するために:

1. ウェブブラウザのコンソールで、次のようなテキストを見つけてください:

   a38b230c-11eb-4cf9-8d5d-274e9f344925​

2. テキストをコピーしてください。

3. Sitecore CDPで **ゲストをクリックし、**検索ドロップダウンで ブラウザIDを選択し、コピーしたテキストを検索欄に貼り付けます。

   匿名のゲストが展示している。

   

   このゲストは、さっきあなたがアプリを読み込んでいたことです。次に、このゲストに関連付けられたVIEWイベントを見つけます。

4. ゲストをクリックしてください。ゲストプロフィールが表示されます。

5. ゲストプロフィールページでイベント ビューアーをクリックします。このゲストに関連するイベントのリストが表示されます。リストにはVIEWイベントが含まれています。これは前回の手順でトリガーされたイベントです。

今後のステップ

現在、あなたのアプリをSitecore CDPと無事に統合しました。アプリからイベントを送信し、Sitecore CDPがリアルタイムでユーザーデータをキャプチャしていることを確認しました。

次に、次のことができます:

• Send他の行動データ、例えば IDENTITYイベント や カスタムイベントなど。
• ユーザーがサイト上の商品やショッピングカートとやり取りする際に取引データをSendします。
• もし経験があれば、 Sitecore Personalizeを体験したり実験をしたりすることができます。