선택기 없이 HTML 오퍼 렌더링
제안에 HTML 컨텐츠가 포함되어 있지만 적용할 위치(선택기)와 적용 방법(작업 유형)을 제공해야 하는 경우 이 패턴을 사용하십시오. 범위를 기준으로 applyPropositions 개체를 사용하여 metadata을(를) 호출하여 이 작업을 수행할 수 있습니다. 지원되는 actionType 값은 setHtml, replaceHtml 및 appendHtml입니다.
1. 플리커 관리(선택 사항)
렌더링하는 동안 컨텐츠를 숨기면 렌더링이 완료된 후 표시할 책임이 있습니다. 자세한 내용은 깜박임 관리를 참조하십시오.
2. 렌더링하려는 범위에 대한 제안 요청
alloy("sendEvent", {
personalization: {
decisionScopes: ["discount", "salutation"]
},
xdm: { }
}).then(({ propositions = [] }) => {
// Render in the next step
});
자세한 내용은 personalization.decisionScopes을(를) 참조하십시오.
3. applyPropositions 메타데이터로 오퍼 렌더링
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. 렌더링된 제안에 대한 표시 이벤트 기록
applyPropositions을(를) 호출할 때 디스플레이 이벤트가 자동으로 전송되지 않습니다. 렌더링이 완료된 후 렌더링된 제안을 참조하는 sendEvent 호출을 사용합니다.
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 }
}
}
}
});
});
});
자세한 내용은 디스플레이 이벤트 관리를 참조하십시오.
TIP
상위 및 하위 페이지 이벤트를 사용하는 경우 일반적으로 이 "레코드 표시" 호출은 하위
sendEvent 호출에서 구현됩니다.5. 다시 렌더링
구현이 나중에 다시 렌더링해야 하는 경우(예: 단일 페이지 애플리케이션) 동일한 제안 및 메타데이터로 applyPropositions을(를) 다시 호출하십시오.
alloy("applyPropositions", {
propositions,
metadata: {
discount: { selector: "#daily-special", actionType: "replaceHtml" }
}
});
다시 렌더링할 표시 이벤트를 기록해야 하는 경우 표시 이벤트 관리를 참조하십시오.
recommendation-more-help
1ae86b30-e55e-49c1-ab11-9d0356a5f3e1