Ecommerce Tracking Google Tag Manager (GTM) – Tutorial
Table of Contents on Ecommerce Tracking Google Tag Manager (GTM) – Tutorial
- Integrate your Shopping Cart with Google Tag Manager
- Deploy Universal Analytics Tracking via GTM
- Turn on Ecommerce Tracking and Enable Enhanced Ecommerce Reporting in Google Analytics
- Enable Ecommerce Tracking in your Shopping Cart
- Create and Add an Ecommerce Data Layer to your Website
- Configure your Google Tag Manager for Ecommerce Tracking
This article is in conjunction with the article ecommerce tracking in Google Analytics – complete guide where I introduce the concept of ecommerce tracking in Google Analytics and explain various ecommerce terms in great detail.
In the current article, I will show you how to install enhanced ecommerce tracking via Google Tag Manager (GTM).
Follow the steps below to implement enhanced ecommerce tracking via GTM:
Step-1: Integrate your Shopping Cart with Google Tag Manager
This involves adding a ‘GTM container code’ on each page of your ecommerce website, immediately after the opening body tag <body>.
If you are brand new to Google Tag Manager and wish to learn more about it, then read this article: Beginners guide to Google Tag Manager
If you are using a custom shopping cart then ask your developer, to add the GTM container code, immediately after the opening body tag <body>, on all website pages.
If you are using a third-party shopping cart like Shopify, then you may need to refer to their help documentation or ask their customer support about, “where exactly to add the GTM container code?”. Most likely, you would need to edit some template file and add your GTM code there.
Then there are shopping carts like Magento, where you do not need to add any GTM container code. You just supply your container ID and the GTM is automatically installed on your website.
Bear in mind that there are many shopping carts that still do not integrate with GTM. If you are using one of such shopping carts, then you should stop reading this article right now and switch your shopping cart to the one, which does integrate with GTM, preferably Shopify.
Step-2: Deploy Universal Analytics Tracking via GTM
Create and publish a Universal Analytics tag on your website via GTM and then remove the corresponding hard-coded Google Analytics tracking code from all of the website pages:
It is important that you remove the hard-coded GA Tracking Code, otherwise, your GA tracking code will fire twice, once via GTM and once via hard-coded tag, which could inflate your GA data.
If you are not sure, about the difference between ‘Google Analytics’ and ‘Universal Analytics’, then read this article: Difference between Google Analytics and Universal Analytics
Some shopping carts like Shopify do not let you remove the hard-coded Google Analytics tracking code from your website.
In that case, do not deploy the Universal Analytics tag on your website via GTM, otherwise, your GA tracking code will fire twice, once via GTM and once via the hard-coded tag, which could inflate your GA data.
So before you deploy a Universal Analytics tag on your website via GTM, make sure that you can remove the hard-coded GA tracking code from your website.
Get the E-Book (62 Pages)
Get the E-Book (104 Pages)
Step-3: Turn on Ecommerce and Enable Enhanced Ecommerce Reporting in Google Analytics
Google Analytics will report ecommerce data in your reporting view, only when the ecommerce tracking has been turned on at the view level.
Enabling enhance ecommerce reporting will also provide you with important steps in standard purchase funnels, like product view, add to cart, checkout steps and transaction details.
Follow the steps below:
Step-3.1: Login to your Google Analytics account and then navigate to the ‘Admin’ section of your view:
Step-3.2: Click on ‘Ecommerce settings‘ link (under the ‘view’ column):
Step-3.3: Switch the toggle button to ‘ON’ (under ‘Enable Ecommerce Status’) and then switch the toggle button to ‘ON’ (under ‘Enable Enhanced Ecommerce Reporting’):
Step-3.4: Click on ‘Save’:
If you have multiple steps in the checkout section, you can add those steps as funnel steps (we will talk about it later in the article). Your GA reporting view is now ready to collect and report on enhanced ecommerce data.
Step-4: Enable Ecommerce Tracking in your Shopping Cart (optional)
Many shopping carts these days provide built-in ecommerce tracking. This tracking is either automatically enabled or you need to manually enable it.
For example, in the case of Shopify, ecommerce tracking is already enabled for all Shopify customers. Shopify does not use any data layer for ecommerce tracking. So whether or not you use GTM, your ecommerce tracking is already installed, up and running. Once you have turned on ecommerce tracking in Google Analytics, you should start seeing the ecommerce data from Shopify in your GA reports. You don’t need to do anything else.
Then there are shopping carts like Magento where you may need to purchase an extension in order to install ecommerce tracking via GTM. For example, Magento provides built-in data layer support for transaction data via Google Tag Manager Magento Connect extension:
Once you have installed this extension and enabled it, it will automatically create a data layer for you, on the order confirmation page and populate it with transaction data. That’s it! Your ecommerce tracking is now enabled via GTM. You don’t need to do anything else.
However if your shopping cart does not provide built-in data layer support for transaction data or pre-built ecommerce tracking or you use a custom shopping cart, then follow the next step.
Step-5: Create a Datalayer and Add Enhanced Ecommerce Events to the Data Layer on your Website
Google recommends implementing enhance ecommerce using a data layer.
DataLayer is an array of variables which provides a safer and reliable way to pull data from the presentation layer and send it to GTM.
For more details on data layers, you can read this article: Google Tag Manager Data Layer Tutorial with Examples.
To cut a long story short, data layer variables enable Google Tag Manager to read values from your data layer implementation and pass those values to tags, triggers, and other variables. A data layer object is made up of a list of key/value pairs
To create a data layer copy-paste the following code just after opening of <head> tag before Google tag manager container code.
<script>
dataLayer=[];
</script>
Congratulations, you just created your first data layer.
Enhanced Ecommerce Events:
Enhanced ecommerce events enable the measurement of user interactions with products on ecommerce websites across the user’s shopping experience, including:
- Product impressions
- Product clicks
- Viewing product details
- Adding a product to a shopping cart
- Initiating the checkout process
- Transactions
Now in order to track enhance ecommerce events we need to pass these events to dataLayer using dataLayer.push method. Following section will give you more details on measuring enhance e-commerce activities
Measuring Product Impression
Whenever the user lands on the home page or product category page of your website, the user is shown with multiple products. Here we are measuring which products are shown to the user using product impression events.
Ask your developer to fire below code whenever the page loads with multiple products on the page
<script>
// Measures product impressions and also tracks a standard
// pageview for the tag configuration.
// Product impressions are sent by pushing an impressions object
// containing one or more impressionFieldObjects.
dataLayer.push({
‘ecommerce’: {
‘currencyCode’: ‘US Dollor’, // Local currency is optional.
‘impressions’: [
{
‘name’: ‘T-Shirt’, // Name or ID is required.
‘id’: ‘2321’,
‘price’: ‘11.25’,
‘brand’: ‘Brandname’,
‘category’: ‘Apparel’,
‘variant’: ‘Gray’,
‘list’: ‘Search Results’,
‘position’: 1
},
{
‘name’: ‘Mens T-Shirt’,
‘id’: ‘6566’,
‘price’: ‘73.75’,
‘brand’: ‘Brand Name’,
‘category’: ‘Apparel’,
‘variant’: ‘Black’,
‘list’: ‘Search Results’,
‘position’: 2
}]
}
});
</script>
The above code will send product impression event to the data layer and now pull this data and send it to Google Tag Manager.
Ask your developer to add the modified data layer code (data layer code with server-side script) just after the opening body tag (<head>) and before the Google Tag Manager container code. This will automatically update the dataLayer with current product available on the page.
Measuring Product Clicks
To measure product clicks, ask your developer to fire below code whenever the user clicks on the product link
<script>
dataLayer.push({
‘event’: ‘productClick’,
‘ecommerce’: {
‘currencyCode’: ”United States Dollar’,
‘add’: { // ‘add’ actionFieldObject measures.
‘products’: [{ // adding a product to a shopping cart.
‘name’: ‘t-shirt’,
‘id’: ‘12345’,
‘price’: ‘16.25’,
‘brand’: ‘brandname’,
‘category’: ‘mens’,
‘variant’: ‘black’,
‘position’: 5
}]
}
}
});
</script>
Measuring Product Detail Views
The next step is to measure product detail views by the users. This event is fired on page load whenever the product detail page is loaded along with other product field objects like price, colour, product id, etc.
Ask your developer to fire below code whenever the product detail page loads.
<script>
dataLayer.push({
‘event’: ‘productView’,
‘ecommerce’: {
‘ProductView’: { // ‘View’ actionFieldObject measures.
‘products’: [{
‘name’: ‘T-shirt,
‘id’: ‘12345’,
‘price’: ‘15.25’,
‘brand’: ‘brand name’,
‘category’: ‘mens’,
‘variant’: ‘black’,
}]
}
}
});
</script>
The above code will send the product view event to data layer along with other product details which can be pulled using GTM and sent to Google Analytics
Measuring Additions or Removals from a Shopping Cart
In a standard purchase funnel, the user may add or remove products to the cart and measuring these events is also important. Just like we did dataLayer push events for product impression and product detail view, you can implement the cart events as well
Ask your developer to fire below code whenever the product is added to the cart.
<script>
dataLayer.push({
‘event’: ‘addtocart’,
‘ecommerce’: {
‘currencyCode’: ”United States Dollar’,
‘add’: { // ‘add’ actionFieldObject measures.
‘products’: [{ // adding a product to a shopping cart.
‘name’: ‘t=shirt’,
‘id’: ‘12345’,
‘price’: ‘16.25’,
‘brand’: ‘brandname’,
‘category’: ‘mens’,
‘variant’: ‘black’,
‘quantity’: 2
}]
}
}
});
</script>
The above code will send add to cart event to data layer along with other product details.
Similarly, when the user removes any product from the cart fire the below code
<script>
dataLayer.push({
‘event’: ‘removeFromCart’,
‘ecommerce’: {
‘remove’: { // ‘remove’ actionFieldObject measures.
‘products’: [{ // removing a product to a shopping cart.
‘name’: ‘t-shirt’,
‘id’: ‘12345’,
‘price’: ‘16.25’,
‘brand’: ‘brandname’,
‘category’: ‘mens’,
‘variant’: ‘black’,
‘quantity’: 1
}]
}
}
});
</script>
Measuring Checkout Steps
To measure the checkout process that the user follows once he clicks on the checkout button and provides details like shipping address, payment method and sometimes uses coupon codes as well (if you have it), we use checkout event and push it to dataLayer.
You can add multiple checkout events if your checkout process contains multiple steps like adding shipping address, selecting payment method etc.
Ask your developer to fire below code when checkout process starts.
<script>
dataLayer.push({
‘event’: ‘checkout’,
‘ecommerce’: {
‘currencyCode’: ”United States Dollar’, //replace with user currency
‘checkout’: {
‘actionField’: {‘step’: 1},
‘products’: [{
‘name’: ‘t-shirt’,
‘id’: ‘12345’,
‘price’: ‘16.25’,
‘brand’: ‘brandname’,
‘category’: ‘mens’,
‘variant’: ‘black’,
‘quantity’: 1
}]
}
}
})
</script>
If you have multiple steps in the checkout, you can fire the checkout event again and mention the step number in ‘actionField’: {‘step’: 2}, in above code.
Additionally, you will also need to configure Funnel steps in Google Analytics. You can give a descriptive name to each of the steps in the checkout process.
To configure these names, visit the Admin section of the Google Analytics Web Interface, select the view (profile) and click on Ecommerce Settings. Follow the ecommerce set-up instructions to label each checkout step you want to track like below:
Measuring Transactions or Purchase Events
Purchase event is the final step in the enhance ecommerce funnel. Ask your developer to fire below code whenever the transaction happens. You can also pass the purchase event on the order confirmation page or thank you page load.
<script>
dataLayer.push({
‘event’: ‘purchase’,
‘ecommerce’: {
‘currencyCode’: ‘United States Dollar’, //replace with user currency
‘purchase’: {
‘actionField’: {
‘id’: ‘T12345’, // Transaction ID. Required for purchases and refunds.
‘revenue’: ‘250’, // Total revenue including tax.
‘tax’:”,
‘shipping’: ”,
‘coupon’: ” // Optional fields may be omitted or set to empty string.
},
‘products’: [{ // List of productFieldObjects.
‘name’: ‘t-shirt’, // Name or ID is required.
‘id’: ‘12345’,
‘price’: ‘16.25’,
‘brand’: ‘brandname’,
‘category’: ‘mens’,
‘variant’: ‘Black’,
‘quantity’: 1
},
]
}
}
});
</script>
As of now we have sent enhance ecommerce events to dataLayer only. Since all these events are codes to be executed on corresponding conditions, copy-paste all the data layer code in a notepad file and send it to your developer. Ask them to write some server-side script (like PHP) which automatically retrieves ecommerce data from your shopping cart software and populates the various fields (server variables) of your data layer code with the actual ecommerce data.
Tell them to keep the following points in mind, while working on the data layer code:
- Data layer variable names are case sensitive. So keep names of the data layer variables intact. For example use ‘transactionId’ instead of ‘TransactionId’, ‘TransactionID’ or something else. Otherwise, ecommerce tracking may not work.
- Do not use currency identifiers (like $, £, €, etc) in the numeric fields and/or separate numbers in the numeric fields by a comma. This can create tracking issues.
- Make sure that the data layer code is not placed after the Google Tag Manager container code, as in that case, ecommerce tracking may not work.
The next step will be configuring the Google Tag Manager in order to sent data to Google Analytics.
Step-6: Configure your Google Tag Manager for Enhanced Ecommerce Tracking
#6.1 Log into your Google Tag Manager account and create a new tag with the following specifications for every enhance ecommerce event.
Tag for Measuring Product Impression:
Tag Name: Ecommerce Product Impression
Tag Type: Universal Analytics
Track Type: Page View
Google Analytics Settings: <enter your property ID here>
Enable Enhanced Ecommerce Features : True: Use Data Layer
Triggering:
Trigger Name: Product Impression
Trigger Type: Pageview
This Trigger fires on: Some Pageviews
Fire this trigger when an Event occurs and all of these conditions are true
url equals <enter the URI of your product impression page here>
Note: If you have multiple Page URL product Impression, you can use regex for providing the list of URL
Here I am using regex as “/|category/” in which “/” represents the home page where I have multiple products and “|” represents OR condition and the next part is “category/” which is my category page URL and have products listed there.
Your final tag may look like the one below:
Tag for Measuring Product Clicks
Tag Name: eCommerce Product Clicked
Tag Type: Universal Analytics
Track Type: Event
Event Category: eCommerce
Event Action: Product Click
Event Label: {{product_clicked}} Note: Here I am Using variable which contains the name of the product which is clicked.
Google Analytics Settings: <enter your property ID here>
Enable Enhanced Ecommerce Features : True: Use Data Layer
Triggering:
Trigger Name: Product Clicked
Trigger Type: Custom Event
Event name: productClick
This trigger will fire when the custom event equals ‘productClick’. Your final tag may look like the one below:
Tag for Measuring Product Detail Views
Tag Name: eCommerce Product Detail
Tag Type: Universal Analytics
Track Type: Event
Event Category: eCommerce
Event Action: Product Detail View
Event Label: {{product_detail}} Note: Here I am Using variable which contains the name of the product which is viewed.
Google Analytics Settings: <enter your property ID here>
Enable Enhanced Ecommerce Features : True: Use Data Layer
Triggering:
Trigger Name: Product Detail View
Trigger Type: Custom Event
Event name: productView
This trigger will fire when the custom event equals ‘productView’. Your final tag may look like the one below:
Tag for Measuring Additions to a Shopping Cart
Tag Name: eCommerce Add to Cart
Tag Type: Universal Analytics
Track Type: Event
Event Category: eCommerce
Event Action: Add to Cart
Event Label: {{product_name added to cart}} Note: Here I am Using variable which contains the name of the product which is added to cart.
Google Analytics Settings: <enter your property ID here>
Enable Enhanced Ecommerce Features : True: Use Data Layer
Triggering:
Trigger Name: ecommerce add to cart
Trigger Type: Custom Event
Event name: addtocart
This trigger will fire when the custom event equals ‘addtocart’. Your final tag may look like the one below:
Tag for Measuring Removal from Shopping Cart
Tag Name: Ecommerce- removeFromCart
Tag Type: Universal Analytics
Track Type: Event
Event Category: eCommerce
Event Action: Remove From Cart
Event Label: {{product_name removeFromcart}} Note: Here I am Using variable which contains the name of product which is removed from cart.
Google Analytics Settings: <enter your property ID here>
Enable Enhanced Ecommerce Features : True: Use Data Layer
Triggering:
Trigger Name: ecommerce remove from cart
Trigger Type: Custom Event
Event name: removeFromCart
This trigger will fire when the custom event equals ‘removeFromCart’. Your final tag may look like the one below:
Tag for Measuring Checkout Steps
Tag Name: Ecommerce- Checkout
Tag Type: Universal Analytics
Track Type: Event
Event Category: eCommerce
Event Action: Checkout Initiated
Event Label: {{Checkout_step}} Note: Here I am Using variable which contains the checkout step name like Shipping Address, Payment Method.
Google Analytics Settings: <enter your property ID here>
Enable Enhanced Ecommerce Features : True: Use Data Layer
Triggering:
Trigger Name: Checkout Initiated
Trigger Type: Custom Event
Event name: checkout
This trigger will fire when the custom event equals ‘checkout’. Your final tag may look like the one below:
Tag for Measuring Purchase Event/ Transaction
Tag Name: Ecommerce- purchase
Tag Type: Universal Analytics
Track Type: Event
Event Category: eCommerce
Event Action: Purchased Product
Event Label: {{Purchase ID}} Note: Here I am Using variable which contains the checkout step name like Shipping Address, Payment Method.
Event Value: {{Product Revenue}} Note: Here I am passing purchase amount as product revenue in Event value.
Google Analytics Settings: <enter your property ID here>
Enable Enhanced Ecommerce Features: True: Use Data Layer
Triggering:
Trigger Name: ecommerce purchase event
Trigger Type: Custom Event
Event name: purchase
This trigger will fire when the custom event equals ‘purchase’. Your final tag may look like the one below:
#6.2 Click on the ‘save’ button to create your new tag.
#6.3 Preview and debug your new tag, create a new container version and then publish the new container.
#6.4 Make sure that you are getting all of the ecommerce data in your GA report and the data is accurate.
Once you deploy these tags you will see enhanced ecommerce reports in your Google Analytics console under the ‘Conversions’ tab.
You can see multiple options available in reports as shopping behavior, checkout behavior, product performance, etc, which give you great details on all the ecommerce events happening on your website.
Other articles on specialized tracking in Google Analytics
- Ecommerce Tracking in Google Analytics – Tutorial
- Event Tracking via Google Tag Manager – Tutorial
- Event Tracking in Google Analytics – Tutorial
- Guide to Google Analytics Store Visits Tracking
- Offline Conversion Tracking in Google Analytics – Tutorial
- Implementing Ecommerce Tracking via Google Tag Manager
- Tracking Virtual Pageviews in Google Tag Manager – Tutorial
- YouTube Video tracking via Google Tag Manager
- How to Use Keyword Hero to Reveal Not Provided Keywords in Google Analytics
- Virtual pageviews in Google Analytics – Tutorial
- Google Analytics and YouTube Integration Tutorial
- Google Analytics for Facebook Tutorial
- Google Analytics Cross Domain Tracking Explained Like Never Before
- Using multiple Google Analytics tracking codes on web pages
- The one thing that you don’t know about PayPal.com and the referral exclusion list
- Calculated Metrics in Google Analytics – Tutorial
- Creating your own Google Analytics Tag Auditing System
- Tracking Site Search without Query Parameter in Google Tag Manager
- Tracking true referrals in Google Analytics when using PayPal and other payment gateways
- Phone Call Tracking in Google Analytics and Beyond
- Learn to Track Qualified and Won Leads in Google Analytics
- Introduction to Postbacks in Google Analytics
- Google Analytics Recurring Revenue and Subscriptions Tracking Tutorial
- How to track the impact of cookie consent on website traffic in Google Analytics
- Tracking Offline Conversions in Google Ads
- Implementing Scroll Tracking via Google Tag Manager
- Scroll Tracking via Scroll Depth Trigger in Google Tag Manager
- Site Search Tracking In Google Analytics Without Query Parameters
- Video Tracking via YouTube Video Trigger In Google Tag Manager
- How to Correctly Measure Conversion Date & Time in Google Analytics
- Google Analytics Social Tracking – Twitter, Facebook, Google Plus and LinkedIn
- Google Analytics Cross Domain Tracking (ga.js)
- Tracking Twitter and Linkedin Social Interactions in Google Analytics
- Creating Content Group in Google Analytics via tracking code using gtag.js
- Tracking Site Search in Google Analytics with Query Parameters
- Understanding site search tracking in Google Analytics
- Creating and Using Site Search Funnel in Google Analytics
- Learn to Setup Facebook Pixel Tracking via Google Tag Manager
- Setting up & Tracking AMP Pages in Google Analytics
- Setting up Sales Funnel across websites in Google Analytics
- Regular Expressions (Regex) for Google Analytics & Google Tag Manager – Tutorial
Frequently Asked Questions About Implementing Ecommerce Tracking via Google Tag Manager
What is ecommerce tracking?
Ecommerce tracking is a feature of Google Analytics through which you can track ecommerce data (like sales amount, number of orders, billing location, average order value, etc) of a website/mobile app in Google Analytics.
Why do you need ecommerce tracking?
If you run/manage an online store/app, you can’t just depend upon the analytics reports provided by your shopping cart. You need Google Analytics Ecommerce tracking set up for your website. It is only by using Google Analytics ecommerce tracking, you can correlate sales data with website usage data like sessions, bounce rate, traffic source/medium, landing pages, etc.
Such type of correlation analysis is required in order to understand the performance of your website landing pages and marketing campaigns. Otherwise, you may never know which landing pages and/or campaigns are driving sales and which are not.
How do I integrate my shopping cart with Google Tag Manager
This involves adding a ‘GTM container code’ on each page of your ecommerce website.
If you are using a custom shopping cart then ask your developer, to add the GTM container code, immediately after the opening body tag <body>, on all website pages.
If you are using a third-party shopping cart like Shopify, then you may need to refer to their help documentation or ask their customer support about, “where exactly to add the GTM container code?”. Most likely, you would need to edit some template file and add your GTM code there.
How do I enable enhanced ecommerce reporting in GA?
Google Analytics will report ecommerce data in your reporting view, only when the ecommerce tracking has been turned on at the view level.
To enable enhanced ecommerce reporting, login to your Google Analytics account and then navigate to the ‘Admin’ section of your view: Click on ‘Ecommerce settings‘ link (under the ‘view’ column): then switch the toggle button to ‘ON’ (under ‘Enable Ecommerce Status’) and then switch the toggle button to ‘ON’ (under ‘Enable Enhanced Ecommerce Reporting’):
Register for the FREE TRAINING...
"How to use Digital Analytics to generate floods of new Sales and Customers without spending years figuring everything out on your own."
Here’s what we’re going to cover in this training…
#1 Why digital analytics is the key to online business success.
#2 The number 1 reason why most marketers are not able to scale their advertising and maximize sales.
#3 Why Google and Facebook ads don’t work for most businesses & how to make them work.
#4 Why you won’t get any competitive advantage in the marketplace just by knowing Google Analytics.
#5 The number 1 reason why conversion optimization is not working for your business.
#6 How to advertise on any marketing platform for FREE with an unlimited budget.
#7 How to learn and master digital analytics and conversion optimization in record time.
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 Beyond
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.
About the Author
Himanshu Sharma
Table of Contents on Ecommerce Tracking Google Tag Manager (GTM) – Tutorial
- Integrate your Shopping Cart with Google Tag Manager
- Deploy Universal Analytics Tracking via GTM
- Turn on Ecommerce Tracking and Enable Enhanced Ecommerce Reporting in Google Analytics
- Enable Ecommerce Tracking in your Shopping Cart
- Create and Add an Ecommerce Data Layer to your Website
- Configure your Google Tag Manager for Ecommerce Tracking
This article is in conjunction with the article ecommerce tracking in Google Analytics – complete guide where I introduce the concept of ecommerce tracking in Google Analytics and explain various ecommerce terms in great detail.
In the current article, I will show you how to install enhanced ecommerce tracking via Google Tag Manager (GTM).
Follow the steps below to implement enhanced ecommerce tracking via GTM:
Step-1: Integrate your Shopping Cart with Google Tag Manager
This involves adding a ‘GTM container code’ on each page of your ecommerce website, immediately after the opening body tag <body>.
If you are brand new to Google Tag Manager and wish to learn more about it, then read this article: Beginners guide to Google Tag Manager
If you are using a custom shopping cart then ask your developer, to add the GTM container code, immediately after the opening body tag <body>, on all website pages.
If you are using a third-party shopping cart like Shopify, then you may need to refer to their help documentation or ask their customer support about, “where exactly to add the GTM container code?”. Most likely, you would need to edit some template file and add your GTM code there.
Then there are shopping carts like Magento, where you do not need to add any GTM container code. You just supply your container ID and the GTM is automatically installed on your website.
Bear in mind that there are many shopping carts that still do not integrate with GTM. If you are using one of such shopping carts, then you should stop reading this article right now and switch your shopping cart to the one, which does integrate with GTM, preferably Shopify.
Step-2: Deploy Universal Analytics Tracking via GTM
Create and publish a Universal Analytics tag on your website via GTM and then remove the corresponding hard-coded Google Analytics tracking code from all of the website pages:
It is important that you remove the hard-coded GA Tracking Code, otherwise, your GA tracking code will fire twice, once via GTM and once via hard-coded tag, which could inflate your GA data.
If you are not sure, about the difference between ‘Google Analytics’ and ‘Universal Analytics’, then read this article: Difference between Google Analytics and Universal Analytics
Some shopping carts like Shopify do not let you remove the hard-coded Google Analytics tracking code from your website.
In that case, do not deploy the Universal Analytics tag on your website via GTM, otherwise, your GA tracking code will fire twice, once via GTM and once via the hard-coded tag, which could inflate your GA data.
So before you deploy a Universal Analytics tag on your website via GTM, make sure that you can remove the hard-coded GA tracking code from your website.
Get the E-Book (62 Pages)
Get the E-Book (104 Pages)
Step-3: Turn on Ecommerce and Enable Enhanced Ecommerce Reporting in Google Analytics
Google Analytics will report ecommerce data in your reporting view, only when the ecommerce tracking has been turned on at the view level.
Enabling enhance ecommerce reporting will also provide you with important steps in standard purchase funnels, like product view, add to cart, checkout steps and transaction details.
Follow the steps below:
Step-3.1: Login to your Google Analytics account and then navigate to the ‘Admin’ section of your view:
Step-3.2: Click on ‘Ecommerce settings‘ link (under the ‘view’ column):
Step-3.3: Switch the toggle button to ‘ON’ (under ‘Enable Ecommerce Status’) and then switch the toggle button to ‘ON’ (under ‘Enable Enhanced Ecommerce Reporting’):
Step-3.4: Click on ‘Save’:
If you have multiple steps in the checkout section, you can add those steps as funnel steps (we will talk about it later in the article). Your GA reporting view is now ready to collect and report on enhanced ecommerce data.
Step-4: Enable Ecommerce Tracking in your Shopping Cart (optional)
Many shopping carts these days provide built-in ecommerce tracking. This tracking is either automatically enabled or you need to manually enable it.
For example, in the case of Shopify, ecommerce tracking is already enabled for all Shopify customers. Shopify does not use any data layer for ecommerce tracking. So whether or not you use GTM, your ecommerce tracking is already installed, up and running. Once you have turned on ecommerce tracking in Google Analytics, you should start seeing the ecommerce data from Shopify in your GA reports. You don’t need to do anything else.
Then there are shopping carts like Magento where you may need to purchase an extension in order to install ecommerce tracking via GTM. For example, Magento provides built-in data layer support for transaction data via Google Tag Manager Magento Connect extension:
Once you have installed this extension and enabled it, it will automatically create a data layer for you, on the order confirmation page and populate it with transaction data. That’s it! Your ecommerce tracking is now enabled via GTM. You don’t need to do anything else.
However if your shopping cart does not provide built-in data layer support for transaction data or pre-built ecommerce tracking or you use a custom shopping cart, then follow the next step.
Step-5: Create a Datalayer and Add Enhanced Ecommerce Events to the Data Layer on your Website
Google recommends implementing enhance ecommerce using a data layer.
DataLayer is an array of variables which provides a safer and reliable way to pull data from the presentation layer and send it to GTM.
For more details on data layers, you can read this article: Google Tag Manager Data Layer Tutorial with Examples.
To cut a long story short, data layer variables enable Google Tag Manager to read values from your data layer implementation and pass those values to tags, triggers, and other variables. A data layer object is made up of a list of key/value pairs
To create a data layer copy-paste the following code just after opening of <head> tag before Google tag manager container code.
<script>
dataLayer=[];
</script>
Congratulations, you just created your first data layer.
Enhanced Ecommerce Events:
Enhanced ecommerce events enable the measurement of user interactions with products on ecommerce websites across the user’s shopping experience, including:
- Product impressions
- Product clicks
- Viewing product details
- Adding a product to a shopping cart
- Initiating the checkout process
- Transactions
Now in order to track enhance ecommerce events we need to pass these events to dataLayer using dataLayer.push method. Following section will give you more details on measuring enhance e-commerce activities
Measuring Product Impression
Whenever the user lands on the home page or product category page of your website, the user is shown with multiple products. Here we are measuring which products are shown to the user using product impression events.
Ask your developer to fire below code whenever the page loads with multiple products on the page
<script>
// Measures product impressions and also tracks a standard
// pageview for the tag configuration.
// Product impressions are sent by pushing an impressions object
// containing one or more impressionFieldObjects.
dataLayer.push({
‘ecommerce’: {
‘currencyCode’: ‘US Dollor’, // Local currency is optional.
‘impressions’: [
{
‘name’: ‘T-Shirt’, // Name or ID is required.
‘id’: ‘2321’,
‘price’: ‘11.25’,
‘brand’: ‘Brandname’,
‘category’: ‘Apparel’,
‘variant’: ‘Gray’,
‘list’: ‘Search Results’,
‘position’: 1
},
{
‘name’: ‘Mens T-Shirt’,
‘id’: ‘6566’,
‘price’: ‘73.75’,
‘brand’: ‘Brand Name’,
‘category’: ‘Apparel’,
‘variant’: ‘Black’,
‘list’: ‘Search Results’,
‘position’: 2
}]
}
});
</script>
The above code will send product impression event to the data layer and now pull this data and send it to Google Tag Manager.
Ask your developer to add the modified data layer code (data layer code with server-side script) just after the opening body tag (<head>) and before the Google Tag Manager container code. This will automatically update the dataLayer with current product available on the page.
Measuring Product Clicks
To measure product clicks, ask your developer to fire below code whenever the user clicks on the product link
<script>
dataLayer.push({
‘event’: ‘productClick’,
‘ecommerce’: {
‘currencyCode’: ”United States Dollar’,
‘add’: { // ‘add’ actionFieldObject measures.
‘products’: [{ // adding a product to a shopping cart.
‘name’: ‘t-shirt’,
‘id’: ‘12345’,
‘price’: ‘16.25’,
‘brand’: ‘brandname’,
‘category’: ‘mens’,
‘variant’: ‘black’,
‘position’: 5
}]
}
}
});
</script>
Measuring Product Detail Views
The next step is to measure product detail views by the users. This event is fired on page load whenever the product detail page is loaded along with other product field objects like price, colour, product id, etc.
Ask your developer to fire below code whenever the product detail page loads.
<script>
dataLayer.push({
‘event’: ‘productView’,
‘ecommerce’: {
‘ProductView’: { // ‘View’ actionFieldObject measures.
‘products’: [{
‘name’: ‘T-shirt,
‘id’: ‘12345’,
‘price’: ‘15.25’,
‘brand’: ‘brand name’,
‘category’: ‘mens’,
‘variant’: ‘black’,
}]
}
}
});
</script>
The above code will send the product view event to data layer along with other product details which can be pulled using GTM and sent to Google Analytics
Measuring Additions or Removals from a Shopping Cart
In a standard purchase funnel, the user may add or remove products to the cart and measuring these events is also important. Just like we did dataLayer push events for product impression and product detail view, you can implement the cart events as well
Ask your developer to fire below code whenever the product is added to the cart.
<script>
dataLayer.push({
‘event’: ‘addtocart’,
‘ecommerce’: {
‘currencyCode’: ”United States Dollar’,
‘add’: { // ‘add’ actionFieldObject measures.
‘products’: [{ // adding a product to a shopping cart.
‘name’: ‘t=shirt’,
‘id’: ‘12345’,
‘price’: ‘16.25’,
‘brand’: ‘brandname’,
‘category’: ‘mens’,
‘variant’: ‘black’,
‘quantity’: 2
}]
}
}
});
</script>
The above code will send add to cart event to data layer along with other product details.
Similarly, when the user removes any product from the cart fire the below code
<script>
dataLayer.push({
‘event’: ‘removeFromCart’,
‘ecommerce’: {
‘remove’: { // ‘remove’ actionFieldObject measures.
‘products’: [{ // removing a product to a shopping cart.
‘name’: ‘t-shirt’,
‘id’: ‘12345’,
‘price’: ‘16.25’,
‘brand’: ‘brandname’,
‘category’: ‘mens’,
‘variant’: ‘black’,
‘quantity’: 1
}]
}
}
});
</script>
Measuring Checkout Steps
To measure the checkout process that the user follows once he clicks on the checkout button and provides details like shipping address, payment method and sometimes uses coupon codes as well (if you have it), we use checkout event and push it to dataLayer.
You can add multiple checkout events if your checkout process contains multiple steps like adding shipping address, selecting payment method etc.
Ask your developer to fire below code when checkout process starts.
<script>
dataLayer.push({
‘event’: ‘checkout’,
‘ecommerce’: {
‘currencyCode’: ”United States Dollar’, //replace with user currency
‘checkout’: {
‘actionField’: {‘step’: 1},
‘products’: [{
‘name’: ‘t-shirt’,
‘id’: ‘12345’,
‘price’: ‘16.25’,
‘brand’: ‘brandname’,
‘category’: ‘mens’,
‘variant’: ‘black’,
‘quantity’: 1
}]
}
}
})
</script>
If you have multiple steps in the checkout, you can fire the checkout event again and mention the step number in ‘actionField’: {‘step’: 2}, in above code.
Additionally, you will also need to configure Funnel steps in Google Analytics. You can give a descriptive name to each of the steps in the checkout process.
To configure these names, visit the Admin section of the Google Analytics Web Interface, select the view (profile) and click on Ecommerce Settings. Follow the ecommerce set-up instructions to label each checkout step you want to track like below:
Measuring Transactions or Purchase Events
Purchase event is the final step in the enhance ecommerce funnel. Ask your developer to fire below code whenever the transaction happens. You can also pass the purchase event on the order confirmation page or thank you page load.
<script>
dataLayer.push({
‘event’: ‘purchase’,
‘ecommerce’: {
‘currencyCode’: ‘United States Dollar’, //replace with user currency
‘purchase’: {
‘actionField’: {
‘id’: ‘T12345’, // Transaction ID. Required for purchases and refunds.
‘revenue’: ‘250’, // Total revenue including tax.
‘tax’:”,
‘shipping’: ”,
‘coupon’: ” // Optional fields may be omitted or set to empty string.
},
‘products’: [{ // List of productFieldObjects.
‘name’: ‘t-shirt’, // Name or ID is required.
‘id’: ‘12345’,
‘price’: ‘16.25’,
‘brand’: ‘brandname’,
‘category’: ‘mens’,
‘variant’: ‘Black’,
‘quantity’: 1
},
]
}
}
});
</script>
As of now we have sent enhance ecommerce events to dataLayer only. Since all these events are codes to be executed on corresponding conditions, copy-paste all the data layer code in a notepad file and send it to your developer. Ask them to write some server-side script (like PHP) which automatically retrieves ecommerce data from your shopping cart software and populates the various fields (server variables) of your data layer code with the actual ecommerce data.
Tell them to keep the following points in mind, while working on the data layer code:
- Data layer variable names are case sensitive. So keep names of the data layer variables intact. For example use ‘transactionId’ instead of ‘TransactionId’, ‘TransactionID’ or something else. Otherwise, ecommerce tracking may not work.
- Do not use currency identifiers (like $, £, €, etc) in the numeric fields and/or separate numbers in the numeric fields by a comma. This can create tracking issues.
- Make sure that the data layer code is not placed after the Google Tag Manager container code, as in that case, ecommerce tracking may not work.
The next step will be configuring the Google Tag Manager in order to sent data to Google Analytics.
Step-6: Configure your Google Tag Manager for Enhanced Ecommerce Tracking
#6.1 Log into your Google Tag Manager account and create a new tag with the following specifications for every enhance ecommerce event.
Tag for Measuring Product Impression:
Tag Name: Ecommerce Product Impression
Tag Type: Universal Analytics
Track Type: Page View
Google Analytics Settings: <enter your property ID here>
Enable Enhanced Ecommerce Features : True: Use Data Layer
Triggering:
Trigger Name: Product Impression
Trigger Type: Pageview
This Trigger fires on: Some Pageviews
Fire this trigger when an Event occurs and all of these conditions are true
url equals <enter the URI of your product impression page here>
Note: If you have multiple Page URL product Impression, you can use regex for providing the list of URL
Here I am using regex as “/|category/” in which “/” represents the home page where I have multiple products and “|” represents OR condition and the next part is “category/” which is my category page URL and have products listed there.
Your final tag may look like the one below:
Tag for Measuring Product Clicks
Tag Name: eCommerce Product Clicked
Tag Type: Universal Analytics
Track Type: Event
Event Category: eCommerce
Event Action: Product Click
Event Label: {{product_clicked}} Note: Here I am Using variable which contains the name of the product which is clicked.
Google Analytics Settings: <enter your property ID here>
Enable Enhanced Ecommerce Features : True: Use Data Layer
Triggering:
Trigger Name: Product Clicked
Trigger Type: Custom Event
Event name: productClick
This trigger will fire when the custom event equals ‘productClick’. Your final tag may look like the one below:
Tag for Measuring Product Detail Views
Tag Name: eCommerce Product Detail
Tag Type: Universal Analytics
Track Type: Event
Event Category: eCommerce
Event Action: Product Detail View
Event Label: {{product_detail}} Note: Here I am Using variable which contains the name of the product which is viewed.
Google Analytics Settings: <enter your property ID here>
Enable Enhanced Ecommerce Features : True: Use Data Layer
Triggering:
Trigger Name: Product Detail View
Trigger Type: Custom Event
Event name: productView
This trigger will fire when the custom event equals ‘productView’. Your final tag may look like the one below:
Tag for Measuring Additions to a Shopping Cart
Tag Name: eCommerce Add to Cart
Tag Type: Universal Analytics
Track Type: Event
Event Category: eCommerce
Event Action: Add to Cart
Event Label: {{product_name added to cart}} Note: Here I am Using variable which contains the name of the product which is added to cart.
Google Analytics Settings: <enter your property ID here>
Enable Enhanced Ecommerce Features : True: Use Data Layer
Triggering:
Trigger Name: ecommerce add to cart
Trigger Type: Custom Event
Event name: addtocart
This trigger will fire when the custom event equals ‘addtocart’. Your final tag may look like the one below:
Tag for Measuring Removal from Shopping Cart
Tag Name: Ecommerce- removeFromCart
Tag Type: Universal Analytics
Track Type: Event
Event Category: eCommerce
Event Action: Remove From Cart
Event Label: {{product_name removeFromcart}} Note: Here I am Using variable which contains the name of product which is removed from cart.
Google Analytics Settings: <enter your property ID here>
Enable Enhanced Ecommerce Features : True: Use Data Layer
Triggering:
Trigger Name: ecommerce remove from cart
Trigger Type: Custom Event
Event name: removeFromCart
This trigger will fire when the custom event equals ‘removeFromCart’. Your final tag may look like the one below:
Tag for Measuring Checkout Steps
Tag Name: Ecommerce- Checkout
Tag Type: Universal Analytics
Track Type: Event
Event Category: eCommerce
Event Action: Checkout Initiated
Event Label: {{Checkout_step}} Note: Here I am Using variable which contains the checkout step name like Shipping Address, Payment Method.
Google Analytics Settings: <enter your property ID here>
Enable Enhanced Ecommerce Features : True: Use Data Layer
Triggering:
Trigger Name: Checkout Initiated
Trigger Type: Custom Event
Event name: checkout
This trigger will fire when the custom event equals ‘checkout’. Your final tag may look like the one below:
Tag for Measuring Purchase Event/ Transaction
Tag Name: Ecommerce- purchase
Tag Type: Universal Analytics
Track Type: Event
Event Category: eCommerce
Event Action: Purchased Product
Event Label: {{Purchase ID}} Note: Here I am Using variable which contains the checkout step name like Shipping Address, Payment Method.
Event Value: {{Product Revenue}} Note: Here I am passing purchase amount as product revenue in Event value.
Google Analytics Settings: <enter your property ID here>
Enable Enhanced Ecommerce Features: True: Use Data Layer
Triggering:
Trigger Name: ecommerce purchase event
Trigger Type: Custom Event
Event name: purchase
This trigger will fire when the custom event equals ‘purchase’. Your final tag may look like the one below:
#6.2 Click on the ‘save’ button to create your new tag.
#6.3 Preview and debug your new tag, create a new container version and then publish the new container.
#6.4 Make sure that you are getting all of the ecommerce data in your GA report and the data is accurate.
Once you deploy these tags you will see enhanced ecommerce reports in your Google Analytics console under the ‘Conversions’ tab.
You can see multiple options available in reports as shopping behavior, checkout behavior, product performance, etc, which give you great details on all the ecommerce events happening on your website.
Other articles on specialized tracking in Google Analytics
- Ecommerce Tracking in Google Analytics – Tutorial
- Event Tracking via Google Tag Manager – Tutorial
- Event Tracking in Google Analytics – Tutorial
- Guide to Google Analytics Store Visits Tracking
- Offline Conversion Tracking in Google Analytics – Tutorial
- Implementing Ecommerce Tracking via Google Tag Manager
- Tracking Virtual Pageviews in Google Tag Manager – Tutorial
- YouTube Video tracking via Google Tag Manager
- How to Use Keyword Hero to Reveal Not Provided Keywords in Google Analytics
- Virtual pageviews in Google Analytics – Tutorial
- Google Analytics and YouTube Integration Tutorial
- Google Analytics for Facebook Tutorial
- Google Analytics Cross Domain Tracking Explained Like Never Before
- Using multiple Google Analytics tracking codes on web pages
- The one thing that you don’t know about PayPal.com and the referral exclusion list
- Calculated Metrics in Google Analytics – Tutorial
- Creating your own Google Analytics Tag Auditing System
- Tracking Site Search without Query Parameter in Google Tag Manager
- Tracking true referrals in Google Analytics when using PayPal and other payment gateways
- Phone Call Tracking in Google Analytics and Beyond
- Learn to Track Qualified and Won Leads in Google Analytics
- Introduction to Postbacks in Google Analytics
- Google Analytics Recurring Revenue and Subscriptions Tracking Tutorial
- How to track the impact of cookie consent on website traffic in Google Analytics
- Tracking Offline Conversions in Google Ads
- Implementing Scroll Tracking via Google Tag Manager
- Scroll Tracking via Scroll Depth Trigger in Google Tag Manager
- Site Search Tracking In Google Analytics Without Query Parameters
- Video Tracking via YouTube Video Trigger In Google Tag Manager
- How to Correctly Measure Conversion Date & Time in Google Analytics
- Google Analytics Social Tracking – Twitter, Facebook, Google Plus and LinkedIn
- Google Analytics Cross Domain Tracking (ga.js)
- Tracking Twitter and Linkedin Social Interactions in Google Analytics
- Creating Content Group in Google Analytics via tracking code using gtag.js
- Tracking Site Search in Google Analytics with Query Parameters
- Understanding site search tracking in Google Analytics
- Creating and Using Site Search Funnel in Google Analytics
- Learn to Setup Facebook Pixel Tracking via Google Tag Manager
- Setting up & Tracking AMP Pages in Google Analytics
- Setting up Sales Funnel across websites in Google Analytics
- Regular Expressions (Regex) for Google Analytics & Google Tag Manager – Tutorial
Frequently Asked Questions About Implementing Ecommerce Tracking via Google Tag Manager
What is ecommerce tracking?
Ecommerce tracking is a feature of Google Analytics through which you can track ecommerce data (like sales amount, number of orders, billing location, average order value, etc) of a website/mobile app in Google Analytics.
Why do you need ecommerce tracking?
If you run/manage an online store/app, you can’t just depend upon the analytics reports provided by your shopping cart. You need Google Analytics Ecommerce tracking set up for your website. It is only by using Google Analytics ecommerce tracking, you can correlate sales data with website usage data like sessions, bounce rate, traffic source/medium, landing pages, etc.
Such type of correlation analysis is required in order to understand the performance of your website landing pages and marketing campaigns. Otherwise, you may never know which landing pages and/or campaigns are driving sales and which are not.
How do I integrate my shopping cart with Google Tag Manager
This involves adding a ‘GTM container code’ on each page of your ecommerce website.
If you are using a custom shopping cart then ask your developer, to add the GTM container code, immediately after the opening body tag <body>, on all website pages.
If you are using a third-party shopping cart like Shopify, then you may need to refer to their help documentation or ask their customer support about, “where exactly to add the GTM container code?”. Most likely, you would need to edit some template file and add your GTM code there.
How do I enable enhanced ecommerce reporting in GA?
Google Analytics will report ecommerce data in your reporting view, only when the ecommerce tracking has been turned on at the view level.
To enable enhanced ecommerce reporting, login to your Google Analytics account and then navigate to the ‘Admin’ section of your view: Click on ‘Ecommerce settings‘ link (under the ‘view’ column): then switch the toggle button to ‘ON’ (under ‘Enable Ecommerce Status’) and then switch the toggle button to ‘ON’ (under ‘Enable Enhanced Ecommerce Reporting’):
Register for the FREE TRAINING...
"How to use Digital Analytics to generate floods of new Sales and Customers without spending years figuring everything out on your own."
Here’s what we’re going to cover in this training…
#1 Why digital analytics is the key to online business success.
#2 The number 1 reason why most marketers are not able to scale their advertising and maximize sales.
#3 Why Google and Facebook ads don’t work for most businesses & how to make them work.
#4 Why you won’t get any competitive advantage in the marketplace just by knowing Google Analytics.
#5 The number 1 reason why conversion optimization is not working for your business.
#6 How to advertise on any marketing platform for FREE with an unlimited budget.
#7 How to learn and master digital analytics and conversion optimization in record time.
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 Beyond
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.
About the Author
Himanshu Sharma