提案を手動でレンダリング
このパターンは、提案アイテムの適用方法を完全に制御する必要がある場合に使用します。 例えば、JSON コンテンツから複雑なUIを作成する場合、またはレンダリングする前にカスタムビジネスルールを適用する場合などです。
1. リクエストの提案
alloy("sendEvent", {
personalization: {
decisionScopes: ["salutation", "discount"]
},
xdm: { }
}).then(({ propositions = [] }) => {
// Render in the next step
});
詳しくは、sendEvent コマンドのpersonalization オブジェクトを参照してください。
2. 提案アイテムのレンダリング(例)
手動で提案をレンダリングする場合、様々な形式やシェイプを使用できます。 次の例は、スコープ別に提案を検索し、最初に検索したHTML コンテンツ項目を適用する最小限の例です。
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] };
});
IMPORTANT
HTMLをレンダリングする場合は、環境に対して安全であることを確認してください。 コンテンツのレンダリングをセキュリティの境界として扱う(サニタイズ、信頼できるソース、CSPに関する考慮事項)。
3. レンダリングした内容の表示イベントを記録
手動でレンダリングされた提案の場合、表示イベントは、レンダリングされた提案を参照するsendEvent呼び出しを通じて記録されます。
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 }
}
}
}
});
詳しくは、表示イベントの管理を参照してください。
4. 再レンダリング
UIの変更で再レンダリングが必要な場合は、キャッシュした提案データに対して手動レンダリングロジックを再実行します(必要に応じて再度取得します)。 再描画シナリオの表示を記録する必要がある場合は、表示イベントの管理を参照してください。
recommendation-more-help
experience-platform-help-collection