My Step-By-Step Blueprint (100+ Pages) For Learning and Mastering GTM Data Layers

Get The Only Ebook On GTM Data Layer Ever Published (100+ pages). Learn & Master Data Layers

Yes I want the ebook

Last Updated: August 20, 2022

If you are using Google Tag Manager for implementing enhanced ecommerce tracking on your website, the data layer is the single source of truth that defines your website-related data, ecommerce data, campaign data and user data as well. 

Prerequisites for pulling ecommerce data from the data layer

1. You must have an ecommerce website
2. You have deployed data layer on the website
3. Google Tag Manager is installed on your website
4. Good knowledge of HTML, DOM and JavaScript
5. Good understanding of GTM variables and triggers
6. Datalayer Checker Chrome extension is installed in your browser

Note: If you are brand new to the concept of the data layer, then check out the following article first:
Google Tag Manager Data Layer Tutorial with Examples

My Step-By-Step Blueprint (100+ Pages) For Learning and Mastering GTM Data Layers

Get The Only Ebook On GTM Data Layer Ever Published (100+ pages). Learn & Master Data Layers

Yes I want the ebook

Understanding the ecommerce data layer

During any ecommerce events like product impression, product click, add to cart, checkout, and transaction, the data layer is updated in the backend using the ‘datalayer.push()’ method. 

A sample data layer code when the product detail view event happens will look like below:

<script> 
dataLayer.push({ 
  'event': ‘productDetail', 
  'ecommerce': { 
    ‘detail': {                               // ‘View' actionFieldObject measures. 
      'product': [{                           
          'id': '12345',
'name': 'T-shirt’, 
          'price': '15.25', 
          'category': 'mens',
      }] 
    } 
  } 
}); 
</script>

You can navigate to any of the product pages on your website and then click on the ‘Datalayer Checker’ extension to validate if the product detail view is pushed to the data layer.

You should see the ‘productDetail’ event marked in a yellow circle. This is the same data layer variable ‘event’ that we have declared in the above code.

Now click on the ‘productDetail’ event to see the exact details passed.

As you can see in the image above, the data layer is populated with ecommerce details. 

Follow the steps below to pull ecommerce data from the data layer in GTM

Step-1: Navigate to your GTM container and click on ‘Variables’

Step-2: Click on ‘New’ under ‘User-Defined Variables’. 

Step-3: Select the variable type as ‘Data Layer Variable’.

Step-4: Name your variable as “Product Name” and enter “product.name” in the ‘Data Layer Variable Name’ field.

Step-5: Save the variable and similarly create other variables Product ID, Product Price, Product Category

Step-6: Put your GTM container in preview mode and visit the product page again.

Step-7: Select the ‘productDetail’ event from the summary tab available in the preview window and then click on ‘Variable’.

Step-8: Check for the data layer variables that you have created in the earlier steps.

You should see that the variables are populated with the data layer values.

Congratulations! You have successfully pulled ecommerce data from the data layer in GTM.

Similarly, you can create custom data layer variables for other ecommerce data as well like, product quantity, shipping amount, transaction id, revenue, etc. You can use these variables to send data to your Google Analytics tags as well as other third party tags like Facebook, Linkedin, etc.

Frequently asked questions about how to pull ecommerce data from the data layer in GTM