---
title: Optimizely Commerce Connect API overview
slug: commerce-connect-15/docs/optimizely-commerce-connect-api-overview
docTags: 
createdAt: 2026-07-30T20:34:44.000Z
---

:::hint{type="info"}
**Note**
Sample code used in this article is taken from Quicksilver templates. The Quicksilver Commerce Connect sample site and installation instructions are available to [download from GitHub](https://github.com/episerver/Quicksilver).
:::

For environment settings, see [Install and configure the native integration package](docId\:dvH9VNDe9Fb5ZMv6bzdMv).

The following diagram illustrates how Optimizely Product Recommendations operates in both tracking modes:

- [Server-side API integration](docId:9sJ69f3iOVLtX9M4pZJtn)
- [Client-side API integration](docId\:GmZEQ414IWfC4xyebQ3A6)

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/1zF_lIa7a5R_FJu9E3lq9-20260723-164626.png)

## Server-side integration API

The `EPiServer.Tracking.Core` package contains:

- The `EPiServer.Tracking.Core.ITrackingService` interface.

The `EPiServer.Tracking.Commerce` package contains:

- The `EPiServer.Tracking.Commerce.TrackingServiceExtensions` class.
- The `EPiServer.Tracking.Commerce.CommerceTrackingAttribute` class.
- The `EPiServer.Tracking.Commerce.TrackingDataFactory` class.

## Client-side integration API

The `EPiServer.Personalization.Commerce` package contains:

- The `epiRecommendations` JavaScript object — used to send a tracking request with client-collected tracking data and render the tracking response.
- The `TrackingDataFactory` JavaScript object — collects tracking data from the client.

## Mark 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.IRecommendationContext` interface.

The Quicksilver template includes a class, `EPiServer.Reference.Commerce.Site.Features.Recommendations.Services.RecommendationContext`, that implements `IRecommendationContext` for tracking clicks on recommended products.

## Define recommendation 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, recommendations are rendered to the upper, left, right, and bottom areas of a page's main content.

In `Views/Shared/_Layout.cshtml`, add four `<div>` tags, one for each section:

```html
<div class="recommendations recommendations-upper"></div>
<div class="recommendations recommendations-left"></div>
<div class="recommendations recommendations-right"></div>
<div class="recommendations recommendations-bottom"></div>
```

The result inside the layout structure looks like the following:

```html
@{ Html.RenderAction("Index", "Navigation"); }
<div class="quicksilver site-wrapper">
    <div class="main-area">@RenderBody()</div>
    <div class="recommendations recommendations-upper"></div>
    <div class="recommendations recommendations-left"></div>
    <div class="recommendations recommendations-right"></div>
    <div class="recommendations recommendations-bottom"></div>
</div>
@{ Html.RenderAction("Index", "Footer"); }
```