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

ODP (Optimizely data platform) tracking with JavaScript

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

Optimizely Data platform commerce connector

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

ODP (Optimizely data cloud) event inspector

Categorized in:

Optimizely

Tagged in:

, , ,