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

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

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.

Example call of function with all the product properties

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

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