Engage SDKパッケージを使用してReactアプリを統合する

npm install @sitecore/engage

import { createContext, useContext, useState, useEffect, useCallback } from "react";
import { init } from "@sitecore/engage";

const EngageContext = createContext();

function EngageProvider({ children }) {
  const [engage, setEngage] = useState({});

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

    setEngage(engage);
  }, []);

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

  return <EngageContext.Provider value={engage}>{children}</EngageContext.Provider>;
}

function useEngage() {
  const engage = useContext(EngageContext);
  return engage;
}

export { EngageProvider, useEngage };

import { EngageProvider } from "./engage";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <EngageProvider>
      <App />
    </EngageProvider>
  </React.StrictMode>
);

import { useEffect, useCallback } from "react";
import { useEngage } from "./engage";

export default function App() {
  const engage = useEngage();

  const sendPageViewEvent = useCallback(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 Personalize > Developer center > Event viewer > Search field:");
      console.log(engage.getBrowserId());
    }
  }, [engage]);

  useEffect(() => {
    if (Object.keys(engage).length !== 0) {
      sendPageViewEvent();
    }
  }, [engage, sendPageViewEvent]);

  return <></>;
}