Configure top and bottom of page events in Web SDK

Configure a Send event action in the rule that fires at the top of the page. Enable Use guided events, then select Request personalization. This option locks ‘Type’ to ‘Decisioning Proposition Fetch’, ‘Render visual personalization decisions’ to enabled, and ‘Automatically send a display event’ to disabled.

To set these fields manually instead, leave Use guided events disabled and configure each field yourself.

Configure a Send event action in the rule that fires at the bottom of the page. Enable Use guided events, then select Collect analytics. This option locks ‘Include rendered propositions’ to enabled.

To set this field manually instead, leave Use guided events disabled and enable Include rendered propositions directly. Optionally, populate the XDM field with an XDM object data element that carries your page data.

The ‘Use guided events’ option does not cover this scenario, so configure the action manually:

1. Create an XDM object (or Variable) data element that populates _experience.decisioning.propositions with each rendered proposition’s id, scope, and scopeDetails, and sets _experience.decisioning.propositionEventType.display to 1. See Manage display events for more information.

2. In the Send event action for the bottom of page rule, leave Use guided events disabled and reference the data element from the XDM field.

The top call requests personalization for the home view without recording an Analytics hit or firing display events. The bottom call records the page view and fires the suppressed display events. Include the same viewName in both calls so that the view is recorded consistently.

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

1. Create an XDM object data element that sets web.webPageDetails.viewName to the view’s name (for example, home).

2. Configure a top of page Send event action: enable Use guided events, select Request personalization, and reference the data element in the XDM field.

3. Configure a bottom of page Send event action: enable Use guided events, select Collect analytics, and reference the same data element in the XDM field so that the viewName matches in both events.

1. Create an XDM object data element that sets web.webPageDetails.viewName to the new view’s name (for example, cart).

2. On the view change, configure a single Send event action: leave Use guided events disabled, enable Render visual personalization decisions, and reference the data element in the XDM field.

Call applyPropositions at the top of the page to render the cached propositions for the new view. Then call sendEvent at the bottom of the page with includeRenderedPropositions: true so that the suppressed display events fire.

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

1. Create an XDM object data element that sets web.webPageDetails.viewName to the new view’s name (for example, cart).

2. For the top of page event, configure an Apply propositions action and set the View name field to the view’s name (for example, cart). This action renders the already-fetched propositions without contacting the Edge Network.

3. For the bottom of page event, configure a Send event action: enable Use guided events, select Collect analytics, and reference the data element in the XDM field.