In large eCommerce organizations, Data resides different places like in eCommerce platforms, CRM, ERP or tools like google analytics. This data is very helpful to use in C-Level reporting, resource planning or creating targeted personalization campaigns to get a better conversion rate.
In simple words, Optimizely ODP (Optimizely Data platform) is a central repository of Data related to customers. Everything customers do on the website is an Event. These events are classed as Event Types like Product, Order, Email etc. Every Event Type has Event Actions like Purchase etc
Preparations
ODP basic integration is very simple and straightforward. In the first part of this series we capture Events on following
- Page Views
- Product Views
- Add to basket
- Remove from Basket
- Order Complete
Global Script
You need to add a tracking JS snippet in the <head> tag on every page of the website. There are various ways to do it. I have created a CMS property in StartPage -> SiteSettings to render this script & manage it in CMS. Still, other options are using script settings implementations like the Foundation example website on Github.
Identifiable HTML Elements
Basic JS tracking uses JS to capture different information from rendered HTML. It’s easier if your code has these identifiable HTML elements.
Like to capture views on produce detailed page view following tracking code find an HTML element with Id “productCode” and invoke an event.
// Product detail view
if (document.getElementById('productCode')) {
var productCode = document.getElementById('productCode');
zaius.event('product', { action: 'detail', product_id: productCode.value });
}
Again generating identifiable HTML elements is not necessary as long as your JS can identify product code in HTML and can fire an event. This is just to make your life easier. The important thing is when a customer loads the page, your code identifies the product code and invokes the event.
zaius.event('product', { action: 'detail', product_id: productCode.value });
Service API
You must ensure Service API is installed and configured on your commerce website.
Whitelist access to Website Url
In most Optimizely CMS and Commerce implementations, the test environments are usually locked by IP addresses. ODP Commerce Cloud integration uses the ODP Commerce connector that needs access to the Service API endpoint. That’s why if your website is locked by IP address you need to whitelist ODP IP addresses. You can get an IP range from Optimizely Support.
Implementation
JS Tracking Script
You can get JS tracking snippet from ODP portal Settings -> Integrations

You can save this JS in the Global HTML script property (or equivalent )
Common Commerce Tracking scripts
// Product detail view
if (document.getElementById('productCode')) {
var productCode = document.getElementById('productCode');
zaius.event('product', { action: 'detail', product_id: productCode.value });
}
if (document.getElementById('jsCheckoutForm')) {
var productCode = document.getElementById('productCode');
zaius.event('checkout', { action: 'start' });
}
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 });
});
});
Install Commerce Connector
You can get Commerce Connector from ODP portal Settings -> Integrations. Click on App Directory
Select Commerce Cloud and Click on Install
Once Installed, you can configure Service Url credentials like below

You can configure import settings in the commerce connector as well.
Event Tracking Inspection
The Event Inspector allows you to review the information sent to your account via the ODP tracking APIs. This is the easiest way to debug whether or not tracking information is being sent and processed correctly.
You can go to Event Inspector from Account Settings -> Event Inspector
