Integrating Ensemble AI

Last updated
Save as PDF

How to Integrate Ensemble AI

You can enable Ensemble AI using client-side JavaScript that loads a dynamic experience to show ensembles/outfits on the client site. This approach helps you to include only what is necessary for dynamic experiences, so that it does not carry unnecessary overhead on the client site like including p13n.js is not necessary on the page.

To setup Ensemble AI perform the following steps:

Inject client-side JavaScript on the page, to display the ensembles/outfits on the site.
Create styles, and generate ensembles/outfits and review them.

For more information, see Getting Started with Ensemble AI which includes procedure on "how to create Styles, and review the outfits".
Set up Ensemble AI dynamic experience on the Omnichannel Personalization.

Prerequisites

Getting API Key

Perform the following steps to get the API Key belongs to the required client site:

Log in to Omnichannel Personalization.
On the Omnichannel Personalization Dashboard page, in the left pane, click the Customer Site Name dropdown and then select the required client name.
Click available next to the Customer Site Name dropdown.

The Site-info window displays the API Key and Site Id.
From the Site-info window, copy the 'API Key' and save it to your drive. You will need this key while injecting JavaScript on the client site.

Getting API Client Key

Note: Contact Algonomy Support Team to get the API Client Key.

Prerequisites

Following are the prerequisites for enabling the ensemble ai (on the client side):

Client.js should be available.
R3_COMMON parameters should be passed as required from the documentation.
The web URL must allow to embed in an iframe of richrelevance.com. Majorly two points where the clients block us:
- Content Security Policies
- Access Control Allow Origin

MVT seed type needs to be passed as an input parameter. Based on the client's MVT seed type, one of the following parameters should be available as part of the R3_COMMON variables:

External Session ID: This is the external session ID.
- Set a global R3_COMMON object that contains the required key values which will evaluate and render the respective Ensemble AI.
External User ID: This is the external user ID.
RR User GUID: This is the user's globally unique identifier.

The best practice is to pass all three IDs (External Session ID, External User ID (if available), and RR User GUID (via rcs)). If it is not available, the client should pass at least the MVT seed type.

Following conditions are considered for Ensemble AI implementation:

If the client has server-side integration for other modules, then Ensemble AI is to be implemented by the client side.
- MVT seed type=RR User GUID
  - In this case, the client has to make the rr_rcs (rcs cookie) available for the client.js.
  - If the rr_rcs cookie is “http only”, then client.js will not be able to get/read rr_rcs from the browser cookies, so the client should remove “HTTP only” by client.
  - Once the rr_rcs cookie is available for client.js, all the API calls (targeting, experience, and Ensemble AI APIs) will have the rcs param as part of the API calls.
- MVT seed type=External Session ID
  - In this case, the client should be able to pass session ID as part of R3_COMMON parameters during script injection on the site.

If the client has client-side integration for other modules, then the Ensemble AI is to be implemented by client side.
- MVT seed type=RR User GUID
  - In this case, Algonomy will make the rr_rcs (rcs cookie) available for the client.js (By default, this will not set “http only”).
  - Once the rr_rcs cookie is available for client.js, all the API calls (targeting, experience, and ensemble ai) will have the rcs param as part of the API calls.
- MVT seed type=External Session ID
  - In this case, the client should be able to pass session ID as part of R3_COMMON parameters during script injection on the site.

For injecting JavaScript on the client site, see Injecting JavaScript on Client Site.

Note: Any context parameters that are defined as part of the ensemble ai, they should be made available as part of the R3_COMMON variables. And share the reference of SP new API to know what those parameters are and what is the variable they need to pass.

If variable is “abc”, by entering window.RR.abc in console, the output of Ensemble AI messaging will be made available.

For clients who want to use Dynamic Experiences but want to render it themselves, they can make use of Ensemble AI experience output through this variable and render the message themselves.

Note: This process is applicable only for the client side.

Injecting JavaScript on Client Site

You can inject client.js and R3 values on client site using the <script> tag inside webpage's html or edit the JavaScript file if already included on the page to load the dynamic experience rendering JavaScript code. Inject the JavaScript for Item Page, List Page and Cart Page.

Perform the below actions to inject JavaScript on different page level:

Set a global R3_COMMON object that contains the required key values which will evaluate and render the respective Social Proof Dynamic Experience.
Specify the correct values for all the keys. Replace "xxxx" below with the corresponding values.
Remove the comments from the code.
Copy and paste the script before the end of <body> tag. If you have already multiple <script> tags, paste them at the end.

Paste the same on the webpage where the dynamic experience needs to be rendered.

Injecting JavaScript on Item Page

<script>  window.R3_COMMON = {  apiKey: "xxxxxxxxxxx", //this is the API key which we get by following the steps mentioned above as "Getting API Key" under Prerequisites  apiClientKey: "xxxxxxxxxxxx",  //this is the API Client key which we get by following the steps mentioned above as "Getting API Client Key" under Prerequisites  baseUrl: "https://xxxx.richrelevance.com/rrserver/",  // Replace the sub-domain "xxxx" with "qa" or "recs" based on the env viz. either qa or prod  sessionId: "xxxx-xxxx-xxxx-xxxx", //session id of the user. This could be any valid session id  userId: "",  //provide the user id  placements: "item_page" //this specifies the type of page against which the experience had been designed. It should be correct to get right experience compositeOutfitPlacementSelector: '.product-page-v2-modules',  };  window.R3_ITEM = { id: "xxxxxxxx" }; //It is the item id of the product which is being rendered on web page  // Now load client js from RR CDN to play dynamic placement for social proofing  let firstHead = document.getElementsByTagName("head").item(0);  let clientScript = document.createElement("script");  clientScript.setAttribute("type", "text/javascript");  clientScript.setAttribute(  "src",  "https://cdn.richrelevance.com/dashbo...-dev/client.js"  );  firstHead.appendChild(clientScript); <script>