Events

22 min

Events describe actions your customers 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 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.

Events in the Web SDK require an event type and event action.

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

Customer event

Configure customer identification events, for example customer log in.

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

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

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

Account Logout

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

Account Update

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

Wishlist event

Add to Wishlist

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

Remove from Wishlist

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

Page view event

ODP automatically parses the appropriate page path information.

zaius.event("pageview");

Product event

The products object is a "stateful" object, meaning it stores the current state of your product inventory. See Products.

🚧 Important product_id is required on all events with an event type of product.

Configure product interactions

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

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

Add to cart

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

Remove from cart

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

Order event

Order Purchase

❗️ 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 APIODP REST API or CSV.

Refunds/Returns/Cancellations

❗️ Warning ODP supports sending order refunds, returns, and cancellations using only the ODP REST APIODP REST API or CSV to ensure that ad blockers do not block these critical events.

Search

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

Sort

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

Filter

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.

// 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 });
    });
});