文档 Journey Optimizer Journey Optimizer 指南

基于代码的实施方法示例

最近更新： 2025年8月25日

主题：
基于代码的体验

创建对象：

有经验的
开发人员

基于代码的体验支持任何类型的客户实施。在此页上，您可以找到每种实施方法的示例：

客户端
服务器端
混合

重要

按照此链接查找不同个性化和实验用例的示例实施。查看并运行这些扩展，以便更好地了解所需的实施步骤以及端到端个性化流程的工作方式。

客户端实施

如果您有客户端实施，则可以使用以下任一AEP客户端SDK：AEP Web SDK或AEP Mobile SDK。

下面的步骤描述在示例Web SDK 实现中，获取基于代码的体验历程和营销活动在边缘上发布的内容并显示个性化内容的过程。
本教程 介绍了使用Mobile SDK实施基于代码的渠道的步骤。

注意
移动使用案例的示例实施适用于iOS应用程序和Android应用程序。

工作原理 — Web SDK

Web SDK已包含在此页面中。

您需要使用sendEvent命令并指定表面URI来获取个性化内容。

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

实施代码应手动应用基于代码的体验项（使用applyPersonalization方法）以根据决策更新DOM。

对于基于代码的体验历程和营销活动，必须手动发送显示事件以指示何时显示内容。这是通过sendEvent命令完成的。

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

  alloy("sendEvent", {

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

对于基于代码的体验历程和营销活动，必须手动发送交互事件以指示用户何时与内容交互。这是通过sendEvent命令完成的。

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: {
            label: label
          },
        },
      },
    },
  });
}

主要意见

Cookie

Cookie用于保留用户标识和群集信息。使用客户端实施时，Web SDK会在请求生命周期中自动处理这些Cookie的存储和发送。

Cookie

用途

存储者

发送者

kndctr_AdobeOrg_identity

包含用户身份详细信息

Web SDK

kndctr_AdobeOrg_cluster

指示应使用哪个体验边缘群集来完成请求

Web SDK

请求放置

需要向Adobe Experience Platform API发出请求才能获取建议并发送显示通知。在使用客户端实现时，Web SDK会在使用sendEvent命令时发出这些请求。

请求

创建者

interact请求以获取建议

使用sendEvent命令的Web SDK

interact请求发送显示通知

使用sendEvent命令的Web SDK

流程图

服务器端实施

如果您有服务器端实施，则可以使用一个AEP Edge Network API。

以下步骤在一个针对网页的示例Edge Network API实现中介绍了获取由基于代码的体验历程和营销活动在Edge上发布的内容并显示个性化内容的过程。

工作原理

已请求该网页，并且包含以前由浏览器存储的以kndctr_为前缀的所有Cookie。

从应用服务器请求该页面时，会向交互式数据收集终结点发送一个事件以获取个性化内容。此示例应用程序使用一些帮助程序方法来简化针对API的请求生成和发送过程（请参阅aepEdgeClient.js）。但请求只是具有包含事件和查询的有效负载的POST。上一步骤中的Cookie（如果可用）包含在meta>state>entries数组的请求中。

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响应时使用。

对于基于代码的体验历程和营销活动，必须在实施中手动发送显示事件，以指示何时显示历程或营销活动内容。在此示例中，通知在请求生命周期期间在服务器端发送。

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