---
title: API overview for Commerce Connect
slug: commerce-connect-13/docs/an-api-overview
docTags: 
createdAt: 2026-07-23T09:44:49.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 for [download from GitHub](https://github.com/episerver/Quicksilver).
:::

## Prerequisites

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

## The main flows

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

- [Server-side API integration](docId\:MkV2BIV5HwTq7hJvCQzza)
- [Client-side API integration](docId\:xGE61TNVc0gSkUF-_Wuet)

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/2jlBSGVIsPVJFR8UorQbk-20260723-094604.png "episerver-personalization.png")

## 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\...

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

to the current layout structure.

```csharp
@{ 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"); }
```