# Track Add to Cart

You can use the OnlineSales.ai pixel to track the products which are added to the cart by visitors. Tracked `add to carts` is used to compute the cart sessions, cart abandoned and user-product affinity.

### Requirements

The pixel's [base code](/user-tracking-events/js-sdk/installing-the-tag.md#base-code) must already be installed on every page where you want to track add to carts.

### Trigger

`Add To Cart` event should be fired when a user adds a product to a cart.

### JS API

All events are tracked by calling one of the library's function with a JSON object as it's parameters.

Following is a function call to track when a visitor has `added a product` to the cart on your website.

```javascript
// with minimum required parameters
_osAdd2Cart({
    "cli_ubid": "ubid-83789ssb",
    "products": [{
        "skuId": "XYZ-1231-1233",
        "sellerId": "SID-9999",
        "quantity": "2" // optional. Defaults to 1
    }]
})
```

List of all the standard events can be found [here](/user-tracking-events/js-sdk/references.md#standard-events).

### Object Properties of *Products* key

You can include the following predefined object properties with any events that support them. Format your parameter object data using JSON.

| category     | Category of the menu item. This should be the same as what is given in the menu item catalog. While this is optional, this parameter is highly recommended. |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| productPrice | Price of the menu item without the currency symbol                                                                                                          |
| currency     | Currency of the menu item's price. Eg: "INR". This should be a 3 letter ISO standard                                                                        |
| discount     | Discounted price of the menu item                                                                                                                           |
| skuId        | The id of the menu item. This should be the same as what is given in the menu item catalog. This is a mandatory parameter.                                  |
| sellerId     | The id of the restaurant who is selling this menu item. This is mandatory in case of aggregators.                                                           |
| quantity     | Number of menu item quantity added to the cart. This is optional and defaults to 1                                                                          |
| cli\_ubid    | Client generated user id. If set, this takes precedence over ubid passed in the cookie. Once generated for a user, it should be same for all the API calls. |

Complete list of object properties can be found [here](/user-tracking-events/js-sdk/references.md).

Example call of function with all the product properties

```javascript
// with all parameters
_osAdd2Cart({
    "products": [{
        "skuId": "XYZ-1231-1233",
        "sellerId": "SID-9999",
        "category": "Pizza > Veg Pizza",
        "productPrice": "999",
        "currency": "INR",
        "discount": "899",
        "quantity": "2"
    }],
    "cli_ubid": "ubid-83789ssb"
})
```

### Tracking clicks on Buttons

Suppose you have an e-commerce website and your "Add to Cart" button does not navigate to a new page. You may want to activate an event when the button is clicked.

Fire `Add To Cart` either on a new page load or on the click of an Add To Cart button. There are multiple ways to handle clicks on buttons. Here's an example adding an eventListener to a button.

```markup
<!-- Somewhere there is a button that performs Add to Cart -->
<button id="addToCartButton">Add To Cart</button>

<!-- Add Pixel Events to the button's click handler -->
<script type="text/javascript">
  var button = document.getElementById('addToCartButton');
  button.addEventListener(
    'click', 
    function() { 
      _osAdd2Cart({
          "products": [{
              "skuId": "XYZ-1231-1233",
              "sellerId": "SID-9999",
              "category": "Pizza > Veg Pizza",
              "productPrice": "999",
              "currency": "INR",
              "discount": "899",
              "quantity": "2"
          }],
          "cli_ubid": "ubid-83789ssb"
      })
    },
    false
  );
</script>
```

There are many ways you can handle click events; just make sure to always call `_osAdd2Cart` function after the click.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://foodcommerce-api-help.onlinesales.ai/user-tracking-events/js-sdk/track-add-to-cart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.