You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Nov 19, 2024. It is now read-only.
Copy file name to clipboardExpand all lines: src/recommendations/headless.md
+23-7Lines changed: 23 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -4,18 +4,34 @@ title: Integrate Product Recommendations into your Headless Storefront
4
4
ee_only: True
5
5
---
6
6
7
-
You can integrate Product Recommendations in a headless storefront using either [PWA Studio](https://magento.github.io/pwa-studio/) or another frontend application, such as Next.js.
7
+
You can integrate Product Recommendations in a headless storefront using either [PWA Studio](https://magento.github.io/pwa-studio/) or a custom frontend technology, such as React or Vue JS.
8
8
9
-
If using another headless storefront, you use the Commerce Storefront SDKs to send or request data. These SDKs allow you to control the storefront event publishing, collecting, and fetching.
9
+
Product Recommendations require [behavioral and catalog data ](https://devdocs.magento.com/recommendations/product-recs.html#types-of-data)to operate. The catalog data sync process remains unchanged in a headless implementation, but changes are needed for behavioral data collection.
10
10
11
-
Use the following workflow to attach your headless storefront to the Product Recommendations backend.
11
+
The roles of the custom storefront using Product Recommendations are two-fold:
12
+
1. send behavioral data to Adobe Sensei so that these events can be analyzed to compute Product Recommendation results; additional data can be sent to enable product recommendation [metrics reporting](https://docs.magento.com/user-guide/marketing/recommendation-metrics.html)
13
+
2. fetch product recommendation results and render them on the page
14
+
15
+
Both of these actions can be performed using available SDKs as described below.
16
+
17
+
Use the following workflow to integrate your headless storefront with Product Recommendations.
12
18
13
19
1.[Install the Product Recommendations]({{ page.baseurl }}/recommendations/install-configure.html) module.
14
20
15
-
1. Install and use the [Storefront Events SDK]({{ page.baseurl }}/shared-services/storefront-events-sdk.html) to trigger the behavioral events.
21
+
1. Install and use the [Storefront Events SDK]({{ page.baseurl }}/shared-services/storefront-events-sdk.html) to fire the [behavioral events](https://devdocs.magento.com/recommendations/events.html).
22
+
The minimum required events to enable product recommendations are product view, add-to-cart, and place-order.
23
+
To enable metrics reporting (link), the following additional events are required:
24
+
recommendation-unit impression-render
25
+
recommendation-unit view
26
+
recommendation-unit rec-click
27
+
recommendation-unit rec-add-to-cart-click (if an add-to-cart button is present in the Recs template)
28
+
--
29
+
30
+
31
+
<brclass="Apple-interchange-newline">
16
32
17
-
1.Install and use the [Storefront Events Collector]({{ page.baseurl }}/shared-services/storefront-event-collector.html) to send those events to Adobe Sensei.
33
+
1.When the events are fired, use the [Storefront Events Collector]({{ page.baseurl }}/shared-services/storefront-event-collector.html) as a handler to send them to Adobe Sensei.
18
34
19
-
1.[Create Product Recommendations](https://docs.magento.com/user-guide/marketing/create-new-rec.html) in the Commerce Admin.
35
+
1.Once behavioral data collection is orchestrated using above steps, the business user can [create Product Recommendations](https://docs.magento.com/user-guide/marketing/create-new-rec.html) in the Commerce Admin.
20
36
21
-
1.Install and use the [Recommendations SDK]({{ page.baseurl }}/recommendations/recs-api.html) to fetch the recommendation units on the storefront.
37
+
1.Use the [Recommendations SDK]({{ page.baseurl }}/recommendations/recs-api.html) to fetch the recommendation units on the storefront. It returns necessary product data to render recommendation units on a page.
0 commit comments