在Web SDK中配置页面顶部和底部事件

最近更新： 2026年6月17日

创建对象：

{"id":"ff6a42d2-313e-452e-93a6-792e4fad9ff8"}

在投放个性化体验时，网页的加载时间至关重要。为了最大程度地缩短用户等待个性化内容的时间，Web SDK支持配置页面事件的顶部和底部。

页面事件的顶部和底部描述了一种方法，该方法以异步方式加载页面中的各种元素，同时保持页面加载时间最短：

页面顶部事件会在页面开始加载后立即请求进行个性化。
页面完成加载时，页面事件底部会记录一次页面查看。

Adobe Analytics会忽略页面事件的顶部，这有助于更准确地记录量度，因为仅记录一次页面点击（页面事件的底部）。

您可以通过两种方式配置页面顶部和底部事件：直接调用Web SDK JavaScript库(alloy())，或在Adobe Experience Platform标记UI中使用Web SDK标记扩展。标记扩展的发送事件操作包含一个“使用引导式事件”选项，该选项为“请求个性化”（页面顶部）和“收集分析”（页面底部）方案预先配置字段值。以下每个示例都显示了这两个实施。

页面顶部事件 top-of-page

以下示例配置请求个性化的页面顶部事件，但为自动呈现建议隐藏显示事件。这些显示事件将改为随页面底部事件一起发送。

JavaScript库

code language-js
`alloy("sendEvent", { type: "decisioning.propositionFetch", renderDecisions: true, personalization: { sendDisplayEvent: false } });`

table 0-row-3 1-row-3 2-row-3 3-row-3
参数	必需/可选	描述
`type`	必需	将此参数设置为`decisioning.propositionFetch`。此特殊事件类型告知Adobe Analytics删除此事件。在使用Customer Journey Analytics时，您还可以设置过滤器以删除这些事件。有关详细信息，请参阅Adobe Analytics中的Edge Network事件类型。
`renderDecisions`	必需	将此参数设置为`true`。此参数可告知Web SDK呈现由Edge Network返回的决策。
`personalization.sendDisplayEvent`	必需	将此参数设置为`false`。此参数可停止发送显示事件。

Web SDK标记扩展

在页面顶部触发的规则中配置发送事件操作。启用使用引导式事件，然后选择请求个性化。此选项将“Type”锁定到“Decisioning Proposition Fetch”，“将可视化个性化决策”锁定为enabled，将“自动发送显示事件”锁定为disabled。

若要手动设置这些字段，请保留 禁用使用引导式事件 并自行配置每个字段。

页面底部事件示例 bottom-of-page

自动渲染的建议 bottom-auto-rendered

以下示例配置页面底部事件，该事件发送在页面上自动呈现但在页面🔗事件的顶部禁止显示的主张的显示事件。

JavaScript库

code language-js
`alloy("sendEvent", { personalization: { includeRenderedPropositions: true }, xdm: { ... } });`

table 0-row-3 1-row-3 2-row-3
参数	必需/可选	描述
`personalization.includeRenderedPropositions`	必需	将此参数设置为`true`。此参数允许发送在页面事件顶部禁止显示的显示事件。
`xdm`	可选	使用此对象可以包含您要用于页面底部事件的所有数据。

Web SDK标记扩展

在页面底部触发的规则中配置发送事件操作。启用使用引导式事件，然后选择收集分析。此选项将“Include呈现的建议”锁定为启用。

要改为手动设置此字段，请保留禁用使用引导式事件，并直接启用包括渲染的建议。或者，使用承载页面数据的XDM对象数据元素填充 XDM 字段。

手动渲染的建议 bottom-manually-rendered

以下示例配置页面底部事件，该事件为在页面上手动呈现的建议（即自定义决策范围或表面）发送显示事件。

NOTE

在此方案中，页面底部事件必须等待页面顶部事件完成，以便可以呈现和记录建议。

JavaScript库

code language-js

alloy("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
        }
      }
    }
  }
});

