How to track product list impressions/clicks and related sales?

Question

We have products in several different categories in our Magento shop. And with enhanced ecommerce tracking we want track the product list performance. I used this Google dev docs.

Eg.: Product is in category 'sales', 'shirts' and 'collection awesome'.

Now we run into the problem, that at the product detail page we do not know from which category list we came from and Magento tells Google the first product category of the products categories the product is in.

That results in a wrong report: Product List Views, Product List Clicks and Product List CTR have correct numbers in our reports.

But Product Adds To Basket is zero and Product Checkouts, Unique Purchases and Product Revenue point to (not set) in a different entry (row).

I doubt that this is a session problem, because I clicked everything in under one minute on our test system.

This is how I track product list impressions (all relevant data is in data-xxx attributes in li-tag):

/**
 * * Set all product list impressions for Google Analytics
 * @param bool loadMoreClicked
 */
var setProductImpressions = function(loadMoreClicked) {
    jQuery('li[data-product-sku]').each(function(index){
        _ga('ec:addImpression', {
            'id': this.dataset.productSku,
            'name': this.dataset.productName,
            'category': this.dataset.productCategory,
            'brand': this.dataset.productBrand,
            'variant': this.dataset.productVariant,
            'list': this.dataset.productList,
            'position': index + 1
        });
    })

    if(loadMoreClicked) {
        _ga('send', 'event', {
            eventCategory: 'productlist',
            eventAction: 'click',
            eventLabel: 'Load More Button'
        });
    }
}

This is how I track product list clicks:

var bindProductListClickTracking = function() {
    jQuery('a.detail-link-track:not(.ga-click-bound)').on('click', function (e) {
        e.preventDefault();
        var product;
        var href = jQuery(this).attr('href');

        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;

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

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

And this is how I track add to cart events:

function manipulationOfCart(product, type) {
    _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);

    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
        });
    }
}

Answer 1

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.