ドキュメント Journey Optimizer Journey Optimizer ガイド

コードベースの実装方法のサンプル implementation-samples

最終更新日： 2026年8月14日

作成対象：

Experienced
{"id":"ff6a42d2-313e-452e-93a6-792e4fad9ff8"}

このページ：アプリケーションでコードベースのエクスペリエンスコンテンツを取得、表示、追跡するためのクライアントサイド、サーバーサイド、ハイブリッド実装サンプルについて説明します。

style

shade-box

コードベースのエクスペリエンスは、あらゆるタイプの顧客実装をサポートします。このページでは、各実装方法のサンプルを確認できます。

クライアントサイド
サーバーサイド
ハイブリッド

IMPORTANT

このリンクから、様々なパーソナライゼーションや実験のユースケースのサンプル実装を確認できます。必要な実装手順とエンドツーエンドのパーソナライゼーションフローの仕組みをより深く理解するには、これらを確認および実行してください。

➡️ コードベースのエクスペリエンスと決定のための Web SDK の設定について詳しくは、これらのチュートリアルを参照してください

クライアントサイドの実装 client-side-implementation

クライアントサイドの実装がある場合、AEP Web SDK または AEP Mobile SDK のいずれかの AEP クライアント SDK を使用できます。

以下の手順では、サンプル Web SDK 実装のコードベースのエクスペリエンスジャーニーとキャンペーンによってエッジに公開されたコンテンツを取得し、パーソナライズされたコンテンツを表示するプロセスについて説明します。

Mobile SDK を使用してコードベースのチャネルを実装する手順について詳しくは、このチュートリアルを参照してください。

note
NOTE
モバイルユースケースのサンプル実装は、iOS アプリと Android アプリで利用できます。

仕組み - Web SDK client-side-how

Web SDK がページに含まれています。

sendEvent コマンドを使用してサーフェス URI を指定し、パーソナライゼーションコンテンツを取得する必要があります。

code language-javascript
`alloy("sendEvent", { renderDecisions: true, personalization: { surfaces: ["#sample-json-content"], }, }).then(applyPersonalization("#sample-json-content"));`

コードベースのエクスペリエンス項目は、実装コード（applyPersonalization メソッドを使用）により手動で適用され、決定に基づいて DOM を更新する必要があります。

コードベースのエクスペリエンスジャーニーとキャンペーンの場合、コンテンツがいつ表示されたかを示すために、表示イベントを手動で送信する必要があります。これは、sendEvent コマンドを使用して行われます。

code language-javascript

function sendDisplayEvent(decision) {
  const { id, scope, scopeDetails = {} } = decision;

  alloy("sendEvent", {

    xdm: {
      eventType: "decisioning.propositionDisplay",
      _experience: {
        decisioning: {
          propositions: [
            {
              id: id,
              scope: scope,
              scopeDetails: scopeDetails,
            },
          ],
        },
      },
    },
  });
}

コードベースのエクスペリエンスジャーニーとキャンペーンの場合、ユーザーがいつコンテンツを操作したかを示すために、インタラクションイベントを手動で送信する必要があります。これは、sendEvent コマンドを使用して行われます。

code language-javascript

function sendInteractEvent(label, proposition) {
  const { id, scope, scopeDetails = {} } = proposition;

  alloy("sendEvent", {

    xdm: {
      eventType: "decisioning.propositionInteract",
      _experience: {
        decisioning: {
          propositions: [
            {
              id: id,
              scope: scope,
              scopeDetails: scopeDetails,
            },
          ],
          propositionEventType: {
            interact: 1
          },
          propositionAction: {
            id: label,
            label: label,
            tokens: proposition.items?.[0]?.characteristics?.tokens || []
          },
        },
      },
    },
  });
}

note important
IMPORTANT
`propositionAction` の「`tokens`」フィールドは、Adobe Journey Optimizer 決定での正確なトラッキングとアトリビューションに対して重要です。これらのトークンを使用すると、次のことが可能になります。
決定アクティビティに対する適切なクリックアトリビューション決定コンテンツによるユーザーのインタラクションの正確なレポートユーザーエンゲージメントに基づくオファーパフォーマンスの最適化
トークンは通常 `proposition.items[0].characteristics.tokens` に見つかります。決定コンテンツでユーザーのインタラクションを追跡する場合は、常に含める必要があります。

