[Alpha]{class="badge informative"}

Personalização híbrida com o Server SDK

Em uma implementação de personalização híbrida, o servidor solicita conteúdo personalizado e o navegador do visitante o renderiza. O Adobe Experience Platform Server SDK para JavaScript, ou Server SDK, solicita o conteúdo enquanto o servidor cria a página, e o Web SDK o renderiza no navegador.

Em comparação à personalização no lado do cliente, essa abordagem tem os seguintes benefícios:

Como funciona how-it-works

Pré-requisitos prerequisites

Etapa 1: solicitar apresentações no servidor server

Quando o servidor lida com uma solicitação de página, solicite apresentações para as superfícies ou os escopos de decisão nessa página. Defina a URL da página explicitamente, pois o cabeçalho Referer da solicitação contém a página anterior durante uma navegação. Consulte Contexto e cabeçalhos encaminhados.

async function getPropositions(req) {
  const visitor = alloy.forRequest({ request: req });

  try {
    const { propositions = [] } = await visitor.sendEvent({
      xdm: {
        eventType: "decisioning.propositionFetch",
        web: {
          webPageDetails: {
            URL: `https://www.example.com${req.url}`
          }
        },
        identityMap: {
          Email: [{ id: "visitor@example.com", primary: true }]
        }
      },
      personalization: {
        surfaces: ["web://www.example.com/home#hero"],
        decisionScopes: ["daily-special"]
      }
    });
    return propositions;
  } catch (error) {
    // Render the default experience if personalization isn't available
    console.error("Failed to fetch propositions", error);
    return [];
  }
}

O Server SDK não renderiza apresentações nem envia eventos de exibição. Só os devolve. Se a solicitação falhar, retorne uma matriz vazia para que sua página ainda seja renderizada com o conteúdo padrão.

Etapa 2: incluir as apresentações na página page

Serialize as apresentações no HTML que o servidor retorna. Evite o caractere < para que o conteúdo em uma proposta não possa fechar o elemento <script> antecipadamente.

const propositions = await getPropositions(req);
const serialized = JSON.stringify(propositions).replace(/</g, "\\u003c");

res.end(`<!DOCTYPE html>
<html>
  <head>
    <script>window.serverPropositions = ${serialized};</script>
    <!-- Web SDK base code and library -->
  </head>
  <body>
    <div id="hero">Default hero content</div>
    <div id="daily-special">Default special</div>
  </body>
</html>`);

Etapa 3: renderizar as apresentações no navegador browser

Depois que o Web SDK for configurado na página, passe as propostas para applyPropositions. Para ofertas do HTML que não incluem um seletor, use metadata para informar ao Web SDK onde colocar cada um. Consulte Renderizar ofertas do HTML.

alloy("applyPropositions", {
  propositions: window.serverPropositions || [],
  metadata: {
    "daily-special": { selector: "#daily-special", actionType: "setHtml" }
  }
}).then(({ propositions: renderedPropositions = [] }) => {
  if (!renderedPropositions.length) { return; }
  return alloy("sendEvent", {
    xdm: {
      eventType: "decisioning.propositionDisplay",
      _experience: {
        decisioning: {
          propositions: renderedPropositions.map(({ id, scope, scopeDetails }) => ({
            id,
            scope,
            scopeDetails
          })),
          propositionEventType: { display: 1 }
        }
      }
    }
  });
});

applyPropositions não envia eventos de exibição por conta própria. A segunda chamada sendEvent registra quais apresentações o visitante viu. Consulte Gerenciar eventos de exibição.

Mantenha a identidade do visitante consistente identity

Para obter relatórios e personalização precisos, o servidor e o navegador devem identificar o visitante da mesma maneira:

O SDK do servidor não inclui um serviço de cookie que lê os cookies de solicitação do visitante. Consulte Serviços de plataforma para obter a interface que um serviço de cookie deve implementar.