Dev GuideAPI ReferenceUser Guide
Dev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideLegal TermsGitHubDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide
Legal TermsGitHubDev CommunityOptimizely AcademySubmit a ticket

Events

Describes events for the Optimizely Data Platform (ODP) Web SDK.

Suggest Edits

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

Account Login

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 API or CSV.

Refunds/Returns/Cancellations

❗️

Warning

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

Navigation event

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

Updated 12 months ago

Next