How to Pull Ecommerce Data From Data Layer in GTM
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
- You must have an ecommerce website
- You have deployed data layer on the website
- Google Tag Manager is installed on your website
- Good knowledge of HTML, DOM and JavaScript
- Good understanding of GTM variables and triggers
- 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
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
Why do we need to pull ecommerce data from the data layer in GTM?
The data layer is the single source of truth that defines your website-related data, ecommerce data, campaign data and user data as well.
If you are using Google Tag Manager, you can send the ecommerce data from the data layer in GTM and then forward it to another analytics tool such as Google Analytics, Facebook, Linkedin, Twitter, etc.
What is a data layer push and why is it needed?
“datalayer.push()” is code that allows you to update data stored in the data layer. Let’s suppose you have an ecommerce website and want to track ecommerce transactions. As every transaction id will be unique and will be generated only when the user completes the purchase.
This kind of data can not be directly accessed from GTM. Here the “datalayer.push()” code updates the data layer in real-time and then only the transaction id will be made available in GTM for further use.
Can you overwrite the ecommerce data layer variables?
Yes, you can, by pushing a variable of the same name as an existing variable, but with a new value to the data layer. Let us suppose your existing data layer contains a product quantity variable and its current value is 4:
<script>
dataLayer = [{‘productQuantity’: ‘4’,’productDiscount’: ’20’}];
</script>
Now if user adds one more product to cart, you can use the push method, like the one below:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({‘productQuantity’: ‘5’});
</script>
The value of productQuantity data layer variable would be overwritten and its new value will be 5.
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
- You must have an ecommerce website
- You have deployed data layer on the website
- Google Tag Manager is installed on your website
- Good knowledge of HTML, DOM and JavaScript
- Good understanding of GTM variables and triggers
- 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
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
Why do we need to pull ecommerce data from the data layer in GTM?
The data layer is the single source of truth that defines your website-related data, ecommerce data, campaign data and user data as well.
If you are using Google Tag Manager, you can send the ecommerce data from the data layer in GTM and then forward it to another analytics tool such as Google Analytics, Facebook, Linkedin, Twitter, etc.
What is a data layer push and why is it needed?
“datalayer.push()” is code that allows you to update data stored in the data layer. Let’s suppose you have an ecommerce website and want to track ecommerce transactions. As every transaction id will be unique and will be generated only when the user completes the purchase.
This kind of data can not be directly accessed from GTM. Here the “datalayer.push()” code updates the data layer in real-time and then only the transaction id will be made available in GTM for further use.
Can you overwrite the ecommerce data layer variables?
Yes, you can, by pushing a variable of the same name as an existing variable, but with a new value to the data layer. Let us suppose your existing data layer contains a product quantity variable and its current value is 4:
<script>
dataLayer = [{‘productQuantity’: ‘4’,’productDiscount’: ’20’}];
</script>
Now if user adds one more product to cart, you can use the push method, like the one below:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({‘productQuantity’: ‘5’});
</script>
The value of productQuantity data layer variable would be overwritten and its new value will be 5.
My best selling books on Digital Analytics and Conversion Optimization
Maths and Stats for Web Analytics and Conversion Optimization
This expert guide will teach you how to leverage the knowledge of maths and statistics in order to accurately interpret data and take actions, which can quickly improve the bottom-line of your online business.
Master the Essentials of Email Marketing Analytics
This book focuses solely on the ‘analytics’ that power your email marketing optimization program and will help you dramatically reduce your cost per acquisition and increase marketing ROI by tracking the performance of the various KPIs and metrics used for email marketing.
Attribution Modelling in Google Analytics and BeyondSECOND EDITION OUT NOW!
Attribution modelling is the process of determining the most effective marketing channels for investment. This book has been written to help you implement attribution modelling. It will teach you how to leverage the knowledge of attribution modelling in order to allocate marketing budget and understand buying behaviour.
Attribution Modelling in Google Ads and Facebook
This book has been written to help you implement attribution modelling in Google Ads (Google AdWords) and Facebook. It will teach you, how to leverage the knowledge of attribution modelling in order to understand the customer purchasing journey and determine the most effective marketing channels for investment.