Engage SDKパッケージ(サーバーセットクッキー)を使ってNext.jsアプリを統合する

サーバー側で@sitecore/Engageをインストールして初期化してください

アプリを統合する最初のステップは、ウェブサーバーに @sitecore/engageパッケージをインストールし、初期化することです。このステップでは、サーバーからクッキーを設定し、クライアントに送信します。

サーバー側でパッケージをインストールし、初期化するには:

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

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

   npm install @sitecore/engage

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

4. srcフォルダ内に「middleware.js」というファイルを作成します。

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

   import { NextResponse } from 'next/server'; import { initServer } from '@sitecore/engage';

   export async function middleware(request) { const response = NextResponse.next();

   try { const engageSettings = { clientKey: "<client_key_PLACEHOLDER>", targetURL: "<stream_api_target_endpoint_PLACEHOLDER>", pointOfSale: "<point_of_sale_PLACEHOLDER>", cookieDomain: "<cookie_domain_PLACEHOLDER>", cookieExpiryDays: 365, forceServerCookieMode: true };

   const engageServer = initServer(engageSettings); await engageServer.handleCookie(request, response); } catch (error) { console.error(error); }

   return response; };

   プレースホルダーの値は、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

   この脚本:

   • サーバー上のミドルウェア機能で initServer() 関数を使ってEngage SDKを初期化します。
   • engageSettingsオブジェクトのSitecore CDPインスタンスやクッキー設定の詳細を集め、そのオブジェクトをEngageServer.handleEngageCookie()関数に渡します。
   • サーバーからクッキーを設定します。

クライアント側で @sitecore/engageを初期化してください

ウェブサーバーで @sitecore/engageパッケージをインストールし初期化した後、クライアント側でパッケージを初期化します。このステップでは、サーバーからクッキーを受け取り、それをウェブブラウザに保存します。

クライアント側でパッケージを初期化するには:

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

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

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

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

     "use client"; import { useEffect } from "react"; import { init } from "@sitecore/engage";

2. Home()関数の上に、engageSettingsというオブジェクトを作成します。

   const engageSettings = { clientKey: "<client_key_PLACEHOLDER>", targetURL: "<stream_api_target_endpoint_PLACEHOLDER>", pointOfSale: "<point_of_sale_PLACEHOLDER>", forceServerCookieMode: true, includeUTMParameters: true, webPersonalization: true /* boolean or object. See Settings object for all options. Set to `false` if you don't have Personalize. */ };

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

3. Home()関数で空の非同期関数loadEngage()を作成し、Effect HookでloadEngage()を呼び出します。Effect Hookを使うべきです。なぜなら、Engage APIを読み込む前にwindowオブジェクトが存在する必要があるからです。次の手順では、loadEngage()内のコードを更新してEngage APIを読み込み、VIEWイベントの送信を開始します。

   export default function Home() { const loadEngage = async () => { // Load Engage API // Send VIEW events };

   useEffect(() => { loadEngage(); }, );

   return (<></>) };

初めてのVIEWイベントをSend

次に、loadEngage() 関数内のコードを更新して、データの収集と送Sitecore CDPを始めます。VIEWイベントはウェブページが読み込まれるたびにトリガーされるため、VIEWイベントを送信します。

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

1. loadEngage()関数では、Engage APIをengageSettingsinit()関数に渡してEngageを読み込みます。init()関数は非同期なので、返される値を待つ必要があります。

   const loadEngage = async () => { // Load Engage API const engage = await init(engageSettings);

   // Send VIEW events };

   本番環境では、init() 関数を一度呼び出し、その後React ContextやReduxなどの州管理ソリューションを使ってアプリ全体で共有します。

2. loadEngage()関数で、Eng APIを読み込んだ後、engage.pageView()関数を呼び出してVIEWイベントデータを送ります:

   const loadEngage = async () => { // Load Engage API const engage = await init(engageSettings);

   // Send VIEW events engage.pageView({ channel: "<channel_PLACEHOLDER>", currency: "<currency_PLACEHOLDER>" }); };

   プレースホルダーの値は 、あなたの組織固有のイベント詳細に置き換えてください。

3. loadEngage()関数のengage.pageView()関数の下に、テストおよびデバッグ目的のみで、ブラウザIDをコンソールにログします:

   const loadEngage = async () => { // Load Engage API // ...

   // Send VIEW events // ...

   // For testing and debugging purposes only console.log("Copy-paste the following line into Sitecore CDP > Guests > Search field:"); console.log(engage.getBrowserId()); };

   次の手順でブラウザIDを使ってSitecore CDP内のVIEWイベントを見つけます。

4. 端末で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を体験したり実験をしたりすることができます。