Gerenciar eventos de exibição no Web SDK

Os eventos de exibição informam aos serviços de personalização ou análise que um conteúdo personalizado específico foi exibido para o usuário. O envio de eventos de exibição melhora a precisão dos relatórios, ajudando os sistemas downstream a distinguir entre o conteúdo que foi solicitado e o conteúdo que foi realmente exibido.

Enviar eventos de exibição automaticamente

Os eventos de exibição automática geralmente são a opção mais simples. Eles são enviados imediatamente depois que o Web SDK terminar de renderizar o conteúdo qualificado da resposta sendEvent, o que pode melhorar a precisão dos relatórios.

Para enviar eventos de exibição automaticamente, use uma chamada sendEvent que defina renderDecisions como true e defina personalization.sendDisplayEvent como true (ou omita, já que true é o padrão):

alloy("sendEvent", {
  renderDecisions: true,
  personalization: { }, // sendDisplayEvent defaults to true
  xdm: {
    web: {
      webPageDetails: {
        name: "home"
      }
    }
  }
});

Enviar eventos de exibição em sendEvent chamadas subsequentes

A inclusão de eventos de exibição em uma chamada sendEvent posterior é útil quando você deseja anexar dados adicionais de carregamento de página que não estão disponíveis ao solicitar personalização. Geralmente é usado ao implementar Eventos de página superior e inferior. A implementação correta dos eventos de exibição dessa maneira ajuda a evitar problemas com Taxa de rejeição no Adobe Analytics.

Enviar eventos de exibição para apresentações renderizadas manualmente

Se você mesmo renderizar o conteúdo (renderização totalmente manual ou usando applyPropositions), deverá enviar eventos de exibição explicitamente usando o comando sendEvent. Chame sendEvent com uma carga XDM que inclua as seguintes propriedades:

Os dois exemplos a seguir usam essa função auxiliar para criar a carga XDM do evento de exibição:

function buildDisplayEventXdm(renderedPropositions) {
  return {
    eventType: "decisioning.propositionDisplay",
    _experience: {
      decisioning: {
        propositions: renderedPropositions.map(({ id, scope, scopeDetails }) => ({
          id,
          scope,
          scopeDetails
        })),
        propositionEventType: { display: 1 }
      }
    }
  };
}

O exemplo a seguir usa renderização manual com eventos de exibição:

function renderExample(propositions) {
  // Your custom logic here. Return ONLY the propositions that were actually rendered.
  // For example: return [propositions[0]];
  return [];
}

alloy("sendEvent", {
  personalization: { decisionScopes: ["discount"] },
  xdm: { }
}).then(({ propositions = [] }) => {
  const renderedPropositions = renderExample(propositions);
  if (!renderedPropositions.length) { return; }
  return alloy("sendEvent", { xdm: buildDisplayEventXdm(renderedPropositions) });
});

O exemplo a seguir usa o comando applyPropositions com eventos de exibição. Ele acorrenta sendEvent, applyPropositions, e depois outro sendEvent:

alloy("sendEvent", {
  personalization: { decisionScopes: ["discount", "salutation"] },
  xdm: { }
}).then(({ propositions = [] }) => {
  return alloy("applyPropositions", {
    propositions,
    metadata: {
      salutation: { selector: "#salutation", actionType: "setHtml" },
      discount: { selector: "#daily-special", actionType: "replaceHtml" }
    }
  });
}).then(({ propositions: renderedPropositions = [] }) => {
  if (!renderedPropositions.length) { return; }
  return alloy("sendEvent", { xdm: buildDisplayEventXdm(renderedPropositions) });
});

Erros comuns a serem evitados