Sitecore CDP Profile Viewer の紹介

公開日 :

CDP に蓄積している情報を他のシステムと連携して利用したい、というニーズに応えることができるように、サンプルとして Sitecore CDP Profile Viewer というのを作ってみました。今回は React で作成したもので、リポジトリにコードを公開しています。

サンプルプログラム

2日前から突然 React の Tips を掲載していましたが、これはこのサンプルを作るベースで利用しているのを紹介している形です。

ベースのサンプルは codesandbox にも掲載しています。

動作としては、プロファイルの ID を後ろに追加して表示をすればいい形となります。このため、例えば CRM ではこの ID を保持しておき、iframe で呼び出す時にはこの ID を利用して実行して、プロファイル情報を表示すれば良い、という形になります。

サンプルコード

上記のプログラムをベースにして、作成をしたサンプルのコードを以下のリポジトリで公開しています。

利用方法は至ってシンプルで、以下の手順で動作するようになります。

  1. .env.example のファイルをコピーして .env ファイルを作成する

  2. .env ファイルに以下の値を設定します

    • VITE_CDP_URL: CDP の管理画面の URL を記載します（ドメイン名まで、最後の / は不要）

    • VITE_BASE_URL: 利用しているデータセンターに合わせて https://doc.sitecore.com/cdp/en/developers/api/base-url.html から取得してください

    • VITE_CLIENT_KEY: 管理画面の API Access から Client Key を取得します

    • VITE_API_TOKEN: 管理画面の API Access から API Token を取得します。

  3. npm install を実行します

  4. npm run dev を実行してローカルで動作するのを確認します

random desc

コードの確認

サンプルのコードを見ながら確認していきます。まず、App.tsx ファイルを見にいくと以下のように記述されています。

const App: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/guests/:guestRef" element={<Guests />} />
        <Route path="/orders/:guestRef" element={<Orders />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

実際には以下のような動きとなります。

  • / にアクセスすると Home.tsx で動作する

  • /guests/:guestRef は、guestRef をパラメータで渡して Guest.tsx で動作する

  • /orders/:guestRef は、guestRef をパラメータで渡して Order.tsx で動作する

  • それ以外のページは NotFound でエラーメッセージを表示する

では各ファイルのコードを見ていきます。

ホーム（Home.tsx）

src/routes/Home.tsx に関しては、通常は不要かもしれません。システム連携をしているのであれば、キーが CRM に埋め込まれてプロファイルの情報を表示するように作るためです。これはサンプルになっているので、テキスト入力ボックスにキーを入れたら、そのキーを利用してページを表示するように作成しただけとなります。

ゲストページ（Guests.tsx）

src/routes/Guests.tsx のファイルは、ホームで入力したキーを利用して、CDP からデータを取得、Json のデータを表示するような形になっています。キーに該当する値がない場合は、エラーを表示しています。

データの取得に関しては、axios を利用して表示するようにしています。

Json のデータを TypeScript で扱うために、src/interfaces/Guests/index.ts に型定義を設定してあります。

また関連するオーダーがある場合は、オーダーページへのリンクを表示して、表示できるようにしています。

オーダーページ（Orders.tsx）

src/routes/Orders.tsx のページは、ユーザーがオーダーに紐づいている場合、その件数を表示するようにしています。オーダーの詳細などは表示することはありません。

オーダー情報を扱うための型定義は src/interfaces/Orders/index.ts ファイルに作成してあります。

まとめ

このサンプルのコードに関しては、Tailwind.css および NextUI を採用してみました。これはあくまでサンプルとして提供しているもので、Content Security Policy を利用してアプリが動く環境などを整備して運用していく必要があります。