Events
Describes events for the Optimizely Data Platform (ODP) Web SDK.
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_idis required on all events with an event type ofproduct.
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 about 1 year ago