Rendern von HTML-Angeboten ohne Selektoren
Verwenden Sie dieses Muster, wenn Ihre Vorschläge HTML-Inhalte enthalten, Sie jedoch angeben müssen, wo Sie es anwenden möchten (Selektor) und wie es angewendet werden soll (Aktionstyp). Dies können Sie tun, indem Sie applyPropositions mit einem vom Umfang metadata -Objekt aufrufen. Unterstützte actionType sind setHtml, replaceHtml und appendHtml.
1. Verwalten von Flackern (optional)
Wenn Sie Inhalte beim Rendern ausblenden, sind Sie dafür verantwortlich, sie nach Abschluss des Renderings anzuzeigen. Weitere Informationen finden unter verwalten.
2. Anfordern von Vorschlägen für die Bereiche, die Sie rendern möchten
alloy("sendEvent", {
personalization: {
decisionScopes: ["discount", "salutation"]
},
xdm: { }
}).then(({ propositions = [] }) => {
// Render in the next step
});
Weitere Informationen finden Sie unter personalization.decisionScopes .
3. Rendern von Angeboten mit applyPropositions Metadaten
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. Anzeigen von Ereignissen für gerenderte Vorschläge aufzeichnen
Anzeigeereignisse werden beim Aufruf von applyPropositions nicht automatisch gesendet. Verwenden Sie nach Abschluss des Renderings einen sendEvent-Aufruf, der auf die gerenderten Vorschläge verweist:
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 }
}
}
}
});
});
});
Weitere Informationen Sie unter von Anzeigeereignissen .
sendEvent implementiert.5. Rendern
Wenn Ihre Implementierung später erneut gerendert werden muss (z. B. in Single Page Applications), rufen Sie applyPropositions mit denselben Vorschlägen und Metadaten erneut auf:
alloy("applyPropositions", {
propositions,
metadata: {
discount: { selector: "#daily-special", actionType: "replaceHtml" }
}
});
Wenn Sie ein Anzeigeereignis für dieses erneute Rendern aufzeichnen müssen, finden Sie weitere Informationen unter Verwalten von Anzeigeereignissen.