Data Layers for Enhanced Ecommerce Guide

Colin Differ

24 June 2020

When it comes to using Data Layers for Enhanced Ecommerce in Google Analytics, we felt it needed a whole separate guide so we can really get into the details of it. This guide is going to talk about what Data Layers you will need to enable Enhanced Ecommerce, what each Data Layer does, and where to use them.

What are Data Layers?

As we mentioned in the previous article, a Data Layer is a JavaScript object which stores particular information in a certain format; it’s a layer of data. The Data Layer cannot be seen by your users (unless looking at the source code or through a tool), but it can be read by Google Tag Manager and,if certain parameters are used, that same information can be pulled into Google Analytics and other tools.

Why are Data Layers important for Enhanced Ecommerce in Google Analytics?

Data Layers are vital in pushing the information into the individual Enhanced Ecommerce. You will probably need to create Data Layers for pretty much every single page on your website (most of the time) and in some cases, a page will have more than one on it. It’s important that the Data Layers are laid out exactly as Google tells us to, otherwise the information won’t be pushed into Google Analytics

The Product Impressions Data Layer

What is the Product Impressions Data Layer?

The Product Impression Data Layer measures how many times a product has been seen whilst in a list of other products, such as a category page or a listing page. Essentially, any time a product is shown BEFORE you click into the product page.

What Google Analytics Report is the Product Impression Data Layer used for?

The product impression Data Layer pushes data into the Product List report and a little bit into the Product Performance report in Google Analytics. This will push data into the following columns:

  • Product List Name
  • Product List View
  • Product List Position
  • Product Name
  • Product SKU

Where to Place the Product Impressions Data Layer?

The Impression Data Layer should be placed anywhere there is a list of products. It should be placed as high as possible in the <head> so it loads as soon as the page loads. If you have an infinite scrolling page, the Data Layer should load when the products do.

It doesn’t have to be more than one product, it’s just the part before your users click on to the product page:

What Variables does the Product Impression Data Layer need?

[table id=6 /]

What does the Product Impression Data Layer Look Like?

The product Impression data should hold as many products as you have on that page. You may need to split this into a number of different Data Layers if you have too many products on the page (say over 40) or if you have a scrolling page. The main consistency has to be the Product Position. The data is as below:

<script>

dataLayer.push({

'event': 'prodImpr',      

  'ecommerce': {

    'currencyCode': 'GBP',                      

    'impressions': [

     {

       'name': 'Product 1',      

       'id': '345678',

       'price': '10.99',

       'brand': 'Propellernet',

       'category': 'Shorts',

       'variant': 'Blue',

       'list': 'Homepage',

       'position': 1

     },

     {

       'name': 'Product 2',

       'id': '456789',

       'price': '45.99',

       'brand': 'Propellernet',

       'category': 'Trousers',

       'variant': 'Red',

       'list': 'Homepage',

       'position': 2

     },

                 {

       'name': 'Product 3',

       'id': '567890',

       'price': '105.99',

       'brand': 'Propellernet',

       'category': 'Coat',

       'variant': 'Red',

       'list': 'Homepage',

       'position': 3

     }]

  }

});

</script>

The Product Click Data Layer

What is the Product Click Data Layer?

The Product Click Data Layer uses the same information as the Product Impressions Data Layer but informs Google Analytics that someone has clicked on one of the products (rather than just seen it). It is important that the same information that fires in the impression data layer is also used in the Click Data Layer

What Google Analytics Report is the Product Click Data Layer used for?

The product impression Data Layer pushes data into the Product List report in Google Analytics.

This will push data into the following columns:

  • Product List Name
  • Product List Click
  • Product List CTR
  • Product List Position
  • Product Name
  • Product SKU

Where to Place the Product Click Data Layer?

The Data Layer should fire whenever a user clicks to view a product page. It should fire on the list page, or category page, wherever the Product Impression Data Layer should fire.

What Variables does the Product Click Data Layer need?

The below information should be the same as what was presented in the product Impression Data Layer.

