Render DOM action propositions automatically

Use this pattern when your personalization response includes proposition items with the schema:

https://ns.adobe.com/personalization/dom-action

These items typically include a selector and an action type (for example, setHtml) that the Web SDK can apply automatically when renderDecisions is enabled.

1. Manage flicker (optional)

If you need to prevent flicker while personalized content is applied, use the recommended flicker management approach for your implementation. See Manage flicker for available options.

2. Request and render decisions noted for automatic rendering

Set renderDecisions to true when calling the sendEvent command. The renderDecisions property defaults to false when omitted.

alloy("sendEvent", {
  renderDecisions: true,
  xdm: {
    web: {
      webPageDetails: {
        name: "home"
      }
    }
  }
});

Optionally, if you need to request specific placements, include personalization.decisionScopes:

alloy("sendEvent", {
  renderDecisions: true,
  personalization: {
    decisionScopes: ["hero-banner", "recommendations"]
  },
  xdm: { }
});

See the personalization object in the sendEvent command for more information.

3. Display events

If you set renderDecisions to true and either set personalization.sendDisplayEvent to true or omit it, the Web SDK sends display events immediately after personalization is rendered.

alloy("sendEvent", {
  renderDecisions: true,
  personalization: {
    // sendDisplayEvent defaults to true when omitted
  },
  xdm: { }
});

See Manage display events for alternate options that meets your implementation’s needs, such as when using Top and bottom page events.

4. SPA view changes and re-rendering

For single-page applications, include a viewName on view-changing events.

alloy("sendEvent", {
  renderDecisions: true,
  xdm: {
    web: {
      webPageDetails: {
        viewName: "cart"
      }
    }
  }
});

If your SPA re-renders UI for the same view without a new decision fetch, you can re-apply the previously returned propositions:

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

See applyPropositions for more information.