SAP Hybris Marketing Cloud offers OData service that allow the integration of SAP Hybris Marketing Recommendations into client applications across all sales channel.
This way, all the client application need to do is to integrate a small code snippet and provide the different context parameters. 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.
In order to deploy the application, you need the following:
- SAP Hybris Marketing Cloud / SAP Hybris Marketing 1702 or newer
- SAP Cloud Platform account
Code Snippet Installation
- Download reco.zip
- Extract reco.zip in a folder (ex: /reco)
- Import /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 project in Eclipse and Configure à Convert to Maven project
- 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, the following configuration needs to be done
This file contains the recommendations specific configuration parameters including:
- Connection: URL and credentials to the SAP Hybris Marketing Cloud / SAP Hybris Marketing server
- Product Settings: Item type used to upload Product to SAP Hybris Marketing Cloud / SAP Hybris Marketing server (cuan product facet)
- User Settings: Origin of Contact ID used to contact SAP Hybris Marketing Cloud / SAP Hybris Marketing server (user origin facet)
- Interactions: Interaction Type and enablement of external tracking (post impressions explicitly)
- Impressions: Impression posting settings
Recommendation: The connection setting have to be done at a minimum.
To upload products at start up, you can at the product data in this sql script in the following format:
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 recommendation on a Commerce 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]"> <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 recommendation will be inserted
- data-userId: The User Id of the logged on user (Optional – if known)
- data-cookieId: The cookie ID of the user (Optional)
- data-leadingItems: The leading products (comma separated) (Optional)
- data-basketItems: The product sin the basket (comma separated) (Optional)
- data-context: The additioonal context (Optional)
- data-useProductURL: Use the current window.location.href as the leading item
- data-server: The URL to your SCP server
To provide recommendation on a Commerce 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]"> <h1 class="headerTitle">Cross-Sell</h1> </div>