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.