📘

Note

Sample code used in this article is taken from Quicksilver templates. The _Quicksilver_ Commerce sample site and installation instructions are available for [download from GitHub](🔗).

## Prerequisites

For environment settings, see [Install and configure the native integration package](🔗).

## The main flows

The following diagram describes how Optimizely Product Recommendations works in both tracking modes.

• [Server-side API integration](🔗)

• [Client-side API integration](🔗)

## The integration API

### Server side

• The _EPiServer.Tracking.Core_ package

  • The EPiServer.Tracking.Core.ITrackingService interface.

• The _EPiserver.Tracking.Commerce_ package

  • The EPiServer.Tracking.Core.TrackingServiceExtensions class.

  • The EPiserver.Tracking.Commerce.CommerceTrackingAttribute class.

  • The EPiServer.Tracking.Commerce.TrackingDataFactory class.

### Client side

• The \_EPiServer.Personalization.Commerce_package

  • The epiRecommendations JavaScript object. Use this to send a tracking request with the given tracking data, collected in the client. It renders the tracking response.

  • The TrackingDataFactory JavaScript object. Collects tracking data from the client.

### Marking clicks

• If a user clicks a recommended item, the click must be tracked to generate useful recommendations. To get information about which recommendation triggered the current request, use the EPiServer.Tracking.Commerce.IRecommendationContextinterface.

  • The Quicksilver template has a class, EPiServer.Reference.Commerce.Site.Features.Recommendations.Services.RecommendationContext which implements the above interface, to track clicks on recommended products.

## Preparation

### Define recommendations layout on a page

To render recommendations, create four sections on a page: _upper_, _left_, _right_ and _bottom._

• _recommendations-upper_

• _recommendations-left_

• _recommendations-right_

• _recommendations-bottom_

Based on their CSS classes (above), recommendations are rendered to the upper, left, right and bottom of a page's main content.

In Views/Shared/\_Layout.cshtml, add 4 <div> tags, one for each section, as shown below...

to the current layout structure.