[Alpha]{class="badge informative"}

Personalización híbrida con Server SDK

En una implementación de personalización híbrida, el servidor solicita contenido personalizado y el explorador del visitante lo procesa. Adobe Experience Platform Server SDK for JavaScript, o Server SDK, solicita el contenido mientras el servidor crea la página y Web SDK lo procesa en el explorador.

En comparación con la personalización del lado del cliente, este enfoque tiene las siguientes ventajas:

Funcionamiento how-it-works

Requisitos previos prerequisites

Paso 1: Solicitar propuestas en el servidor server

Cuando el servidor gestione una solicitud de página, solicite propuestas para las superficies o ámbitos de decisión de esa página. Establezca la dirección URL de la página de forma explícita, ya que el encabezado Referer de la solicitud contiene la página previous durante la navegación. Ver Contexto y encabezados reenviados.

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 [];
  }
}

Server SDK no procesa propuestas ni envía eventos de visualización. Solo los devuelve. Si la solicitud falla, devuelva una matriz vacía para que la página se siga procesando con el contenido predeterminado.

Paso 2: Incluir las propuestas en la página page

Serialice las propuestas en el HTML que devuelve el servidor. Se escapa el carácter < para que el contenido de una propuesta no pueda cerrar el elemento <script> antes de tiempo.

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>`);

Paso 3: Procesar las propuestas en el explorador browser

Una vez configurado Web SDK en la página, pase las propuestas a applyPropositions. Para las ofertas de HTML que no incluyen un selector, use metadata para indicarle a Web SDK dónde colocar cada una. Ver Procesar ofertas de 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 no envía eventos de visualización por sí solo. La segunda llamada de sendEvent registra las propuestas que vio el visitante. Ver Administrar eventos de visualización.

Mantener la identidad del visitante coherente identity

Para conseguir unos informes y una personalización precisos, el servidor y el navegador deben identificar al visitante de la misma manera:

Server SDK no incluye un servicio de cookies que lea las cookies de solicitud del visitante. Consulte Servicios de plataforma para ver la interfaz que debe implementar un servicio de cookies.