Embedding Product Recommendations with a Code Snippet using a Representational State Transfer (REST) Application Programming Interface (API) in SAP Cloud Platform
SAP Hybris Marketing Cloud provides an OData service that enables the integration of product recommendations into client applications across all sales channels.
For more information about the OData service, see the SAP Hybris Marketing Extensibility Guide.
Please note that the source code is provided as a code sample which can be used as is or enhanced to fulfill expected behavior. The instructions and source code is available in the following link.
To deploy the application, you need the following:To deploy the application, you need the following:
- 1702 version or later of SAP Hybris Marketing Cloud or SAP Hybris Marketing
- An SAP Cloud Platform account
Code Snippet Installation
- Download the reco.zip file.
- Extract the .zip file into a folder. For example, [WORKING_DIR]/reco.
- Import [WORKING_DIR] /reco as a project in Eclipse
- Configure the application by editing the property recommendations.properties. (see section below)
- Maintain public/css/reco-custom-arrows.css with a link to your arrow images
- To upload products at startup, include an import.sql script file under src/main/resources. (see section below)
- Right-click the project in Eclipse and Configure a Convert to Maven project.
- On the command line, run the following:
mvn install:install-file -Dfile="[WORKING_DIR]/reco/lib/recocache-1.0.jar" -DgroupId=com.reco.cache -DartifactId=recocache -Dversion=1.0 -Dpackaging=jar
- Test the application locally by running mvn spring-boot:run, or create the deployable .war file by running mvn clean package.
- To deploy to SAP Cloud Platform, upload the /target/reco.war file as a Java application in the SAP Cloud Platform Cockpit and start the application.
Configuring the Application
Before deploying the .war file to the SAP Cloud Platform, configure the following:
This file contains the recommendations specific configuration parameters including:
- Connection: URL and credentials to the SAP Hybris Marketing Cloud or SAP Hybris Marketing server.
- Product Settings: Item type used to upload products to SAP Hybris Marketing Cloud or SAP Hybris Marketing server. (CUAN product facet)
- User Settings: Origin of contact ID that is used to contact SAP Hybris Marketing Cloud or SAP Hybris Marketing server. (user origin facet)
- Interactions: Interaction type and enablement of external tracking. (post impressions explicitly)
- Impressions: Impression posting settings.
Note: The connection settings are mandatory.
You can upload products on start up using the following SQL script:
insert into PRODUCT(id, name, description, price, targetUrl, imageUrl, thumbUrl) values ('prod_id','prod_short_desc','prod_long_desc',price, 'https://prod_detail_page_url','https://prod_main_image_url', 'https://prod_thumbnail_image_url ');
Consuming the Application
To provide product recommendations on a Web shop home page, the following code snippet can be embedded into a web page:
<script src="https://[YOUR_SERVER_NAME]/reco/snippets/recoAll.js"></script> <div id="carouselReco1" data-scenarioId="SAP_TOP_SELLER_HOME_PAGE" data-carouselId="myCarouselId1" data-userId="" data-cookieId data-leadingItems="" data-basketItems="" data-context="" data-useProductURL="false" data-server="https://[YOUR_SERVER_NAME]" data-serverClient="[YOUR_BACKEND_DESTINATION_ALIAS]"> <h1 class="headerTitle">Top Sellers</h1> </div>
Here are the descriptions of the different parameters:
- data-scenarioId: The name of the recommendation scenario to be consumed from Hybris Marketing
- data-carouselId: The Id of the div where product recommendation will be inserted
- data-userId: The user ID of the user logged on. (Optional – only if known)
- data-cookieId: The cookie ID of the user. (Optional)
- data-leadingItems: The leading products. (Optional – comma separated)
- data-basketItems: The products in the basket. (Optional – comma separated)
- data-context: The additional context. (Optional)
- data-useProductURL: Use the current window.location.href as the leading item.
- data-server: The URL to your SAP Cloud Platform server.
- data-serverClient: The alias defined in the recommendation.properties.
To provide product recommendations on a Web shop product detail page, the following code snippet can be embedded:
<script src="https://[YOUR_SERVER_NAME]/reco/snippets/recoAll.js"></script> <div id="carouselReco1" data-scenarioId=" SAP_CROSS_SELL_WEB_PRODUCT_DETAILS" data-carouselId="myCarouselId1" data-userId="" data-leadingItems="[ID of your leading object]" data-basketItems="" data-context="" data-useProductURL="false" data-server="https://[YOUR_SERVER_NAME]" data-serverClient="[YOUR_BACKEND_DESTINATION_ALIAS]"> <h1 class="headerTitle">Cross-Sell</h1> </div>