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.