[table id=7 /]

What does the Product Click Data Layer Look Like?

The Click Data Layer should only hold information about one product; the one that was clicked. It should have the same information as the Impression. If this doesn’t happen, a new product will be created in the report and your information will not join up. The ‘list’ variable in the action field, should be the same as that in the Impression Data Layer, it’s just in a different place

<script>

dataLayer.push({

'event': 'prodClick', 

  'ecommerce': {

   'currencyCode': 'GBP',                      

    'click': {

                'actionField': {'list': 'Homepage'},

     'products': [{

       'name': 'Product 1',      

       'id': '345678',

       'price': '10.99',

       'brand': 'Propellernet',

       'category': 'Shorts',

       'variant': 'Blue',

       'list': 'Homepage',

       'position': 1

          }]

  }

  },

});

</script>

The Product Detail Data Layer

What is the Product Detail Data Layer?

The Product Detail data layer informs Google Analytics that someone has visited a product page. It is an essential part of Enhanced Ecommerce.

What Google Analytics Report is the Product Detail Data Layer used for?

The Detail Data Layer passes information to the Shopping Behaviour Report and the Product Performance Report and the Shopping Behaviour section in the Product Performance report.

Where to Place the Product Detail Data Layer?

The Product Detail Data Layer should be placed on the main product page. It should be placed as high as possible in the <head> so it loads as soon as the page loads.

What Variables does the Product Detail Data Layer need?

[table id=8 /]

What does the Product Detail Data Layer Look Like?

<script>

dataLayer.push({

'event': 'prodDetail', 

  'ecommerce': {

  'currencyCode': 'GBP',

    'detail': {

                'actionField': {'list': 'Homepage'},

     'products': [{

       'name': 'Product 1',      

       'id': '345678',

       'price': '10.99',

       'brand': 'Propellernet',

       'category': 'Shorts',

       'variant': 'Blue'   

          }]

  }

  },

});

</script>

The Add to Cart Data Layer

What is the Add To Cart Data Layer?

It may sound pretty self-explanatory but the Add To Cart Data Layer informs Google Analytics that a product has been added to the basket. It helps join up the Impressions, Click and Detail Data Layers to the checkout process

What Google Analytics Report is the Add To Cart Data Layer used for?

The Add To Cart Data Layer adds data to the Shopping Behaviour Report, the Product Performance Report and the Product Performance List Report.

Where to Place the Add To Cart Data Layer?

The Add To Cart Data Layer should fire whenever a product is added to the basket. This can be anywhere, for example, on the product page, checkout process, or anywhere where a product is added to the basket. It can fire as many times on a page as necessary.

What Variables does the Add To Cart Data Layer need?

[table id=9 /]

What does the Add To Cart Data Layer Look Like?

<script>

dataLayer.push({

   'event':'addToCart',

   'ecommerce': {

     'currencyCode':'GBP',

     'add': {

       'products': [{

         'id':'345678',

         'name': 'Product 1',

         'price':'10.99',

         'brand':'Propellernet',

         'category':'Shorts',

         'variant':'Blue',

         'quantity': 1

      }]

    }

  }

});

</script>

The Remove from Cart Data Layer

What is the Remove from Cart Data Layer?

The Remove from Cart Data Layer is the same as the Add To Cart one, except it informs Google Analytics that a product has been removed from the basket

What Google Analytics Report is the Remove from Cart Data Layer used for?

The Remove from Cart Data Layer adds data to the Shopping Behaviour section of the Product Performance Report.

Where to Place the Remove from Cart Data Layer?

The Remove from Cart Data Layer should fire whenever a product is removed from the basket. This can be anywhere. On the product page, checkout process, anywhere where a product is removed to the basket. It can fire as many times on a page as necessary

What Variables does the Remove from Cart Data Layer need?

[table id=10 /]

What does the Remove from Cart Data Layer Look Like?

<script>

