Adobe Commerce only. Learn more.

Integrate Product Recommendations into your Headless Storefront

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 also can 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 below.

The following workflow describes how to integrate Product Recommendation in a headless storefront.

  1. Install the Product Recommendations module.

  2. Install and use the Storefront Events SDK to fire the behavioral events.

    The minimum required events to enable Product Recommendations are:

    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 Storefront Events 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.