主な所見

Cookie

Cookie は、ユーザー ID とクラスター情報を保持するために使用されます。クライアントサイドの実装を使用する場合、Web SDK は、リクエストのライフサイクル中にこれらの Cookie の保存と送信を自動処理します。

目的

保存者

送信者

kndctr_AdobeOrg_identity

ユーザー ID の詳細を含む

Web SDK

kndctr_AdobeOrg_cluster

リクエストを満たすために使用すべきエクスペリエンスエッジクラスターを示します。

Web SDK

リクエストの配置

提案を取得し、表示通知を送信するには、Adobe Experience Platform API へのリクエストが必要です。クライアントサイドの実装を使用する場合、Web SDK は sendEvent コマンドの使用時にこれらのリクエストを作成します。

リクエスト

作成者

提案を取得するためのインタラクションリクエスト

sendEvent コマンドを使用する Web SDK

表示通知を送信するためのインタラクションリクエスト

sendEvent コマンドを使用する Web SDK

フロー図

サーバーサイド実装 server-side-implementation

サーバーサイド実装がある場合は、いずれかの AEP Edge Network API を使用できます。

次の手順では、web ページのサンプルの Edge Network API 実装で、コードベースのエクスペリエンスジャーニーとキャンペーンによってエッジに公開されたコンテンツを取得し、パーソナライズされたコンテンツを表示するプロセスについて説明します。

仕組み

Web ページがリクエストされ、ブラウザーによって以前に保存された kndctr_ 接頭辞付きの Cookie が含まれます。

アプリサーバーからページがリクエストされると、インタラクティブデータ収集エンドポイントにイベントが送信され、パーソナライゼーションコンテンツが取得されます。このサンプルアプリでは、ヘルパーメソッドをいくつか使用して、API へのリクエストの作成と送信を簡素化します（aepEdgeClient.js を参照）。ただし、このリクエストはイベントとクエリを含むペイロード付きの単なる POST です。前の手順の Cookie（使用可能な場合）は、meta>state>entries 配列内のリクエストに含まれます。

code language-javascript

fetch(
  "https://edge.adobedc.net/ee/v2/interact?dataStreamId=abc&requestId=123",
  {
    headers: {
      accept: "*/*",
      "accept-language": "en-US,en;q=0.9",
      "cache-control": "no-cache",
      "content-type": "text/plain; charset=UTF-8",
      pragma: "no-cache",
      "sec-fetch-dest": "empty",
      "sec-fetch-mode": "cors",
      "sec-fetch-site": "cross-site",
      "sec-gpc": "1",
      "Referrer-Policy": "strict-origin-when-cross-origin",
      Referer: "https://localhost/",
    },
    body: JSON.stringify({
      event: {
        xdm: {
          eventType: "decisioning.propositionFetch",
          web: {
            webPageDetails: {
              URL: "https://localhost/",
            },
            webReferrer: {
              URL: "",
            },
          },
          identityMap: {
            FPID: [
              {
                id: "xyz",
                authenticatedState: "ambiguous",
                primary: true,
              },
            ],
          },
          timestamp: "2022-06-23T22:21:00.878Z",
        },
        data: {},
      },
      query: {
        identity: {
          fetch: ["ECID"],
        },
        personalization: {
          schemas: [
            "https://ns.adobe.com/personalization/default-content-item",
            "https://ns.adobe.com/personalization/html-content-item",
            "https://ns.adobe.com/personalization/json-content-item",
            "https://ns.adobe.com/personalization/redirect-item",
            "https://ns.adobe.com/personalization/dom-action",
          ],
          surfaces: ["web://localhost/","web://localhost/#sample-json-content"],
        },
      },
      meta: {
        state: {
          domain: "localhost",
          cookiesEnabled: true,
          entries: [
            {
              key: "kndctr_XXX_AdobeOrg_identity",
              value: "abc123",
            },
            {
              key: "kndctr_XXX_AdobeOrg_cluster",
              value: "or2",
            },
          ],
        },
      },
    }),
    method: "POST",
  }
).then((res) => res.json());