table 0-row-3 1-row-3 2-row-3 3-row-3
参数	必需/可选	描述
`xdm._experience.decisioning.propositions`	必需	此部分定义手动呈现的建议。必须包括建议`id`、`scope`和`scopeDetails`。有关详细信息，请参阅管理显示事件。手动呈现的个性化内容必须包含在页面事件的底部。
`xdm._experience.decisioning.propositionEventType`	必需	将此参数设置为`display: 1`。
`xdm`	可选	使用此对象可以包含您要用于页面底部事件的所有数据。

Web SDK标记扩展

“使用引导式事件”选项不包含此方案，因此请手动配置操作：

创建使用每个呈现建议的id、scope和scopeDetails填充_experience.decisioning.propositions并将_experience.decisioning.propositionEventType.display设置为1的XDM对象（或变量）数据元素。有关详细信息，请参阅管理显示事件。
在页面规则底部的发送事件操作中，保留 使用引导式事件 已禁用，并引用 XDM 字段中的数据元素。

具有页面顶部和底部事件的单页应用程序 spa-example

在单页应用程序中，必须在每次视图更改时指定视图名称，以便Web SDK在页面顶部呈现正确的个性化并在页面底部记录正确的视图。

第一页查看 spa-first-view

在此示例中，home是初始页面加载时加载的视图。

JavaScript库

顶级调用请求对home视图进行个性化，而不记录Analytics点击或触发显示事件。底部调用记录页面查看并触发禁止显示的显示事件。在两次调用中包含相同的viewName，以便一致地记录该视图。

code language-js

// 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.
alloy("sendEvent", {
    personalization: {
        includeRenderedPropositions: true
    },
    xdm: {
        ...,
        web: {
            webPageDetails: {
                viewName: "home"
            }
        }
    }
});

Web SDK标记扩展

创建将web.webPageDetails.viewName设置为视图名称（例如，home）的XDM对象数据元素。
配置页面顶部发送事件操作：启用使用引导式事件，选择请求个性化，并在 XDM 字段中引用数据元素。
配置页面底部 发送事件 操作：启用使用引导式事件，选择收集分析，并在 XDM 字段中引用相同的数据元素，以便viewName在两个事件中都匹配。

第二页视图 — 选项1 spa-second-view-option-1

在本例中，单个事件便已足够，因为已获取页面的个性化设置。

JavaScript库

code language-js
`alloy("sendEvent", { renderDecisions: true, xdm: { ..., web: { webPageDetails: { viewName: "cart" } } } });`

Web SDK标记扩展

创建将web.webPageDetails.viewName设置为新视图名称（例如，cart）的XDM对象数据元素。
在视图更改时，配置单个发送事件操作：保留禁用使用引导式事件，启用渲染可视化个性化决策，并在 XDM 字段中引用数据元素。

第二页视图 — 选项2 spa-second-view-option-2

在需要延迟页面事件的底部时（例如，当页面的分析数据在视图更改时未准备就绪时），使用此方法。分两步处理视图更改：

在页面顶部，渲染已获取的建议，而不进行Edge Network调用。
分析数据准备就绪后，发送页面底部事件。

在两次调用中包含相同的viewName，以便一致地记录该视图。

JavaScript库

在页面顶部调用applyPropositions以呈现新视图的缓存建议。然后使用includeRenderedPropositions: true调用页面底部的sendEvent，以便触发禁止显示的显示事件。

code language-js

// 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.
alloy("sendEvent", {
    personalization: {
        includeRenderedPropositions: true
    },
    xdm: {
        ...,
        web: {
            webPageDetails: {
                viewName: "cart"
            }
        }
    }
});

Web SDK标记扩展

创建将web.webPageDetails.viewName设置为新视图名称（例如，cart）的XDM对象数据元素。
对于页面事件顶部，配置应用建议操作并将 视图名称 字段设置为视图名称（例如，cart）。此操作渲染已获取的建议，而不联系Edge Network。
对于页面事件的底部，配置发送事件操作：启用使用引导式事件，选择收集分析，并在 XDM 字段中引用数据元素。

GitHub示例 github-sample

合金示例存储库🔗中的top-and-bottom示例演示如何在页面顶部请求个性化并在底部发送分析量度。下载示例并在本地运行该示例以了解页面顶部和底部事件的工作方式。此示例直接使用JavaScript库；当您在Web SDK标记扩展中配置等效规则时，同样的模式同样适用。

recommendation-more-help

experience-platform-help-collection