Feasibility of Using Recommendations with SPA VEC

[SrinivasGa2]

Hi there,

I came across the documentation stating that Recommendation activities are not supported when using the SPA Visual Experience Composer (SPA VEC).

Document reference - https://experienceleague.adobe.com/en/docs/target/using/experiences/spa-visual-experience-composer

I would like to confirm whether it is technically feasible to implement Recommendations in a Single Page Application environment. If not supported directly, are there any recommended workarounds or best practices to achieve this functionality?

Appreciate any guidance or implementation references from the community.

[pradnya_balvir]

Hi @SrinivasGa2 ,

The VEC was originally designed for multi-page apps, but Adobe has introduced support for SPAs using the Web SDK or at.js 2.x. However, Recommendations with VEC in SPAs require manual handling of view changes and mbox updates.

Best Practice:

Use triggerView() or applyOffers()

• In SPAs, Adobe Target doesn't reload automatically on route changes.

• You must explicitly trigger view changes:

adobe.target.triggerView("productDetailPage");

Custom Code for Recommendation Placements

• Recommendations in SPAs often require custom code via the target-global-mbox or specific mboxes (not just drag-drop via VEC).

• You may need to create a form-based activity instead of relying solely on the VEC UI.

Ensure Correct Page Load Signal

• Make sure your Web SDK (or at.js) is sending correct signals for each SPA route.

• Use the sendEvent method in Web SDK:

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

Predefined Mboxes for Recommendations

• You should define dedicated mboxes for Recommendations like recommendation-slot-1.

• On each SPA view, fire the mbox and pass required params (e.g. entity.id, categoryId, user context).

Single Page App Library Settings in Target

• When configuring the activity in Adobe Target, enable SPA support in the VEC settings.

• Go to Admin > Implementation > Configure at.js settings > Enable "Single Page Application support".

Recommendations:

For complex or scalable Recommendation use in SPAs:

• Use Form-based activities over VEC.

• Implement via Web SDK and trigger sendEvent on route changes.

• Have developers manage mboxes programmatically for full control.

Thanks.

Pradnya