dataLayer.push({

   'event':'removeFromCart',

   'ecommerce': {

     'currencyCode':'GBP',

     'remove': {

       'products': [{

         'id':'345678',

         'name':'Product 1'',

         'price':'10.99',

         'brand':'Propellernet',

         'category':'Shorts',

         'variant':'Blue',

         'quantity': 1

      }]

    }

  }

});

</script>

The Promotion Impressions Data Layer

What is the Promotion Impressions Data Layer?

The Promotions Impressions Data Layer measures the use of banners or internal promotions on the site and is the first of two Data Layers in Enhanced Ecommerce which are not product-related. Learn more about this at our article How to Set Up Internal Promotion Tracking & Report in Google Analytics. An example on Amazon would be:

What Google Analytics Report is the Promotion Impressions Data Layer used for?

The Promotions Impressions Data Layer push data into the Internal Promotion report which can be found under Marketing.

Where to Place the Promotion Impressions Data Layer?

The Promotion Impressions Data Layer should fire on any page where you want to track a banner or promotion. It should be placed as high as possible in the <head> so it loads as soon as the page loads.

What Variables does the Promotion Impressions Data Layer need?

[table id=11 /]

What does the Promotion Impressions Data Layer Look Like?

<script>

dataLayer.push({

  'ecommerce': {

    'promoView': {

      'promotions': [  

       {

         'id': 'GA-Train-Jun-20',

         'name': 'Google Analytics Training June 2020',

         'creative': 'Banner 1',

         'position': '1'

       },

       {

         'id': 'GTM-Train-Jun-20',

         'name': 'Google Tag Manager Training June 2020',

         'creative': 'Banner 1',

         'position': '2'

       }]

    }

  }

});

</script>

The Promotion Clicks Data Layer

What is the Promotion Click Data Layer?

The promotion click Data Layer sends promotion data when a user clicks on one of your banners or internal promotions.

The Promotion Click Data Layer uses the same information as the Promotion Impressions Data Layer but informs Google Analytics that someone has clicked on one of the banners (rather than just seen it). It is important that the same information that fires in the impression Data Layer is also used in the Click Data Layer

What Google Analytics Report is the Promotion Click Data Layer used for?

The Promotions Click Data Layer pushes data into the Internal Promotion report, which can be found under Marketing.

Where to Place the Promotion Click Data Layer?

The Data Layer should fire whenever a user clicks to view a banner.

What Variables does the Promotion Click Data Layer need?

[table id=12 /]

What does the Promotion Click Data Layer Look Like?

<script>

dataLayer.push({

'event': 'promoClick',

  'ecommerce': {

    'promoClick': {

      'promotions': [{

         'id': 'GA-Train-Jun-20',

         'name': 'Google Analytics Training June 2020',

         'creative': 'Banner 1',

         'position': '1'

       }]

    }

  },

});

</script>

The Checkout Data Layer

What is the Checkout Data Layer?

The Checkout Data Layer helps measure every step in your Checkout Process. This should start after a user has stopped adding products to the basket and starts the buying method. Steps are a number in the data layer which should correlate to your checkout process

What Google Analytics Report is the Checkout Data Layer used for?

This Data Layer sends data to most reports in Enhanced Ecommerce. The Product List Performance, Product Performance and Shopping Behaviour. More importantly, it sends the majority of data to the Checkout Behaviour Report, which is its main purpose.

Where to Place the Checkout Data Layer?

It should be fired on every page of the checkout process except the confirmation page. It should be placed as high as possible in the <head> so it loads as soon as the page loads.

What Variables does the Checkout Data Layer need?

[table id=13 /]

What does the Checkout Data Layer Look Like?

<script>

  dataLayer.push({

    'event': 'checkout',

    'ecommerce': {

      'checkout': {

        'actionField': {'step': 1},

        'products': [{

          'name': 'Product 1',

          'id': '345678'',

          'price': '10.99',

          'brand': 'Propellernet',

          'category': 'Shorts',

          'variant': 'Blue',

          'quantity': 1

       }]

     }

   },

   });

</script>

The Checkout Option Data Layer

What is the Checkout Option Data Layer?

