DocumentaciónJourney OptimizerGuía de Journey Optimizer

Ejemplos de métodos de implementación basados en código implementation-samples

Last update: Mon Aug 25 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Experimentado
  • Desarrollador

La experiencia basada en código admite cualquier tipo de implementación del cliente. En esta página puede encontrar ejemplos para cada método de implementación:

IMPORTANT
Siga este enlace para encontrar implementaciones de muestra para diferentes casos de uso de personalización y experimentación. Compruébelos y ejecútelos para comprender mejor cuáles son los pasos de implementación necesarios y cómo funciona el flujo de personalización de principio a fin.

Implementación del lado del cliente client-side-implementation

Si tiene una implementación del lado del cliente, puede utilizar uno de los SDK de cliente de AEP: AEP Web SDK o AEP Mobile SDK.

  • Los pasos debajo de describen el proceso de recuperar el contenido publicado en el perímetro por los recorridos de experiencia basados en código y las campañas en una implementación de muestra de Web SDK y de mostrar el contenido personalizado.

  • Los pasos para implementar un canal basado en código mediante Mobile SDK se describen en este tutorial.

    note note
    NOTE
    Hay implementaciones de muestra disponibles para casos de uso móvil para aplicación iOS y aplicación Android.

Cómo funciona - Web SDK client-side-how

  1. Web SDK está incluido en la página.

  2. Debe usar el comando sendEvent y especificar el URI de superficie para recuperar contenido de personalización.

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

  3. El código de implementación debe aplicar manualmente los elementos de experiencia basados en código (mediante el método applyPersonalization) para actualizar el DOM según la decisión.

  4. Para las campañas y los recorridos de experiencias basados en código, los eventos de visualización deben enviarse manualmente para indicar cuándo se ha mostrado el contenido. Esto se realiza mediante el comando 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,
            },
          ],
        },
      },
    },
  });
}

  5. En el caso de las campañas y los recorridos de experiencias basados en código, los eventos de interacción deben enviarse manualmente para indicar cuándo un usuario ha interactuado con el contenido. Esto se realiza mediante el comando 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: {
            label: label
          },
        },
      },
    },
  });
}

Observaciones clave

Cookies

Las cookies se utilizan para mantener la identidad del usuario y la información de clúster. Al utilizar una implementación del lado del cliente, Web SDK gestiona el almacenamiento y el envío de estas cookies automáticamente durante el ciclo vital de la solicitud.

Cookie
Objetivo
Almacenado por
Enviado por
kndctr_AdobeOrg_identity
Contiene detalles de identidad del usuario
SDK web
SDK web
kndctr_AdobeOrg_cluster
Indica qué clúster de Experience Edge se debe usar para cumplir las solicitudes
SDK web
SDK web

Solicitar ubicación

Las solicitudes a la API de Adobe Experience Platform son necesarias para obtener propuestas y enviar una notificación de visualización. Al utilizar una implementación del lado del cliente, Web SDK realiza estas solicitudes cuando se utiliza el comando sendEvent.

Solicitud
Realizado por
interactuar solicitud para obtener propuestas
Web SDK con el comando sendEvent
interactuar solicitud para enviar notificaciones de visualización
Web SDK con el comando sendEvent

Diagrama de flujo

Implementación del lado del servidor server-side-implementation

Si tiene una implementación del lado del servidor, puede utilizar una de la API de AEP Edge Network.

Los pasos siguientes describen el proceso de recuperar el contenido publicado en Edge por los recorridos de experiencia basados en código y las campañas en una implementación de API de Edge Network de ejemplo para una página web y mostrar el contenido personalizado.

Funcionamiento

  1. Se solicita la página web y se incluyen todas las cookies almacenadas anteriormente por el explorador con el prefijo kndctr_.

  2. Cuando se solicita la página desde el servidor de aplicaciones, se envía un evento al extremo interactivo de recopilación de datos para recuperar el contenido de personalización. Esta aplicación de ejemplo utiliza algunos métodos de ayuda para simplificar la generación y el envío de solicitudes a la API (consulte aepEdgeClient.js). Pero la solicitud es simplemente un POST con una carga útil que contiene un evento y una consulta. Las cookies (si están disponibles) del paso anterior se incluyen con la solicitud en la matriz 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());

  3. La experiencia JSON de los recorridos de experiencia basados en código y la campaña se lee desde la respuesta y se utiliza al producir la respuesta de HTML.

  4. Para las campañas y los recorridos de experiencias basados en código, los eventos de visualización deben enviarse manualmente en la implementación para indicar cuándo se ha mostrado el recorrido o el contenido de la campaña. En este ejemplo, la notificación se envía del lado del servidor durante el ciclo de vida de la solicitud.

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

  5. Cuando se devuelve la respuesta de HTML, el servidor de aplicaciones establece las cookies de identidad y de clúster en la respuesta.

Observaciones clave

Cookies

Las cookies se utilizan para mantener la identidad del usuario y la información de clúster. Al utilizar una implementación del lado del servidor, el servidor de aplicaciones debe gestionar el almacenamiento y el envío de estas cookies durante el ciclo vital de la solicitud.

Cookie
Objetivo
Almacenado por
Enviado por
kndctr_AdobeOrg_identity
Contiene detalles de identidad del usuario
servidor de aplicaciones
servidor de aplicaciones
kndctr_AdobeOrg_cluster
Indica qué clúster de Experience Edge se debe usar para cumplir las solicitudes
servidor de aplicaciones
servidor de aplicaciones

Solicitar ubicación

Las solicitudes a la API de Adobe Experience Platform son necesarias para obtener propuestas y enviar una notificación de visualización. Al utilizar una implementación del lado del cliente, Web SDK realiza estas solicitudes cuando se utiliza el comando sendEvent.

Solicitud
Realizado por
interactuar solicitud para obtener propuestas
servidor de aplicaciones llamando a la API de Adobe Experience Platform
interactuar solicitud para enviar notificaciones de visualización
servidor de aplicaciones llamando a la API de Adobe Experience Platform

Diagrama de flujo

Implementación híbrida hybrid-implementation

Si tiene una implementación híbrida, consulte los vínculos siguientes.

recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76