DOM アクション提案を自動的にレンダリング
パーソナライゼーションの応答に、スキーマに提案項目が含まれている場合は、このパターンを使用します。
https://ns.adobe.com/personalization/dom-action
これらの項目には、通常、renderDecisionsが有効になっている場合にWeb SDKが自動的に適用できるセレクターとアクションタイプ(例:setHtml)が含まれます。
1. ちらつきの管理(オプション)
パーソナライズされたコンテンツの適用中にちらつきを防止する必要がある場合は、推奨されたちらつき管理アプローチを実装に使用します。 使用可能なオプションについては、ちらつきの管理を参照してください。
2. 自動レンダリング用に記録されたリクエストとレンダリングの決定
sendEvent コマンドの呼び出し時にrenderDecisionsをtrueに設定します。 省略すると、renderDecisions プロパティはデフォルトでfalseになります。
alloy("sendEvent", {
renderDecisions: true,
xdm: {
web: {
webPageDetails: {
name: "home"
}
}
}
});
オプションとして、特定のプレースメントをリクエストする必要がある場合は、personalization.decisionScopesを含めます。
alloy("sendEvent", {
renderDecisions: true,
personalization: {
decisionScopes: ["hero-banner", "recommendations"]
},
xdm: { }
});
詳しくは、sendEvent コマンドのpersonalization オブジェクトを参照してください。
3. 表示イベント
renderDecisionsをtrueに設定し、personalization.sendDisplayEventをtrueに設定するか省略した場合、パーソナライゼーションのレンダリング直後にWeb SDKから表示イベントが送信されます。
alloy("sendEvent", {
renderDecisions: true,
personalization: {
// sendDisplayEvent defaults to true when omitted
},
xdm: { }
});
ページの上部と下部のイベント を使用する場合など、実装のニーズを満たす代替オプションについては、表示イベントの管理を参照してください。
4. SPA ビューの変更と再レンダリング
単一ページアプリケーションの場合は、表示を変更するイベントにviewNameを含めます。
alloy("sendEvent", {
renderDecisions: true,
xdm: {
web: {
webPageDetails: {
viewName: "cart"
}
}
}
});
SPAが新しい決定フェッチなしで同じビューのUIを再レンダリングする場合は、以前に返された提案を再適用できます。
let lastPropositions = [];
alloy("sendEvent", {
renderDecisions: true,
xdm: {
web: { webPageDetails: { viewName: "cart" } }
}
}).then(({ propositions = [] }) => {
lastPropositions = propositions;
});
// Later, after a UI re-render:
alloy("applyPropositions", {
propositions: lastPropositions
});
詳しくは、applyPropositionsを参照してください。
applyPropositions コマンドは、表示イベントを自動的に送信しません。 再描画シナリオの「表示」を記録する必要がある場合は、表示イベントの管理を参照してください。