How to specify what "list" the product was added to cart from? Enhanced Ecommerce

Question

Trying to implement Google Analytics Enhanced Ecommerce tracking for my website.

How to specify what "list" the product was added to cart from?

Here is the standard tracking code for adding the product to basket:

    // Called when a product is added to a shopping cart.
function addToCart(product) {
  ga('ec:addProduct', {
    'id': product.id,
    'name': product.name,
    'category': product.category,
    'brand': product.brand,
    'variant': product.variant,
    'price': product.price,
    'quantity': product.qty
  });
  ga('ec:setAction', 'add');
  ga('send', 'event', 'UX', 'click', 'add to cart');     // Send data using an event.
}

There is no any functionality to specify the name of the products list where the button "add to cart" was clicked.

There is must be something like this:

ga('ec:setAction', 'click', {'list': 'Search Results'});

but that works only for 'click' action, (not 'add'). (as per https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#(product action) )

Moreover I need to specify position of product in a list. Any ideas?

Answer 1

I had the same problem and was stuck for hours.

My issue was that I had the checkout process on a different subdomain than where the product impressions was listed and clicked on. By simply adding a field on the GA page view tag i GTM, "cookieDomain" = "auto", all started working - Cross Domain Tracking with Google Tag Manager.

The only places I needed to add information about the list, was:

• product impressions list. 'list' : 'Search result'
• product click (from impressions list). 'actionField': {'list': 'Search Results'},

I did not add it for product detail, or anywhere in the checkout process (add to cart, checkout, purchase).

For other external domains in the checkout process I guess you will need cross domain tracking.

Answer 2

There are three things you have to do.

1. Track your product list click at your product list page

/**
 * Binds click event on product detail page links at product list page.
 */
var bindProductListClickTracking = function() {
    jQuery('a.detail-link-track:not(.ga-click-bound)').on('click', function (e) {
        e.preventDefault();

        var href = jQuery(this).attr('href');
        //all my product data are attributes á la data-product-sku
        var product = jQuery('li[data-product-detail-link="' + href + '"]')[0];

        ga('ec:addProduct', {
            'id': product.dataset.productSku,
            'name': product.dataset.productName,
            'category':product.dataset.productCategory,
            'brand': product.dataset.productBrand,
            'variant': product.dataset.productVariant,
            'position': jQuery(product).index() + 1
        });

        var list = product.dataset.productList;
        /**
          * IMPORTANT: save your product list name into a cookie
          */
        jQuery.cookie('productlist', list, { path: '/', domain: cookieDomain});

        ga('ec:setAction', 'click', {list: list});

        ga('send', 'event', {
            eventCategory: 'productlist',
            eventAction: 'click',
            eventLabel: list,
            hitCallback: function () {
                if (!(e.ctrlKey || e.which == 2)) {
                    document.location = href;
                }
            }
        });
    }).addClass('ga-click-bound');
}

Hint: If you have lazy loading or a load more button, be careful not to bind this event twice on your product detail page links.

2. Add actionObject for your product list to your add to cart action at your product detail page

var manipulationOfCart = function(product, type, productList) {
    ga('ec:addProduct', {
        'id': product.id,
        'name': product.name,
        'category': product.category,
        'brand': product.brand,
        'variant': product.variant,
        'price': product.price,
        'quantity': product.qty
    });

    ga('ec:setAction', type, {list: productList});

    if (type == 'add') {
        ga('send', {
            hitType: 'event',
            eventCategory: 'Cart',
            eventAction: 'click',
            eventLabel: 'Add To Cart',
            nonInteraction: 1
        });
    } else if (type == 'remove') {
        ga('send', {
            hitType: 'event',
            eventCategory: 'Cart',
            eventAction: 'click',
            eventLabel: 'Remove From Cart',
            nonInteraction: 1
        });
    }
}

3. Remove cookie after you added a product to your cart or user leaves product detail page

manipulationOfCart(productToBasket, 'add', productlist);
$.removeCookie('productlist', { path: '/', domain: cookieDomain});

AND

$(window).unload(function() {
    $.removeCookie('productlist', { path: '/', domain: cookieDomain});
});

Actually the Google Analytics Docs are wrong - it does not work what they are saying. And there is already a bug reported at Google Analytics Bug Tracker.

Answer 3

List variable in actionField is only valid for click and detail action. If you want to track the customer journey, you have to merge click and add into one logical event.

So If you can add directly from list and you want to tie data together in UA, you have do soem little workaround like:

function addToCart(product) {
  ga('ec:addProduct', {
    'id': product.id,
    'name': product.name,
    'category': product.category,
    'brand': product.brand,
    'variant': product.variant,
    'price': product.price,
    'quantity': product.qty    
  });
  ga('ec:setAction', 'click', {'list': 'Search Results'});
  ga('send', 'event', 'automatic', 'click', 'add to cart',{'nonInteraction': 1});     // Send data using an event.

  ga('ec:addProduct', {
    'id': product.id,
    'name': product.name,
    'category': product.category,
    'brand': product.brand,
    'variant': product.variant,
    'price': product.price,
    'quantity': product.qty
  });
  ga('ec:setAction', 'add');
  ga('send', 'event', 'UX', 'click', 'add to cart');     // Send data using an event.
}

Answer 4

You should send the list property when you add the detail action (which should be sent when a user views the product page).

ga('ec:setAction', 'detail', { list: 'Search Results' });

Consider the following scenario:

1. User searches on your website for a product, the results are displayed. At this point an impression is created for each product result.
2. The user clicks on one of the product results, you add a click action, and the user is then redirected to the product page.
3. Upon page load, you send a detail action, specifying the list property (as a parameter in setAction).
4. User clicks 'Add To Cart', and you send the add action.

If you don't specify the list property in the detail action, or don't send a detail action at all, and then call the add action, when viewing the data under Product List Performance in Analytics, the Add To Cart data will appear under Product List Name as (not set).

The documentation fails to include this crucial piece of information in their complete example, which can be found here