DocumentaçãoJourney OptimizerGuia do Journey Optimizer

Amostras de métodos de implementação baseados em código

Última atualização: 5 de maio de 2025
  • Tópicos:
  • Experiências baseadas em código

Criado para:

  • Experiente
  • Desenvolvedor

A experiência baseada em código é compatível com qualquer tipo de implementação de cliente. Nesta página, você pode encontrar amostras para cada método de implementação:

  • Lado do cliente
  • Lado do servidor
  • Híbrido
IMPORTANTE
Siga este link para encontrar implementações de exemplo para diferentes casos de uso de personalização e experimentação. Confira-as e execute-as para entender melhor quais são as etapas de implementação necessárias e como funciona o fluxo de personalização completo.

Implementação do lado do cliente

Se você tiver uma implementação no lado do cliente, poderá usar um dos SDKs do cliente da AEP: AEP Web SDK ou AEP Mobile SDK.

  • As etapas abaixo descrevem o processo de busca do conteúdo publicado na borda pelas jornadas e campanhas de experiência baseadas em código em uma implementação de exemplo do Web SDK e de exibição do conteúdo personalizado.

  • As etapas para implementar o canal baseado em código usando o Mobile SDK estão descritas em este tutorial.

    OBSERVAÇÃO
    Implementações de exemplo para casos de uso de dispositivos móveis estão disponíveis para o aplicativo iOS e o aplicativo Android.

Como funciona - Web SDK

  1. O Web SDK está incluído na página.

  2. Você precisa usar o comando sendEvent e especificar o URI de superfície para buscar conteúdo de personalização.

    alloy("sendEvent", {
    renderDecisions: true,
    personalization: {
        surfaces: ["#sample-json-content"],
    },
    }).then(applyPersonalization("#sample-json-content"));
    
  3. Os itens de experiência baseados em código devem ser aplicados manualmente pelo código de implementação (usando o método applyPersonalization) para atualizar o DOM com base na decisão.

  4. Para jornadas de experiência e campanhas baseadas em código, os eventos de exibição devem ser enviados manualmente para indicar quando o conteúdo foi exibido. Isso é feito por meio do comando sendEvent.

    function sendDisplayEvent(decision) {
      const { id, scope, scopeDetails = {} } = decision;
    
      alloy("sendEvent", {
    
        xdm: {
          eventType: "decisioning.propositionDisplay",
          _experience: {
            decisioning: {
              propositions: [
                {
                  id: id,
                  scope: scope,
                  scopeDetails: scopeDetails,
                },
              ],
            },
          },
        },
      });
    }
    
  5. Para jornadas de experiência e campanhas baseadas em código, os eventos de interação devem ser enviados manualmente para indicar quando um usuário interagiu com o conteúdo. Isso é feito por meio do comando 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
              },
            },
          },
        },
      });
    }
    

Principais observações

Cookies

Os cookies são usados para manter a identidade do usuário e as informações do cluster. Ao usar uma implementação no lado do cliente, o Web SDK lida com o armazenamento e o envio desses cookies automaticamente durante o ciclo de vida da solicitação.

Cookie
Finalidade
Armazenado por
Enviado por
kndctr_AdobeOrg_identity
Contém detalhes da identidade do usuário
Web SDK
Web SDK
kndctr_AdobeOrg_cluster
Indica qual cluster de borda de experiência deve ser usado para atender a solicitações
Web SDK
Web SDK

Solicitar posicionamento

As solicitações para a API do Adobe Experience Platform são necessárias para obter apresentações e enviar uma notificação de exibição. Ao usar uma implementação no lado do cliente, o Web SDK faz essas solicitações quando o comando sendEvent é usado.

Solicitação
Feito por
solicitação de interação para obter apresentações
Web SDK usando o comando sendEvent
solicitação de interação para enviar notificações de exibição
Web SDK usando o comando sendEvent

Diagrama de Fluxo

Implementação do lado do servidor

Se você tiver uma implementação do lado do servidor, poderá usar uma da API Edge Network da AEP.

As etapas abaixo descrevem o processo de busca do conteúdo publicado na borda pelas jornadas e campanhas de experiência baseadas em código em uma amostra da implementação da API Edge Network para uma página da Web e a exibição do conteúdo personalizado.

Como funciona

  1. A página da Web é solicitada e todos os cookies armazenados anteriormente pelo navegador com o prefixo kndctr_ são incluídos.

  2. Quando a página é solicitada no servidor de aplicativos, um evento é enviado ao ponto de extremidade de coleta de dados interativa para buscar conteúdo de personalização. Este aplicativo de exemplo usa alguns métodos auxiliares para simplificar a compilação e o envio de solicitações para a API (consulte aepEdgeClient.js). Mas a solicitação é simplesmente uma POST com uma carga que contém um evento e uma consulta. Os cookies (se disponíveis) da etapa anterior estão incluídos com a solicitação na matriz 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());
    
  3. A experiência JSON das jornadas de experiência e campanha baseadas em código é lida da resposta e usada ao produzir a resposta HTML.

  4. Para jornadas de experiência e campanhas baseadas em código, os eventos de exibição devem ser enviados manualmente na implementação para indicar quando o conteúdo da jornada ou da campanha foi exibido. Neste exemplo, a notificação é enviada no lado do servidor durante o ciclo de vida da solicitação.

    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. Quando a resposta do HTML é retornada, a identidade e os cookies de cluster são definidos na resposta pelo servidor de aplicativos.

Principais observações

Cookies

Os cookies são usados para manter a identidade do usuário e as informações do cluster. Ao usar uma implementação do lado do servidor, o servidor de aplicativos deve lidar com o armazenamento e o envio desses cookies durante o ciclo de vida da solicitação.

Cookie
Finalidade
Armazenado por
Enviado por
kndctr_AdobeOrg_identity
Contém detalhes da identidade do usuário
servidor de aplicativos
servidor de aplicativos
kndctr_AdobeOrg_cluster
Indica qual cluster de borda de experiência deve ser usado para atender a solicitações
servidor de aplicativos
servidor de aplicativos

Solicitar posicionamento

As solicitações para a API do Adobe Experience Platform são necessárias para obter apresentações e enviar uma notificação de exibição. Ao usar uma implementação no lado do cliente, o Web SDK faz essas solicitações quando o comando sendEvent é usado.

Solicitação
Feito por
solicitação de interação para obter apresentações
servidor de aplicativos que chama a API do Adobe Experience Platform
solicitação de interação para enviar notificações de exibição
servidor de aplicativos que chama a API do Adobe Experience Platform

Diagrama de Fluxo

Implementação híbrida

Se você tiver uma implementação híbrida, verifique os links abaixo.

  • Blog da Adobe Tech: Personalization híbrido no Adobe Experience Platform Web SDK
  • Documentação do SDK: Personalização híbrida usando o Web SDK e a API do Edge Network Server
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76