Embedding Product Recommendations with a Code Snippet using a Representational State Transfer (REST) Application Programming Interface (API) in SAP Cloud Platform

[joel_tran]

SAP Hybris Marketing Cloud provides an OData service that enables the integration of product recommendations into client applications across all sales channels.

It is possible to simplify the integration of the product recommendations into any web page by embedding a code snippet with a reference to a JavaScript library hosted on the SAP Cloud Platform. The snippet performs a REST call to SAP Cloud Platform containing context parameters to the SAP Hybris Marketing Cloud using the OData service to obtain real time context-aware product recommendations. Custom styling can be performed to allow a seamless UI integration.


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.

Prerequisites

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

1. Download the reco.zip file.


2. Extract the .zip file into a folder. For example, [WORKING_DIR]/reco.


3. Import [WORKING_DIR] /reco as a project in Eclipse


4. Configure the application by editing the property recommendations.properties. (see section below)


5. Maintain public/css/reco-custom-arrows.css with a link to your arrow images


6. To upload products at startup, include an import.sql script file under src/main/resources. (see section below)


7. Right-click the project in Eclipse and Configure a Convert to Maven project.


8. 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

   
   


9. Test the application locally by running mvn spring-boot:run, or create the deployable .war file by running mvn clean package.


10. 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:

recommendations.properties

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.

import.sql

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>