Product Recommendations

You can integrate Product Recommendations powered by Adobe Sensei into your PWA Studio storefront.

Integration overview

Product Recommendations for PWA Studio

Adobe's Product Recommendations powered by Adobe Sensei is a feature backed by several SaaS services. The Store side includes your PWA storefront, which contains the event collector and recommendations layout template, and the backend, which includes the GraphQL endpoints, SaaS Export module, and the Admin UI.

After you install the Product Recommendations PWA extension on your store, it will start sending behavioral data to Adobe Sensei with no additional setup. Adobe Sensei processes this behavioral data along with the catalog data from the backend and calculates the product associations leveraged by the recommendations service. At this point, the merchant can create and manage recommendation units from the Adobe Commerce Admin UI then fetch those product recommendation units from their PWA storefront.

Install the Product Recommendations module

Product Recommendations support on PWA requires installing the venia-product-recommendations package and the Product Recommendations module for Adobe Commerce.

The venia-product-recommendations package requires PWA Studio 10.0.0 or later.

You can install the PWA venia-product-recommendations package from the NPM registry:

npm install @magento/venia-product-recommendations
Copied to your clipboard
npm install @magento/venia-product-recommendations

This package contains storefront functionality to collect required behavioral data and render the recommendations. Some recommendation types use behavioral data from your shoppers to train machine learning models that build personalized recommendations. Other recommendation types use catalog data only and do not use any behavioral data. See the user guide to learn how Adobe Sensei trains machine learning models that results in higher quality recommendations.

The backend functionality is provided by the Product Recommendations module for Adobe Commerce.

Additionally, you need to install the module-data-services-graphql module that expands the application's existing GraphQL coverage to include fields required for storefront behavioral data collection.

composer require magento/module-data-services-graphql
Copied to your clipboard
composer require magento/module-data-services-graphql

Create recommendation units

Creating a product recommendation unit for your PWA storefront is the same as creating one for a theme. When you create a recommendation unit in the Admin UI panel, you will need to place components that render product recommendations on appropriate storefront pages. You will do this only once per supported page type.

Render recommendations

To control the recommendation unit placement on your PWA storefront, use the local intercept file. See the extensibility framework documentation to learn more. To render the recommendation unit on your PWA storefront, use one of the methods described below.

Venia UI component

The Recommendations component is part of the venia-product-recommendations package. It contains React components that do the following:

Collect and send behavioral data to Adobe Sensei
Fetch recommendations from the recommendations service
Render the recommendation unit to your storefront page

Example

//Render recommendations using visual component
import {
  VeniaProductRecommendations,
  PageTypes,
} from "@magento/venia-product-recommendations";

return <VeniaProductRecommendations pageType={PageTypes.CMS} />;
Copied to your clipboard
//Render recommendations using visual component
import {
  VeniaProductRecommendations,
  PageTypes,
} from "@magento/venia-product-recommendations";

return <VeniaProductRecommendations pageType={PageTypes.CMS} />;

Fetch data only

If you are not using the venia-product-recommendations package, you can call the recommendations service and receive a JSON payload.

Example

import { PageTypes } from "@magento/venia-product-recommendations";
import useRecsData from "@magento/venia-product-recommendations/lib/hooks/useRecsData";

const { data, error, isLoading } = useRecsData({ pageType: Pagetypes.CMS });
Copied to your clipboard
import { PageTypes } from "@magento/venia-product-recommendations";
import useRecsData from "@magento/venia-product-recommendations/lib/hooks/useRecsData";

const { data, error, isLoading } = useRecsData({ pageType: Pagetypes.CMS });