[Alpha]{class="badge informative"}

Personalizzazione ibrida con Server SDK

In un’implementazione di personalizzazione ibrida, il server richiede contenuti personalizzati ed è il browser del visitatore a eseguirne il rendering. Adobe Experience Platform Server SDK per JavaScript o Server SDK richiede il contenuto mentre il server crea la pagina e Web SDK la esegue nel browser.

Rispetto alla personalizzazione lato client, questo approccio offre i seguenti vantaggi:

Come funziona how-it-works

Prerequisiti prerequisites

Passaggio 1: richiesta di proposte sul server server

Quando il server gestisce una richiesta di pagina, richiede proposte per le superfici o gli ambiti decisionali su tale pagina. Imposta esplicitamente l’URL della pagina, perché l’intestazione Referer della richiesta contiene la pagina previous durante una navigazione. Vedi Intestazioni contestuali e inoltrate.

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 non esegue il rendering delle proposte né invia eventi di visualizzazione. Li restituisce solo. Se la richiesta non riesce, restituisce un array vuoto in modo che la pagina venga comunque riprodotta con il suo contenuto predefinito.

Passaggio 2: includere le proposte nella pagina page

Serializza le proposte nel HTML restituito dal server. Esci dal carattere < in modo che il contenuto di una proposta non possa chiudere anticipatamente l’elemento <script>.

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

Passaggio 3: eseguire il rendering delle proposte nel browser browser

Dopo aver configurato il Web SDK nella pagina, passare le proposte a applyPropositions. Per le offerte HTML che non includono un selettore, utilizza metadata per indicare al Web SDK dove posizionare ciascuna di esse. Consulta Rendering offerte 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 non invia eventi di visualizzazione da solo. La seconda chiamata sendEvent registra le proposte che il visitatore ha visto. Vedi Gestione eventi di visualizzazione.

Mantieni coerente l’identità del visitatore identity

Per ottenere una reportistica e una personalizzazione accurate, il server e il browser devono identificare il visitatore nello stesso modo:

Il Server SDK non include un servizio cookie che legge i cookie di richiesta del visitatore. Consulta Servizi Platform per l’interfaccia che un servizio cookie deve implementare.