Headless

You can integrate Product Recommendations in a headless storefront using either PWA Studio or a custom frontend technology, such as React or Vue JS.

Product Recommendations require behavioral and catalog data to operate. The catalog data sync process remains unchanged in a headless implementation, but changes are needed for behavioral data collection.

To integrate Product Recommendations in a headless storefront, you must:

  1. Send behavioral data to Adobe Sensei to analyze and compute Product Recommendation results. You can also send additional data to enable product recommendation metrics reporting.

  2. Fetch product recommendation results and render those results on the page.

You can perform both of these actions using the available SDKs as described in the following workflow.

  1. Install the Product Recommendations module.

  2. Install and use the Adobe Commerce Storefront Event SDK to fire the behavioral events.

    The minimum required events to return Product Recommendations results:

    Event Category
    view product
    add-to-cart product
    place-order checkout

    To enable metrics reporting, the following additional events are required:

    Event Category
    impression-render recommendation-unit
    view recommendation-unit
    rec-click recommendation-unit
    rec-add-to-cart-click recommendation-unit (if an add to cart button is present in the recommendations template)
  3. When the events are fired, use the Adobe Commerce Storefront Event Collector to handle the events and send them to Adobe Sensei.

  4. After the behavioral data is collected, you can create Product Recommendations in the Admin.

  5. Use the Recommendations SDK to fetch the recommendation units on the storefront. The SDK returns necessary product data to render recommendation units on a page.

On this page