Engage SDKパッケージを使用してNext.jsアプリを統合する(サーバー設定Cookie)

npm install @sitecore/engage

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

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

  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);

  return response;
};

const engageSettings = {
  clientKey: "<client_key_PLACEHOLDER>",
  targetURL: "<stream_api_target_endpoint_PLACEHOLDER>",
  pointOfSale: "<point_of_sale_PLACEHOLDER>",
  forceServerCookieMode: true,
  includeUTMParameters: true,
  webPersonalization: false /* boolean or object. See Settings object for all options. Default: false */
};

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

  return (<></>)
};

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

  // Send VIEW events
};

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

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

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());
};