--- title: "Engage SDKパッケージ(サーバーセットクッキー)を使ってNext.jsアプリを統合する" slug: "integrate-engage-sdk-nextjs-server-side" abstract: "Next.jsアプリをSitecore CDPに統合する方法は、Engage SDKのnpmパッケージをインストールし、サーバーからクッキーを設定する方法です。" --- # Engage SDKパッケージ(サーバーセットクッキー)を使ってNext.jsアプリを統合する > !注もし組織に[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パッケージを使ってNext.jsアプリを統合する方法を説明します。このウォークスルーでは [サーバーセットクッキー](https://doc.sitecore.com/cdp/ja/developers/api/integrating-with-sitecore-cdp/walkthroughs-for-integrating/cookies.html#UUID-706a7156-1d05-ac08-6a34-693f93415da6_section-idm4634652145412833300856510126 "Server-set cookies")を使用します。 [srcフォルダ](https://nextjs.org/docs/app/building-your-application/configuring/src-directory)を使用していると仮定しますが、必ずしも使う必要はありません。 このウォークスルーでは、以下の方法を説明します: > !注**始める前に** > > - [Sitecore CDPインスタンスに関する必要な情報を収集してください。](https://doc.sitecore.com/cdp/ja/developers/api/integrating-with-sitecore-cdp/walkthroughs-for-integrating/collect-required-details.html "Collect required details") > > - 統合用のNext.jsアプリを用意しましょう。このウォークスルーはNext.jsバージョン12、13、14.2.5でテストされており、*Pages Router*と*App Router*の両方で行われました。 > ## サーバー側で@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: "", targetURL: "", pointOfSale: "", cookieDomain: "", cookieExpiryDays: 365, forceServerCookieMode: true }; const engageServer = initServer(engageSettings); await engageServer.handleCookie(request, response); } catch (error) { console.error(error); } return response; }; プレースホルダーの値は、[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 この脚本: - サーバー上のミドルウェア機能で 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: "", targetURL: "", pointOfSale: "", 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インスタンスの必要な詳細に置き換えてください。](https://doc.sitecore.com/cdp/ja/developers/api/integrating-with-sitecore-cdp/preparing-to-integrate/collect-required-details.html "Collect required details") 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: "", currency: "" }); }; プレースホルダーの値は [、あなたの組織固有のイベント詳細に置き換えてください。](https://doc.sitecore.com/cdp/ja/developers/api/stream-api/sitecore-engage-sdk-reference/objects/event-data-object/view-event.html "VIEW event") 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**を選択し、コピーしたテキストを検索欄に貼り付けます。 匿名のゲストが展示している。 ![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")することができます。