Renderizar ofertas do HTML sem seletores
Use esse padrão quando suas propostas incluírem conteúdo HTML, mas você deve fornecer onde aplicá-lo (seletor) e como aplicá-lo (tipo de ação). Você pode fazer isso chamando applyPropositions com um objeto metadata digitado por escopo. Os valores de actionType com suporte são setHtml, replaceHtml e appendHtml.
1. Gerenciar cintilação (opcional)
Se ocultar o conteúdo durante a renderização, você será responsável por revelá-lo após a conclusão da renderização. Consulte Gerenciar cintilação para obter mais informações.
2. Solicitar apresentações para os escopos que você pretende renderizar
alloy("sendEvent", {
personalization: {
decisionScopes: ["discount", "salutation"]
},
xdm: { }
}).then(({ propositions = [] }) => {
// Render in the next step
});
Consulte personalization.decisionScopes para obter mais informações.
3. Renderizar ofertas com applyPropositions metadados
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 = [] }) => {
return { renderedPropositions };
});
});
4. Registrar eventos de exibição para apresentações renderizadas
Eventos de exibição não são enviados automaticamente ao chamar applyPropositions. Depois que a renderização for concluída, use uma chamada sendEvent que faça referência às propostas renderizadas:
function toDisplayPayload(propositions) {
return propositions.map((p) => ({
id: p.id,
scope: p.scope,
scopeDetails: p.scopeDetails
}));
}
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 = [] }) => {
return alloy("sendEvent", {
xdm: {
_experience: {
decisioning: {
propositions: toDisplayPayload(renderedPropositions),
propositionEventType: { display: 1 }
}
}
}
});
});
});
Consulte Gerenciar eventos de exibição para obter mais informações.
sendEvent inferior.5. Renderização
Se sua implementação exigir uma renderização posterior (como em aplicativos de página única), chame applyPropositions novamente com as mesmas propostas e metadados:
alloy("applyPropositions", {
propositions,
metadata: {
discount: { selector: "#daily-special", actionType: "replaceHtml" }
}
});
Se você precisar gravar um evento de exibição para essa nova renderização, consulte Gerenciar eventos de exibição.