Effectuer le rendu manuel des propositions
Utilisez ce modèle lorsque vous avez besoin d'un contrôle total sur la manière dont les éléments de proposition sont appliqués. Par exemple, vous composez une interface utilisateur complexe à partir de contenu JSON ou vous souhaitez appliquer des règles métier personnalisées avant le rendu.
1. Propositions de requête
alloy("sendEvent", {
personalization: {
decisionScopes: ["salutation", "discount"]
},
xdm: { }
}).then(({ propositions = [] }) => {
// Render in the next step
});
Voir l’objet personalization dans la commande sendEvent pour plus d’informations.
2. Rendu des éléments de proposition (exemple)
Lors du rendu manuel de propositions, elles peuvent prendre de nombreuses formes différentes. Voici un exemple minimal qui détecte une proposition par portée, puis applique le premier élément de contenu HTML détecté.
function findPropositionByScope(propositions, scope) {
return propositions.find((p) => p.scope === scope);
}
function renderHtmlInto(selector, html) {
const el = document.querySelector(selector);
if (!el) return;
el.innerHTML = html;
}
alloy("sendEvent", {
personalization: { decisionScopes: ["discount"] },
xdm: { }
}).then(({ propositions = [] }) => {
const discount = findPropositionByScope(propositions, "discount");
if (!discount) return { propositions, rendered: [] };
const htmlItem = discount.items?.find(
(i) => i.schema === "https://ns.adobe.com/personalization/html-content-item"
);
if (!htmlItem) return { propositions, rendered: [] };
renderHtmlInto("#daily-special", htmlItem.data.content);
return { propositions, rendered: [discount] };
});
3. Enregistrer les événements d’affichage pour ce que vous avez rendu
Pour les propositions rendues manuellement, les événements d’affichage sont enregistrés par le biais d’appels sendEvent qui font référence aux propositions rendues.
function toDisplayPayload(propositions) {
return propositions.map((p) => ({
id: p.id,
scope: p.scope,
scopeDetails: p.scopeDetails
}));
}
// Example: record display for the propositions you actually rendered.
alloy("sendEvent", {
xdm: {
_experience: {
decisioning: {
propositions: toDisplayPayload(renderedPropositions),
propositionEventType: { display: 1 }
}
}
}
});
Voir Gérer les événements d’affichage pour plus d’informations.
4. Rendu
Lorsque les modifications de l’interface utilisateur nécessitent un nouveau rendu, réexécutez votre logique de rendu manuel par rapport aux données de proposition que vous avez mises en cache (ou récupérez à nouveau, si nécessaire). Si vous devez enregistrer un affichage pour les scénarios de nouveau rendu, voir Gérer les événements d’affichage.