在Web SDK中配置页面顶部和底部事件
创建对象：
- 开发人员
当您希望向客户提供个性化体验时，网页的加载时间至关重要。
为了优化加载时间并尽快提供个性化，Web SDK支持配置页面事件的顶部和底部。
页面事件的顶部和底部描述了一种方法，该方法以异步方式加载页面中的各种元素，同时保持页面加载时间最短。
此配置可将用户加载个性化内容之前必须等待的时间减至最少。
在量度准确性方面，Adobe Analytics可以忽略页面事件的顶部，因为仅记录一次页面点击（页面事件的底部），因此可以更准确地记录量度。
用例
一家体育服装零售商希望为其购物者提供个性化体验，同时最大限度地减少用户访问其网站时的摩擦，同时能够准确收集访客量度。
通过使用Web SDK中的页面顶部事件和页面底部事件，营销团队能够以最佳方式配置其个性化投放：
- Web SDK会发送个性化请求，该请求会在页面开始加载后立即加载。 这是页面顶部事件。
- 当页面完成加载时，将记录一个页面查看事件。 在页面加载过程的稍后阶段，将发生这种情况。 这是页面底部事件。
alloy("sendEvent", {
type: "decisioning.propositionFetch",
renderDecisions: true,
personalization: {
sendDisplayEvent: false
}
});
| 参数 | 必需/可选 | 描述 |
|---|---|---|
type | 必需 | 将此参数设置为decisioning.propositionFetch。 此特殊事件类型告知Adobe Analytics删除此事件。 使用Customer Journey Analytics时，您还可以设置过滤器以删除这些事件。 |
renderDecisions | 必需 | 将此参数设置为true。 此参数可告知Web SDK呈现由Edge Network返回的决策。 |
personalization.sendDisplayEvent | 必需 | 将此参数设置为false。 这将停止发送显示事件。 |
页面底部事件示例
以下代码示例展示了页面底部事件配置，该配置为自动在页面上呈现，但在页面🔗事件的顶部禁止显示的主张发送显示事件。
NOTEalloy("sendEvent", {
personalization: {
includeRenderedPropositions: true
},
xdm: { ... }
});
personalization.includeRenderedPropositionstrue。 这将允许发送在页面事件顶部禁止显示的显示事件。xdm以下代码示例展示了页面底部事件配置，该配置为在页面上手动呈现的建议（即，对于自定义决策范围或表面）发送显示事件。
NOTEalloy("sendEvent", {
xdm: {
... // Optional bottom of page event data
_experience: {
decisioning: {
propositions: propositions.map(function(p) {
return {
id: p.id,
scope: p.scope,
scopeDetails: p.scopeDetails
};
}),
propositionEventType: {
display: 1
}
}
}
}
});
xdm._experience.decisioning.propositionsID、scope和scopeDetails。 请参阅有关如何手动渲染个性化的文档，以了解有关如何记录手动渲染内容的显示事件的更多信息。 手动呈现的个性化内容必须包含在页面点击的底部。xdm._experience.decisioning.propositionEventTypedisplay: 1。xdm具有顶部和底部页面点击量的单页应用程序
以下示例包括所需xdm.web.webPageDetails.viewName参数的相加。 这就是它成为单页应用程序的原因。 此示例中的viewName是页面加载时加载的视图。
// Top of page, render decisions for the "home" view.
alloy("sendEvent", {
type: "decisioning.propositionFetch",
renderDecisions: true,
personalization: {
sendDisplayEvent: false
},
xdm: {
web: {
webPageDetails: {
viewName: "home"
}
}
}
});
// Bottom of page, send display events for the items that were rendered.
// Note: You need to include the viewName in both top and bottom of page so that the
// correct view is rendered at the top of the page, and the correct view is recorded
// at the bottom of the page.
alloy("sendEvent", {
personalization: {
includeRenderedPropositions: true
},
xdm: {
...,
web: {
webPageDetails: {
viewName: "home"
}
}
}
});
在此示例中，无需执行页面拆分的顶部/底部，因为已获取页面的个性化设置。
alloy("sendEvent", {
renderDecisions: true,
xdm: {
...,
web: {
webPageDetails: {
viewName: "cart"
}
}
}
});
如果您仍需要延迟页面点击的底部，则可以使用applyPropositions作为页面点击的顶部。 由于无需获取任何个性化设置且无需记录Analytics数据，因此无需向Edge Network发出请求。
// top of page, render the decisions already fetched for the "cart" view.
alloy("applyPropositions", {
viewName: "cart"
});
// bottom of page, send display events for the items that were rendered.
// Note: You need to include the viewName in both top and bottom of page so that the
// correct view is rendered at the top of the page, and the correct view is recorded
// at the bottom of the page.
alloy("sendEvent", {
personalization: {
includeRenderedPropositions: true
},
xdm: {
...,
web: {
webPageDetails: {
viewName: "cart"
}
}
}
});
GitHub示例
在此地址找到的示例演示了如何使用Experience Platform和Web SDK在页面顶部请求个性化，并在底部发送分析指标。 您可以下载示例并在本地运行它以了解页面顶部和底部事件的工作原理。