コードベースのエクスペリエンスジャーニーとキャンペーンの JSON エクスペリエンスは、応答から読み取られ、HTML 応答の生成時に使用されます。

コードベースのエクスペリエンスジャーニーとキャンペーンの場合、ジャーニーまたはキャンペーンのコンテンツがいつ表示されたかを示すために、実装内で表示イベントを手動で送信する必要があります。この例では、通知はリクエストのライフサイクル中にサーバーサイドで送信されます。

code language-javascript

function sendDisplayEvent(aepEdgeClient, req, propositions, cookieEntries) {
  const address = getAddress(req);

  aepEdgeClient.interact(
    {
      event: {
        xdm: {
          web: {
            webPageDetails: { URL: address },
            webReferrer: { URL: "" },
          },
          timestamp: new Date().toISOString(),
          eventType: "decisioning.propositionDisplay",
          _experience: {
            decisioning: {
              propositions: propositions.map((proposition) => {
                const { id, scope, scopeDetails } = proposition;

                return {
                  id,
                  scope,
                  scopeDetails,
                };
              }),
            },
          },
        },
      },
      query: { identity: { fetch: ["ECID"] } },
      meta: {
        state: {
          domain: "",
          cookiesEnabled: true,
          entries: [...cookieEntries],
        },
      },
    },
    {
      Referer: address,
    }
  );
}

HTML 応答が返されると、ID とクラスターの Cookie がアプリケーションサーバーによって応答に設定されます。

主な所見

Cookie

Cookie は、ユーザー ID とクラスター情報を保持するために使用されます。サーバーサイド実装を使用する場合、アプリケーションサーバーは、リクエストのライフサイクル中にこれらの Cookie の保存と送信を処理する必要があります。

目的

保存者

送信者

kndctr_AdobeOrg_identity

ユーザー ID の詳細を含む

アプリケーションサーバー

kndctr_AdobeOrg_cluster

リクエストを満たすために使用すべきエクスペリエンスエッジクラスターを示します。

アプリケーションサーバー

リクエストの配置

リクエスト

作成者

提案を取得するためのインタラクションリクエスト

Adobe Experience Platform API を呼び出すアプリケーションサーバー

表示通知を送信するためのインタラクションリクエスト

Adobe Experience Platform API を呼び出すアプリケーションサーバー

フロー図

ハイブリッド実装 hybrid-implementation

ハイブリッド実装を使用している場合は、以下のリンクを確認してください。

アドビのテクニカルブログ：Adobe Experience Platform Web SDK のハイブリッドパーソナライゼーション
SDK ドキュメント：Web SDK と Edge Network Server API を使用したハイブリッドパーソナライゼーション

Adobe Experience Platform Assurance を使用した Edge Network API 呼び出しのデバッグ debugging-edge-api-assurance

コードベースのエクスペリエンスに Edge Network API を直接使用する場合（Web SDK または Mobile SDK を使用しない場合）、Adobe Experience Platform Assurance を使用して API 呼び出しをデバッグするには、Assurance セッション ID を検証トークンヘッダーとして含めます。

アクティブな Adobe Experience Platform Assurance セッションから Assurance セッション ID を取得するか、Assurance API を使用して作成します。

Assurance セッション ID に x-adobe-aep-validation-token ヘッダーを追加して、Edge Network API リクエストを Assurance セッション経由でルーティングします。

例：

code language-bash

curl -v 'https://edge.adobedc.net/ee/v1/interact?configId={DATASTREAM_ID}&requestId={REQUEST_ID}' \
--header 'Content-Type: application/json' \
--header 'x-adobe-aep-validation-token: {ASSURANCE_SESSION_ID}' \
--data-raw '{
    "xdm": {
      "identityMap": {
            "ECID": [
                {
                    "id": "{ECID_VALUE}"
                }
            ]
        }
    },
    "events": [
        {
            "xdm": {
                "eventType": "test",
                "timestamp": "{TIMESTAMP}"
            }
        }
    ]
}'

設定が完了したら、Assurance セッションを開き、Edge Delivery ビューを選択して、リクエストペイロード、応答コンテンツ、パーソナライゼーション提案、エラーメッセージなど、Edge Network API リクエストと応答をリアルタイムで確認します。

recommendation-more-help

journey-optimizer-help