I want to track product click so how to create project object or how to pass project object ?

[bkmitesh]

Hey,

I am reading this post - https://developers.google.com/tag-manager/enhanced-ecommerce#product-clicksIn this there is function like given below - function(productObj) {  dataLayer.push({    'event': 'productClick',    'ecommerce': {.....................................................................................................................Now my developer asking how to create object? or how to pass product object? Like on page we have  more than 50 products listed, so if any one clicks on any product from list then how will we know which product has been clicked?Hope you understand what i want to say? Regards,Mitesh

[AlexMcKee]

Hi Mitesh, the product object needs to be a javascript object with the following properties expected:

 'name': productObj.name, // Name or ID is required.  'id': productObj.id,  'price': productObj.price,  'brand': productObj.brand,  'category': productObj.cat,  'variant': productObj.variant

Creating such an object and passing it to the analytics could be done with a simple function like the following.You say you have a list of products. Let's assume for the purposes of a demonstration that the list item is formatted like so:

Example product

An Example product

Add to basket

You could listen for clicks on the basket add (which you are probably doing already, so your developer should be able to hook the new functionality into the same event handler, but for the purposes of a demonstration I've included an example of the event listener too). Then find the product related to the current "add to basket" link. I've included 2 very simple functions using pure Javascript to demonstrate how this can be done.

var basketLink = document.querySelectorAll('.addtobasket');

for (var i = 0; i < basketLink.length; i++) {
    basketLink[i].addEventListener('click', function(event) {
        console.log('Basket link clicked');
        event.preventDefault();
        
        product = getSchemaOrgProductData(this.parentNode);
        
        console.log( product.name );
        console.log( product.brand );
        
    });
   }
   
   function getProductData(context) {
       var product = {};
   
       product.name = context.querySelector('.product-name').textContent;
       product.brand = context.querySelector('.product-brand').textContent;
       
       return product;
   }
   
   function getSchemaOrgProductData(context) {
   
       var product = {};
   
       product.name = context.querySelector('[itemprop="name"]').textContent
       product.brand = context.querySelector('[itemprop="brand"]').textContent;
       
       return product;
   
   }

That should be enough for your developer to understand how to create a product object that can be passed to the analytics function. I haven't implemented methods for fetching and setting all relevant properties but the developer can copy the example.