4

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).

Slightly edited screenshot of test system analytics report

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
        });
    }
}
1
  • If you are using magento 2.4 this comes with the tag manager plugin as standard which out of the box tracks this information. alternatively there are other tag manager scripts that offer the same solution and would give you more control over what you track with literally no code knowledge Commented Jan 21, 2021 at 20:32

1 Answer 1

0

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.

1
  • Hi @Jurik could you please share your list.phtml file or in which file you added this code because I have to do the same but I am facing some issues. Commented Jun 4, 2021 at 7:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.