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.
Custom and headless integrators should refer to these Luma and PWA instructions as a suggested implementation. There are many ways of implementing Product Recommendations into headless solutions and this documentation does not cover all scenarios. Integrators must cover eventing, design, and testing for their implementations.
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:
-
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.
-
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.
-
Install the Product Recommendations module.
-
Install and use the Adobe Commerce Storefront Event SDK to fire the behavioral events.
The minimum required events to return Product Recommendations results:
table 0-row-2 1-row-2 2-row-2 3-row-2 Event Category viewproduct add-to-cartproduct place-ordercheckout To enable metrics reporting, the following additional events are required:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 Event Category impression-renderrecommendation-unit viewrecommendation-unit rec-clickrecommendation-unit rec-add-to-cart-clickrecommendation-unit (if an “Add to cart” button is present in the recommendations template) -
When the events are fired, use the Adobe Commerce Storefront Event Collector to handle the events and send them to Adobe Sensei.
-
After the behavioral data is collected, you can create Product Recommendations in the Admin.
-
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.