---
title: Events
slug: data-platform/docs/websdk-events
docTags: 
createdAt: 2026-08-10T12:05:14.000Z
---

[Events](docId\:w0DeSMy7YSyAm7PnwzGqq) describe actions your [customers](docId\:kJQOKwTiRoXN6KRiV0sb9) perform or actions that result in an update to their customer record such as viewing your web page or visiting your store in New York.

You can record online events from your web page by calling `zaius.event()` on a page that has the [ODP JavaScript snippet](docId\:uSckrFlNPTg3aQgAZr1rp) implemented. The `event()` method includes the VUID (cookie ID) on requests automatically.

The following are predefined event types in ODP. If you need to track additional events, you can create your own custom events. See [Custom events in the Web SDK](docId\:NKIo5-CCFNSBBvo8rAJaT).

[Events](docId\:w0DeSMy7YSyAm7PnwzGqq) in the Web SDK require an `event type` and `event action`.

```javascript
zaius.event("{event type}", { 
    action: "{event action}",
});
```

## Customer event

Configure customer identification events, for example customer log in.

```javascript
zaius.event("customer", {
      action: "login",
      customer_id: "{{YOUR_VARIABLE_FOR_CUSTOMER_ID}}", //or other identifier
      email:"{{YOUR_VARIABLE_FOR_EMAIL}}", 
});
```

## Account event

If your website has customer login or registration workflow, you can track events based on their account.

### Account Register

```javascript
zaius.event("account", { action: "register" });
```

### Account Login

```javascript
zaius.event("account", {
  action: "login" 
});
```

### Account Logout

```javascript
zaius.event("account", { 
  action: "logout" 
});
```

### Account Update

```javascript
zaius.event("account", {
  action: "update" 
});
```

## Wishlist event

### Add to Wishlist

```javascript
zaius.event("product", { 
  action: "add_to_wishlist", 
  product_id: "product-2143" 
});
```

### Remove from Wishlist

```javascript
zaius.event("product", { 
  action: "remove_from_wishlist", 
  product_id: "product-2143" 
});
```

## Page view event

ODP automatically parses the appropriate page path information.

```javascript
zaius.event("pageview");
```

## Product event

The products object is a "stateful" object, meaning it stores the current state of your product inventory. See [Products](docId\:iESyg4tmp88RFttr_fyhW).

:::hint{type="warning"}
**Important**
`product_id` is required on all events with an event type of `product`.
:::

### Configure product interactions

```javascript
zaius.event("product", {
  action: "detail",
  customer_id: "{{YOUR_VARIABLE_FOR_CUSTOMER_ID}}",  //or other identifier
  email:"{{YOUR_VARIABLE_FOR_EMAIL}}",  //if email is not available, do not send it
  product_id: "{{YOUR_VARIABLE_FOR_PRODUCT_ID"}}
});
```

### Details viewed

```javascript
zaius.event("product", {
  action: "detail", 
  product_id: "product-2143" 
});
```

### Add to cart

```javascript
zaius.event("product", { 
  action: "add_to_cart", 
  product_id: "product-2143" 
});
```

### Remove from cart

```javascript
zaius.event("product", { 
  action: "remove_from_cart", 
  product_id: "product-2143" 
});
```

## Order event

### Order Purchase

:::hint{type="danger"}
**Warning**
Optimizely does not recommend or formally support order events in the Web SDK to ensure that ad blockers do not block the purchase event.

Send purchase events through [ODP REST API](docId\:q_WCFAcMRYLuLjiA6wMSf) or [CSV](docId\:r08aUwwgh_GGvJsecodCC).
:::

### Refunds/Returns/Cancellations

:::hint{type="danger"}
**Warning**
ODP supports sending order **refunds**, **returns**, and **cancellations** using only the [ODP REST API](docId\:q_WCFAcMRYLuLjiA6wMSf) or [CSV](docId\:r08aUwwgh_GGvJsecodCC) to ensure that ad blockers do not block these critical events.
:::

## Navigation event

### Search

```javascript
zaius.event("navigation", { 
  action: "search", 
  search_term:"cameras, vcr",
  category: "electronics > consumer"
});
```

### Sort

```javascript
zaius.event("navigation", { 
  action: "sort"
});
```

### Filter

```javascript
zaius.event("navigation", { 
  action: "filter"
});
```

## Track events example

The example below shows how to track the following events:

- Product detail view
- Checkout started
- Checkout completed
- Add to cart
- Add to wishlist
- Remove from cart
- Remove from wishlist

Copy the following JavaScript code snippet and paste it below the ODP JavaScript tag on every page of your site where you want to track this data.

```javascript
// Product detail view
if (document.getElementById('productCode')) {
    var productCode = document.getElementById('productCode');
    zaius.event('product', { action: 'detail', product_id: productCode.value });
}

// Checkout started
if (document.getElementById('jsCheckoutForm')) {
    var productCode = document.getElementById('productCode');
    zaius.event('checkout', { action: 'start' });
}

// Checkout completed
if (window.location.href.indexOf("order-confirmation") > 0)
{
    var productCode = document.getElementById('productCode');
    zaius.event('checkout', { action: 'complete' });
}

$(document).ready(function () {

    // Add to cart
    $(document).find('.addToCart').each(function (i, e) {
        $(e).click(function () {
            let code = $(this).attr('data');
            zaius.event('product', { action: 'add_to_cart', product_id: code });
        });
    });

    // Add to wishlist
    $(document).find('.addToWishlist').each(function (i, e) {
        $(e).click(function () {
            let code = $(this).attr('data');
            zaius.event('product', { action: 'add_to_wishlist', product_id: code });
        });
    });

    // Remove from cart
    $('#js-cart-popover').on('click', '.jsRemoveCartItem', function () {
        let code = $(this).attr('code');
        zaius.event('product', { action: 'remove_from_cart', product_id: code });
    });

    $('.large-cart').on('click', '.jsRemoveCartItem', function () {
        let code = $(this).attr('code');
        zaius.event('product', { action: 'remove_from_cart', product_id: code });
    });

    // Remove from wishlist
    $('#js-wishlist-popover').on('click', '.jsRemoveCartItem', function () {
        let code = $(this).attr('code');
        zaius.event('product', { action: 'remove_from_wishlist', product_id: code });
    });

    $('.my-account').on('click', '.deleteLineItemWishlist', function () {
        let code = $(this).attr('data');
        zaius.event('product', { action: 'remove_from_cart', product_id: code });
    });
});
```