> For the complete documentation index, see [llms.txt](https://foodcommerce-api-help.onlinesales.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foodcommerce-api-help.onlinesales.ai/user-tracking-events/js-sdk/track-add-to-cart.md).

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