--- title: "Engage SDKパッケージ(クライアントセットクッキー)を使ってNextアプリを統合する" slug: "integrate-engage-sdk-nextjs-client-side" abstract: "Next.jsアプリをSitecore CDPに統合する方法は、Engage SDKのnpmパッケージをインストールし、クライアントからクッキーを設定する方法です。" --- # Engage SDKパッケージ(クライアントセットクッキー)を使ってNextアプリを統合する > !注もし組織に[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-idm4568099352990433300856246627 "Client-set cookies")を使用します。 このウォークスルーでは、以下の方法を説明します: > !注**始める前に** > > - [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/エンゲージ アプリを統合する最初のステップは、@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: "", 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. \*/ }); }; loadEngage(); export { engage }; プレースホルダーの値は、[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 この脚本: - @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: "", 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()); }; }; // <- 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: "", 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()); }; }; // <- Send VIEW event 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. 端末で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")することができます。