Web SDKでの表示イベントの管理
ディスプレイイベントは、パーソナライゼーションまたは分析サービスに、パーソナライズされた特定のコンテンツがユーザーに表示されたことを伝えます。 表示イベントを送信すると、ダウンストリームシステムが リクエストされたコンテンツと 実際に表示されたコンテンツ を区別できるので、レポートの精度が向上します。
表示イベントを自動的に送信する
自動表示イベントは、通常、最も単純なオプションです。 これらは、Web SDKがsendEvent応答の対象コンテンツのレンダリングを完了した直後に送信されます。これにより、レポート精度が向上します。
表示イベントを自動的に送信するには、renderDecisionsをtrueに設定し、personalization.sendDisplayEventをtrueに設定するsendEvent呼び出しを使用します（または、trueがデフォルトであるため、省略します）。
alloy("sendEvent", {
renderDecisions: true,
personalization: { }, // sendDisplayEvent defaults to true
xdm: {
web: {
webPageDetails: {
name: "home"
}
}
}
});
applyPropositionsを使用する場合を含む）、sendEventを使用して表示イベントを明示的に送信する必要があります。後続のsendEvent呼び出しで表示イベントを送信する
後のsendEvent呼び出しに表示イベントを含めることは、パーソナライゼーションのリクエスト時に使用できない追加のページ読み込みデータを添付する場合に便利です。 トップおよびボトム ページ イベント を実装する場合によく使用されます。 この方法でディスプレイイベントを正しく実装すると、Adobe Analyticsの直帰率に関する問題を回避できます。
-
最初の
sendEvent呼び出し（多くの場合、ページの上部）で、コンテンツをリクエストおよびレンダリングしますが、renderDecisionsをtrueに、personalization.sendDisplayEventをfalseに設定して、自動表示イベントを抑制します。code language-js alloy("sendEvent", { renderDecisions: true, personalization: { sendDisplayEvent: false }, xdm: { web: { webPageDetails: { name: "home" } } } }); -
後で（多くの場合、ページの下部で）、
personalization.includeRenderedPropositionsをtrueに設定して、前回のリクエスト以降にレンダリングされた提案の表示イベントを含むXDM ペイロードでsendEventを呼び出します。code language-js alloy("sendEvent", { personalization: { includeRenderedPropositions: true }, xdm: { // Add any additional page load telemetry you want to send here web: { webPageDetails: { name: "home" } } } });
includeRenderedPropositionsを使用する場合は、表示が抑制された自動的にレンダリングされた提案のみが含まれます。手動でレンダリングされた提案の表示イベントを送信する
コンテンツを自分でレンダリングする場合（完全に手動レンダリングまたはapplyPropositionsを使用する場合）、sendEvent コマンドを使用して表示イベントを明示的に送信する必要があります。 次のプロパティを含むXDM ペイロードでsendEventを呼び出します：
- レンダリングされた提案を含む
_experience.decisioning.propositions’id、scope、およびscopeDetails _experience.decisioning.propositionEventType.displayが1に設定されました
次の2つの例では、このヘルパー関数を使用して表示イベント XDM ペイロードを構築します。
function buildDisplayEventXdm(renderedPropositions) {
return {
eventType: "decisioning.propositionDisplay",
_experience: {
decisioning: {
propositions: renderedPropositions.map(({ id, scope, scopeDetails }) => ({
id,
scope,
scopeDetails
})),
propositionEventType: { display: 1 }
}
}
};
}
次の例では、表示イベントで手動レンダリングを使用しています。
function renderExample(propositions) {
// Your custom logic here. Return ONLY the propositions that were actually rendered.
// For example: return [propositions[0]];
return [];
}
alloy("sendEvent", {
personalization: { decisionScopes: ["discount"] },
xdm: { }
}).then(({ propositions = [] }) => {
const renderedPropositions = renderExample(propositions);
if (!renderedPropositions.length) { return; }
return alloy("sendEvent", { xdm: buildDisplayEventXdm(renderedPropositions) });
});
次の例では、表示イベントでapplyPropositions コマンドを使用しています。 sendEvent、applyPropositions、次のsendEventが連鎖しています：
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 = [] }) => {
if (!renderedPropositions.length) { return; }
return alloy("sendEvent", { xdm: buildDisplayEventXdm(renderedPropositions) });
});
回避すべきよくある間違い
- レンダリングが完了する前に表示イベントを送信：自動レンダリングが完了した後、
applyPropositionsが解決した後、または手動レンダリングロジックが完了した後に表示イベントを送信します。 - レンダリングしなかった提案の表示イベントを送信：実際にユーザーに表示された提案のみを含めます。
- ドロップ
scopeDetails：表示イベントの送信時に、提案オブジェクトからscopeDetailsを含めます。