Feasibility of Using Recommendations with SPA VEC | Community
Skip to main content
S
SrinivasGa2
August 1, 2025
Question

Feasibility of Using Recommendations with SPA VEC

  • August 1, 2025
  • 1 reply
  • 311 views

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.

 

 

    1 reply

    pradnya_balvir
    Community Advisor
    pradnya_balvirCommunity Advisor
    Community Advisor
    August 4, 2025

    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

    Terms & ConditionsAccessibility statement

    Loading footer...