HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityDoc feedbackLog In
GitHubNuGetDev CommunityDoc feedback


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.