---
title: Ajax tracking only
slug: product-recommendations/docs/ajax-tracking-only
docTags: 
createdAt: 2026-07-30T20:41:29.696Z
---

Ajax tracking is necessary when the element or form is loaded, or refreshed on a webpage using Ajax, and needs to send the update to Optimizely Recommendations tracking system. This keeps reporting and tracking accurate and correctly optimizes site recommendations and tracking based on data gathered.

## Supported page types

The following page types are supported:

| Page type | Example Ajax call                                                          |
| --------- | -------------------------------------------------------------------------- |
| basket    | Peerius.sendAjax("\<clientname>/basket/add.pagex?basket=" + basket);       |
| checkout  | Peerius.sendAjax("\<clientname>/checkout/add.pagex?checkout=" + checkout); |
| wishlist  | Peerius.sendAjax("\<clientname>/wishlist/add.pagex?wishlist=" + wishlist); |

## Scenarios

### Scenario 1: Product added to basket

When a new product is added to the basket, and is updated in the basket using Ajax.

Current basket has 2 items: product 1 and product 2 with quantity 2 and 1 and unit prices of 30.50 GBP and 15.00 GBP respectively.

| Product   | Quantity | Price |
| --------- | -------- | ----- |
| product 1 | 2        | 30.50 |
| product 2 | 1        | 15.00 |

And the user adds one more item, product 3, to the basket with quantity 1 and unit price 10.00 GBP. So the basket will look like this:

| Product   | Quantity | Price |
| --------- | -------- | ----- |
| product 1 | 2        | 30.50 |
| product 2 | 1        | 15.00 |
| product 3 | 1        | 10.00 |

### Scenario 2: Quantity of a product is altered

When the quantity of a product in the basket is altered, and is updated in the basket using Ajax.

Current basket has 2 items: product 1 and product 2 with quantity 2 and 1 and unit prices of 30.50 GBP and 15.00 GBP respectively.

| Product   | Quantity | Price |
| --------- | -------- | ----- |
| product 1 | 2        | 30.50 |
| product 2 | 1        | 15.00 |

And the user reduces the quantity of the item product 1 to 1. So the basket will now look like this:

| Product   | Quantity | Price |
| --------- | -------- | ----- |
| product 1 | 1        | 30.50 |
| product 2 | 1        | 15.00 |

### Scenario 3: Product removed from basket

When a product is removed from the basket, and is updated in the basket using Ajax.

Current basket has 2 items: product 1 and product 2 with quantity 2 and 1 and unit prices of 30.50 GBP and 15.00 GBP respectively.

| Product   | Quantity | Price |
| --------- | -------- | ----- |
| product 1 | 2        | 30.50 |
| product 2 | 1        | 15.00 |

And the user removes the item product 1 from the basket. So the basket will now look like this:

| Product   | Quantity | Price |
| --------- | -------- | ----- |
| product 2 | 1        | 15.00 |

## Implementation

The implementation of Ajax tracking consists of three stages:

- Stage 1 – An updated version of the changes needs to be stored in a variable.
- Stage 2 – The contents of the variable need to be encoded by calling the `encodeURIComponent` method.
- Stage 3 – Send the updates to the Optimizely Recommendations tracking system.

```csharp
var basket = {
    "items"    : [{
        "refCode" : "product1",
        "qty"     : 2,
        "price"   : 30.50
    }, 
    {
        "refCode" : "product2", 
        "qty"     : 1,
        "price"   : 15.00
    }],
    "currency" : "GBP"
}
```

### Stage 1: Save the changes

An updated version of the basket changes needs to be stored in a variable defined as a JSON object.

**Example**: Updated variable `basket` for Scenario 1.

```csharp
var basket = { 
    "items"    : [{
        "refCode" : "product1", 
        "qty"     : 2,
        "price"   : 30.50
    }, 
    {
        "refCode" : "product2", 
        "qty"     : 1,
        "price"   : 15.00
    }, 
    {
        "refCode" : "product3", 
        "qty"     : 1,
        "price"   : 10.00
    }],
    "currency" : "GBP"
}
```

**Example**: Updated variable `basket` for Scenario 2.

```csharp
var basket = { 
    "items"    : [{
        "refCode" : "product1", 
        "qty"     : 1,
        "price"   : 30.50
    }, 
    {
        "refCode" : "product2", 
        "qty"     : 1,
        "price"   : 15.00
    }],
    "currency" : "GBP"
}
```

**Example**: Updated variable `basket` for Scenario 3.

```csharp
var basket = { 
    "items"    : [{
        "refCode" : "product2", 
        "qty"     : 1,
        "price"   : 15.00
    }],
    "currency" : "GBP"
}
```

### Stage 2: Encode the changes

After you have created the variable `basket`, which holds the update of the basket, the next stage is to encode the contents of the variable using the `encodeURIComponent` method.

```javascript
basket = encodeURIComponent(JSON.stringify(basket));
```

### Stage 3: Send changes to Optimizely

The next and final stage is to send the basket updates to the Optimizely Recommendations tracking system.

```javascript
Peerius.sendAjax("<clientname>/basket/add.pagex?basket=" + basket);
```

:::hint{type="info"}
**Note**
The `<clientname>` element is unique for your site and will be provided by Optimizely.
:::

## Additional parameters

You can add the following parameters to the URL to send Optimizely additional information.

| Parameter | Example Ajax call                                                                        |
| --------- | ---------------------------------------------------------------------------------------- |
| location  | Peerius.sendAjax("\<clientname>/basket/add.pagex?basket="+basket+"\&location="+location) |
| user      | Peerius.sendAjax("\<clientname>/basket/add.pagex?basket="+basket+"\&user="+user)         |

**Example**: Variable `location`

```csharp
var location = "en"
```

**Example**: Variable `user`

```csharp
var user = { "id" : "abcd1234efgh" }
    user = encodeURIComponent(JSON.stringify(user));
```

If sending both these variables, the Ajax call looks like this:

```javascript
Peerius.sendAjax("<clientname>/basket/add.pagex?basket="+basket+"&location="+location+"&user="+user)
```