Implementing E-Commerce Tracking via Google Tag Manager
Table of Contents
- Integrate your Shopping Cart with Google Tag Manager
- Deploy Universal Analytics Tracking via GTM
- Turn on E-Commerce Tracking in Google Analytics
- Enable E-Commerce Tracking in your Shopping Cart
- Create and Add an E-Commerce Data Layer to your Website
- Configure your Google Tag Manager for E-Commerce Tracking
This article is in conjunction with the article e-commerce tracking in Google Analytics – complete guide where I introduce the concept of e-commerce tracking in Google Analytics and explain various e-commerce terms in great detail.
In the current article I will show you how to install e-commerce tracking via Google Tag Manager (GTM).
Follow the steps below to implement 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 which 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’.
Get the E-Book (62 Pages)
Get the E-Book (104 Pages)
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 ‘Universal Analytics’ tag on your website via GTM, otherwise your GA tracking code will fire twice, once via GTM and once via hard coded tag, which could inflate your GA data.
So before you deploy ‘Universal Analytics’ tag on your website via GTM, make sure that you can remove the hard coded GA tracking code from your website.
Step-3: Turn on E-Commerce Tracking in Google Analytics
Google Analytics will report e-commerce data in your reporting view, only when the e-commerce tracking has been turned on at the view level. 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 click on the ‘Next Step’ button:
Step-3.4: Click on the ‘Submit’ button:
Your GA reporting view is now ready to collect and report on e-commerce data.
Step-4: Enable E-Commerce Tracking in your Shopping Cart (optional)
Many shopping carts these days provide built-in e-commerce tracking. This tracking is either automatically enabled or you need to manually enable it.
For example in case of ‘Shopify’, the e-commerce tracking is already enabled for all shopify customers. Shopify does not use any data layer for e-commerce tracking. So whether or not you use GTM, your e-commerce tracking is already installed, up and running.
Once you have turned on e-commerce Tracking in Google Analytics, you should start seeing the e-commerce data from ‘Shopify’ in your GA reports. You don’t need to do anything else now.
Then there are shopping carts like ‘Magento’ where you may need to purchase an extension, in order to install e-commerce 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 e-commerce 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 e-commerce tracking or you use a custom shopping cart, then follow the next step.
Step-5: Create and Add an E-Commerce Data Layer to your Website
#5.1 Copy-paste the following data layer code in your notepad file:
<script>
dataLayer = [{
'transactionId': '[Server Variable]', // Transaction ID - Type:String - Required
'transactionAffiliation': '[Server Variable]', // store name - Type:String - Optional to use
'transactionTotal': [Server Variable], //total revenue - Type:Numeric - Required
'transactionTax': [Server Variable], // Tax amount for transaction - Type:Numeric - Optional to use
'transactionShipping': [Server Variable], // Shipping cost - Type:Numeric - Optional to use
'transactionProducts': [{
'sku': '[Server Variable]', // Product SKU - Type:String - Required
'name': '[Server Variable]', // Product Name - Type:String - Required
'category': '[Server Variable]', // Product Category - Type:String - Optional to use
'price': [Server Variable], // Product Price - Type:Numeric - Required
'quantity': [Server Variable] // Product Quantity - Type:Numeric - Required
},{
'sku': '[Server Variable]', // Product SKU - Type:String - Required
'name': '[Server Variable]', // Product Name - Type:String - Required
'category': '[Server Variable]', // Product Category - Type:String - Optional to use
'price': [Server Variable], // Product Price - Type:Numeric - Required
'quantity': [Server Variable] // Product Quantity - Type:Numeric - Required
}]
}];
</script>
#5.2 Send your notepad file to your developer and ask him to write a server side script (like PHP) which automatically retrieves e-commerce data from your shopping cart software and populate the various fields (server variables) of your data layer code with the actual transaction data.
Ask your developer to add the modified data layer code (data layer code with server side script) just after the opening body tag (<body>) and before the ‘Google Tag Manager container code’, on the ‘order confirmation page’ (or any page which is shown to a user ,once the order has been successfully placed).
Tell him to keep following points in mind, while working on the data layer code:
#1 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 e-commerce tracking may not work.
#2 Do not use currency identifier (like $, £, € etc) in the numeric fields and/or separate numbers in the numeric fields by comma. This can create tracking issues.
#3 Make sure that the data layer code is not placed after the Google Tag Manager container code, as in that case, e-commerce tracking may not work.
Once your developer has modified the data layer with server side script, it will look very different than the data layer code you first sent to him via notepad file.
Something like the one below:
Note: You can’t see this data layer with PHP code added to it, through ‘view page source’ in your web browser:
If you view the source code of the ‘order confirmation page ‘ via your web browser, you will only see, one of the output of the modified data layer code .
This output may look something like the one below:
Your final code setup on the ‘order confirmation page’ may look something like the one below (via web browser):
Step-6: Configure your Google Tag Manager for E-Commerce Tracking
#6.1 Log into you Google Tag Manager account and create a new tag with following specifications:
Tag Name: Ecommerce Tracking – Order Confirm Page
Tag Type: Universal Analytics
Tracking ID: <enter your property ID here>
Track Type: Transaction
Triggering:
Trigger Name: Check for order confirmation page
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 order confirmation page here>
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 e-commerce data in your GA report and the data is accurate.
Other Articles on Specialised Tracking in Google Analytics
- Google Analytics Recurring Revenue and Subscriptions Tracking Guide
- How to track the impact of cookie consent on website traffic in Google Analytics
- Phone Call Tracking in Google Analytics and Beyond
- Scroll Tracking via Scroll Depth Trigger in Google Tag Manager
- Video Tracking via YouTube Video Trigger In Google Tag Manager
- Calculated Metrics in Google Analytics – Complete Guide
- The one thing that you don’t know about PayPal.com and the referral exclusion list
- Introduction to Postbacks in Google Analytics
- Creating Content Group in Google Analytics via tracking code using gtag.js
- Tracking Site Search without Query Parameter in Google Tag Manager
- Setting Up Site Search Tracking for POST based search engines in Google Analytics
- Tracking Site Search for GET-Based Search Engines in Google Analytics
- Understanding site search tracking in Google Analytics
- Tracking Virtual Pageviews in Google Tag Manager – Complete Guide
- Creating and using Site Search Funnel in Google Analytics
- Learn to Setup Facebook Pixel Tracking via Google Tag Manager
- How to use Keyword Hero to reveal Not Provided keywords in Google Analytics
- Guide to Event Tracking via Google Tag Manager
- Learn to track Qualified and Won leads in Google Analytics
- Creating your own Google Analytics Tag Auditing System
- Using multiple Google Analytics tracking codes on web pages
- Guide to Offline Conversion Tracking in Google Analytics
- Google Analytics and YouTube Integration Guide
- Complete Guide to Google Analytics for Facebook
- Tracking true referrals in Google Analytics when using PayPal and other payment gateways
- Virtual pageviews in Google Analytics – Complete Guide
- YouTube Video tracking via Google Tag Manager
- Implementing E-Commerce Tracking via Google Tag Manager
- Event Tracking in Google Analytics – Complete Guide
- E-Commerce Tracking in Google Analytics – Complete Guide
- Google Analytics Cross Domain Tracking Explained Like Never Before
- Google Analytics Social Tracking – Twitter, Facebook, Google Plus and LinkedIn
- Setting up & Tracking AMP Pages in Google Analytics
- Setting up Sales Funnel across websites in Google Analytics
- Using Data Visualization to analyze the SEO Performance
- Tracking offline conversions in Google Adwords
- How to Correctly Measure Conversion Date & Time in Google Analytics
- Tracking Twitter and Linkedin Social Interactions in Google Analytics
- Implementing Scroll Tracking via Google Tag Manager
- Phone Call Tracking and ROI calculations – Champion’s Guide
- Google Analytics Cross Domain Tracking (ga.js)
- Open Graph Protocol for Facebook Explained with Examples
Learn about the Google Analytics Usage Trends Tool
Table of Contents
- Integrate your Shopping Cart with Google Tag Manager
- Deploy Universal Analytics Tracking via GTM
- Turn on E-Commerce Tracking in Google Analytics
- Enable E-Commerce Tracking in your Shopping Cart
- Create and Add an E-Commerce Data Layer to your Website
- Configure your Google Tag Manager for E-Commerce Tracking
This article is in conjunction with the article e-commerce tracking in Google Analytics – complete guide where I introduce the concept of e-commerce tracking in Google Analytics and explain various e-commerce terms in great detail.
In the current article I will show you how to install e-commerce tracking via Google Tag Manager (GTM).
Follow the steps below to implement 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 which 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’.
Get the E-Book (62 Pages)
Get the E-Book (104 Pages)
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 ‘Universal Analytics’ tag on your website via GTM, otherwise your GA tracking code will fire twice, once via GTM and once via hard coded tag, which could inflate your GA data.
So before you deploy ‘Universal Analytics’ tag on your website via GTM, make sure that you can remove the hard coded GA tracking code from your website.
Step-3: Turn on E-Commerce Tracking in Google Analytics
Google Analytics will report e-commerce data in your reporting view, only when the e-commerce tracking has been turned on at the view level. 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 click on the ‘Next Step’ button:
Step-3.4: Click on the ‘Submit’ button:
Your GA reporting view is now ready to collect and report on e-commerce data.
Step-4: Enable E-Commerce Tracking in your Shopping Cart (optional)
Many shopping carts these days provide built-in e-commerce tracking. This tracking is either automatically enabled or you need to manually enable it.
For example in case of ‘Shopify’, the e-commerce tracking is already enabled for all shopify customers. Shopify does not use any data layer for e-commerce tracking. So whether or not you use GTM, your e-commerce tracking is already installed, up and running.
Once you have turned on e-commerce Tracking in Google Analytics, you should start seeing the e-commerce data from ‘Shopify’ in your GA reports. You don’t need to do anything else now.
Then there are shopping carts like ‘Magento’ where you may need to purchase an extension, in order to install e-commerce 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 e-commerce 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 e-commerce tracking or you use a custom shopping cart, then follow the next step.
Step-5: Create and Add an E-Commerce Data Layer to your Website
#5.1 Copy-paste the following data layer code in your notepad file:
<script>
dataLayer = [{
'transactionId': '[Server Variable]', // Transaction ID - Type:String - Required
'transactionAffiliation': '[Server Variable]', // store name - Type:String - Optional to use
'transactionTotal': [Server Variable], //total revenue - Type:Numeric - Required
'transactionTax': [Server Variable], // Tax amount for transaction - Type:Numeric - Optional to use
'transactionShipping': [Server Variable], // Shipping cost - Type:Numeric - Optional to use
'transactionProducts': [{
'sku': '[Server Variable]', // Product SKU - Type:String - Required
'name': '[Server Variable]', // Product Name - Type:String - Required
'category': '[Server Variable]', // Product Category - Type:String - Optional to use
'price': [Server Variable], // Product Price - Type:Numeric - Required
'quantity': [Server Variable] // Product Quantity - Type:Numeric - Required
},{
'sku': '[Server Variable]', // Product SKU - Type:String - Required
'name': '[Server Variable]', // Product Name - Type:String - Required
'category': '[Server Variable]', // Product Category - Type:String - Optional to use
'price': [Server Variable], // Product Price - Type:Numeric - Required
'quantity': [Server Variable] // Product Quantity - Type:Numeric - Required
}]
}];
</script>
#5.2 Send your notepad file to your developer and ask him to write a server side script (like PHP) which automatically retrieves e-commerce data from your shopping cart software and populate the various fields (server variables) of your data layer code with the actual transaction data.
Ask your developer to add the modified data layer code (data layer code with server side script) just after the opening body tag (<body>) and before the ‘Google Tag Manager container code’, on the ‘order confirmation page’ (or any page which is shown to a user ,once the order has been successfully placed).
Tell him to keep following points in mind, while working on the data layer code:
#1 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 e-commerce tracking may not work.
#2 Do not use currency identifier (like $, £, € etc) in the numeric fields and/or separate numbers in the numeric fields by comma. This can create tracking issues.
#3 Make sure that the data layer code is not placed after the Google Tag Manager container code, as in that case, e-commerce tracking may not work.
Once your developer has modified the data layer with server side script, it will look very different than the data layer code you first sent to him via notepad file.
Something like the one below:
Note: You can’t see this data layer with PHP code added to it, through ‘view page source’ in your web browser:
If you view the source code of the ‘order confirmation page ‘ via your web browser, you will only see, one of the output of the modified data layer code .
This output may look something like the one below:
Your final code setup on the ‘order confirmation page’ may look something like the one below (via web browser):
Step-6: Configure your Google Tag Manager for E-Commerce Tracking
#6.1 Log into you Google Tag Manager account and create a new tag with following specifications:
Tag Name: Ecommerce Tracking – Order Confirm Page
Tag Type: Universal Analytics
Tracking ID: <enter your property ID here>
Track Type: Transaction
Triggering:
Trigger Name: Check for order confirmation page
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 order confirmation page here>
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 e-commerce data in your GA report and the data is accurate.
Other Articles on Specialised Tracking in Google Analytics
- Google Analytics Recurring Revenue and Subscriptions Tracking Guide
- How to track the impact of cookie consent on website traffic in Google Analytics
- Phone Call Tracking in Google Analytics and Beyond
- Scroll Tracking via Scroll Depth Trigger in Google Tag Manager
- Video Tracking via YouTube Video Trigger In Google Tag Manager
- Calculated Metrics in Google Analytics – Complete Guide
- The one thing that you don’t know about PayPal.com and the referral exclusion list
- Introduction to Postbacks in Google Analytics
- Creating Content Group in Google Analytics via tracking code using gtag.js
- Tracking Site Search without Query Parameter in Google Tag Manager
- Setting Up Site Search Tracking for POST based search engines in Google Analytics
- Tracking Site Search for GET-Based Search Engines in Google Analytics
- Understanding site search tracking in Google Analytics
- Tracking Virtual Pageviews in Google Tag Manager – Complete Guide
- Creating and using Site Search Funnel in Google Analytics
- Learn to Setup Facebook Pixel Tracking via Google Tag Manager
- How to use Keyword Hero to reveal Not Provided keywords in Google Analytics
- Guide to Event Tracking via Google Tag Manager
- Learn to track Qualified and Won leads in Google Analytics
- Creating your own Google Analytics Tag Auditing System
- Using multiple Google Analytics tracking codes on web pages
- Guide to Offline Conversion Tracking in Google Analytics
- Google Analytics and YouTube Integration Guide
- Complete Guide to Google Analytics for Facebook
- Tracking true referrals in Google Analytics when using PayPal and other payment gateways
- Virtual pageviews in Google Analytics – Complete Guide
- YouTube Video tracking via Google Tag Manager
- Implementing E-Commerce Tracking via Google Tag Manager
- Event Tracking in Google Analytics – Complete Guide
- E-Commerce Tracking in Google Analytics – Complete Guide
- Google Analytics Cross Domain Tracking Explained Like Never Before
- Google Analytics Social Tracking – Twitter, Facebook, Google Plus and LinkedIn
- Setting up & Tracking AMP Pages in Google Analytics
- Setting up Sales Funnel across websites in Google Analytics
- Using Data Visualization to analyze the SEO Performance
- Tracking offline conversions in Google Adwords
- How to Correctly Measure Conversion Date & Time in Google Analytics
- Tracking Twitter and Linkedin Social Interactions in Google Analytics
- Implementing Scroll Tracking via Google Tag Manager
- Phone Call Tracking and ROI calculations – Champion’s Guide
- Google Analytics Cross Domain Tracking (ga.js)
- Open Graph Protocol for Facebook Explained with Examples
The Google Analytics usage trend is a new tool which is used to visualise trends in your Google Analytics data and to perform trend analysis.
Do you want to Learn Web Analytics in 8 Weeks?
- Learn and Master Web Analytics, Conversion Optimization & Google Analytics from Industry Expert in 8 weeks.
- Lifetime access to the course + Lifelong FREE course updates.
- New study material added every few months (lifelong learning).
- Up to date training material.
- Most exhaustive course on Google Analytics on the internet.
- Hundreds of Assessments to test your learning.
- Your 24/7, 365 days a year reference source.
- Learn at your own pace and from any place.
Take your analytics knowledge to the next level. Check out my best selling books on Amazon
Attribution Modelling in Google Ads and Facebook NEW
This book has been written to help you implement attribution modelling in Google Ads (Google AdWords) and Facebook. Learn how to leverage the knowledge of attribution modelling, understand the customer purchasing journey and determine the most effective marketing channels for investment.
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.
Himanshu Sharma
Certified web analyst and founder of OptimizeSmart.com