The Checkout Option Data Layer measures specific actions on any of the steps of the checkout journey that aren’t related to the simple product information that’s taken care of in the standard Checkout Data Layers. This is an optional Data Layer.

Examples would be:

  • Payment Type (Credit Card, PayPal, Google Pay etc)
  • Shipping Option (Free, Paid etc)
  • Gift Wrapping

These will be very specific to your website, and can be used to track anything that your customers are choosing in addition to normal products.

What Google Analytics Report is the Checkout Option Data Layer used for?

The Checkout Option Data Layer only sends information to the Checkout Behaviour Report, and only in a small part of that. In each step in GA, you will see a drop-down box where you can see the options you’ve chosen:

Where to Place the Checkout Option Data Layer?

The data layer should fire once as the user journeys onto the next step of the checkout process; for instance, when they click next.

What Variables does the Checkout Option Data Layer need?

[table id=14 /]

What does the Checkout Option Data Layer Look Like?

<script>

  dataLayer.push({

    'event': 'checkoutOption',

    'ecommerce': {

      'checkout_option': {

        'actionField': {'step': 1, 'option': 'gift wrapping'}

      }

    }

  });

</script>

The Purchase Data Layer

What is the Purchase Data Layer?

The Purchase Data Layer pushes all of the final transaction data into Google Analytics. This shows what people have bought, total revenue, price etc. For those of you who already have Standard Ecommerce set up, this is a different Data Layer than you currently have, and it will need to replace it.

What Google Analytics Report is the Purchase Data Layer used for?

This will be used to populate all of the Ecommerce Reports in some way, but mostly the Sales Performance report and the Product Performance report.

Where to Place the Purchase Data Layer?

The Purchase Data Layer should be fired on the confirmation page only. It should be placed as high as possible in the <head> so it loads as soon as the page loads.

What Variables does the Purchase Data Layer need?

[table id=15 /]

What does the Purchase Data Layer Look Like?

<script>

dataLayer.push({

  'ecommerce': {

    'purchase': {

      'actionField': {

        'id': '123',   

        'affiliation': 'Online Store',

        'revenue': '22.99',   

        'tax':'4.60',

        'shipping': '2.00',

        'coupon': 'SUMMER_SALE'

      },

      'products': [{    

        'name': 'Product 1'

        'id': '345678',

        'price': '10.99',

        'brand': 'Propellernet',

        'category': 'Shorts',

        'variant': 'Blue',

        'quantity': 1

      

       },

       {

        'name': 'Product 2',

        'id': '32145',

        'price': '5',

        'brand': 'Propellernet',

        'category': 'Shirt',

        'variant': 'Red',

        'quantity': 2

       }]

    }

  }

});

</script>

The Refund Data Layer

What is the Refund Data Layer?

This pushes data if any refunds are made online. This is the most un-used Data Layer, as most stores don’t have the ability to process refunds online.

What Google Analytics Report is the Refund Data Layer used for?

This is only used on the Sales Performance Report and the Product Performance Report.

Where to Place the Refund Data Layer?

This should be placed on any confirmation page where a refund has been placed.

What Variables does Refund Data Layer need?

[table id=16 /]

What does Refund Layer Look Like?

For a full refund use:

<script>
dataLayer.push({
  'ecommerce': {
    'refund': {
      'actionField': {'id': 'T12345'}        
    }
  }
});
</script>

For a partial refund use:

<script>

dataLayer.push({

  'ecommerce': {

    'refund': {

      'actionField': {'id': 'T12345'},     

      'products': [

            {'id': 'P4567', 'quantity': 1}, 

            {'id': 'P8901','quantity': 2}

       ]

     }

  }

});

</script>

Please keep checking back where we will write an article about how to set up Enhanced Ecommerce with these Data Layers.

Need Some Help?

If you’d like to find out more about how to Ecommerce Tracking come and join us at our Google Analytics Training and Google Tag Manager Training sessions. We also offer a wide range of Analytics services and Google Tag Manager consultancy services