Google Tag Manager enhanced ecommerce data layer

Question

I'm implementing GTM and GA on our website and had a very basic question about passing the e-commerce data about product impressions and clicks which I'm not understanding from the official GTM documentation.

As an example I would like to discuss the search result page. Our search result page will typically have 50-100 product listings on it. The SRP will load with the product impression pre-loaded in the dataLayer=[{...}] section in the section with all the variables required by Google Tag Manager for impression calculation with the correct naming convention. As an example I would like to share the HTML pseudo code of the page

<html>
<head>
....
....
    <script>
        dataLayer=[{
            'userID':'sdvkn3434mwgn4nk',
            'country':'USA',
            'language':'en-us',
            'ecommerce': {
                currencyCode': 'USD',
                'impressions': [
                    {
                     'name': 'Triblend Android T-Shirt',
                     'id': '12345',
                     'price': '15.25',
                     'brand': 'Google',
                     'category': 'Apparel',
                     'variant': 'Gray',
                     'list': 'Search Results',
                     'position': 1
                    },
                 {
                   'name': 'Donut Friday Scented T-Shirt',
                   'id': '67890',
                   'price': '33.75',
                   'brand': 'Google',
                   'category': 'Apparel',
                   'variant': 'Black',
                   'list': 'Search Results',
                   'position': 2
                 }]
            }
        }
    </script>
</head>
<body>
    ...
    ...
    <a href="www.example.com/12345.html">Triblend Android T-Shirt</a>
    <a href="www.example.com/12345.html">Donut Friday Scented T-Shirt</a>
    ....
</body>

In this dataLayer=[{}], we will also have data related to user language, user ID, country selected, etc

I would like to understand how to calculate the click on a product. In the google documentation, https://developers.google.com/tag-manager/enhanced-ecommerce#product-clicks it is mentioned to use the following code to track it.

<script>
function(productObj) {
  dataLayer.push({
    'event': 'productClick',
    'ecommerce': {
      'click': {
        'actionField': {'list': 'Search Results'},      
        'products': [{
          'name': productObj.name,                      
          'id': productObj.id,
          'price': productObj.price,
          'brand': productObj.brand,
          'category': productObj.cat,
          'variant': productObj.variant
         }]
       }
     },
     'eventCallback': function() {
       document.location = productObj.url
     }
  });
}
</script>

Where should this function be declared? and where should this function be called? And how do we pass the values of the product ,i.e., name, id, price, etc to the function.

I'm not a developer and will use help of a developer to get the information into the datalayer from the backend.

Emanuele Leoni Emanuele Leoni · Accepted Answer · 2014-10-21T11:09:35

Try this HTML:

<body>
  ...
  ...
  <a class="toMisure" data-id="12345" data-name="Triblend Android T-Shirt"  href="www.example.com/12345.html">Triblend Android T-Shirt</a>
</body>

And this Javascript Jquery:

<script>
$(function(){
 $('.toMisure').click(function(){
    dataLayer.push({
      'event': 'productClick',
      'ecommerce': {
      'click': {
      'actionField': {'list': 'Search Results'},      
      'products': [{
      'name': $(this).attr('data-name'),                      
      'id': $(this).attr('data-id'),
      'price': ...,
      'brand': ...,
      'category': ...,
      'variant': ...
     }]
    }
   },
   'eventCallback': function() {
     document.location = $(this).attr('href')
   }
  });
 });
});
</script>

Passig all other product attribute by data-attribute in tag a

Then create on analytics the Event "Product Click" than explain here

Hope helps you!

Google Tag Manager enhanced ecommerce data layer

2 Answers