I have shared a lot of tracking code throughout this article. This tracking code is pretty close to actual tracking code used for implementing enhanced ecommerce tracking but it is not the code which you can simply copy-paste without modification and then expect enhanced ecommerce tracking to automatically start working on your website.
That is because Enhanced ecommerce tracking just like the traditional ecommerce tracking cannot be implemented without adding a server side script to the enhanced ecommerce tracking code.
The objective of this article is to provide a frameworkthrough which you and/or your developer can implement enhanced ecommerce tracking on your website.
Enhanced Ecommerce shopping activities
When we set up enhanced ecommerce tracking, we track following (but not limited to) shopping activities on an ecommerce website:
Viewing of an internal promotion campaign (like an internal banner on a home page).
Clicking on the internal promotion campaign
Viewing a product on the product list.
Clicking on one of the product links in the product list (to view more details about the product).
Viewing the product details page.
Adding a product to the shopping cart.
Removing a product from the shopping cart.
Starting the checkout process and completing the various steps in the process.
Providing additional information during checkout (like selecting a payment or shipping method).
Completing the checkout process by making a purchase.
In the context of Google Analytics, a hit is user interaction with your website/mobile app. The data you send to a Google Analytics Web Property is also known as ‘hit’.
The type of data you send to a Google Analytics web property is known as Hit Type. For example, ‘pageview’, ‘event’, ‘transactions’, ‘item’ etc are all hit types.
Unlike ga.js or analytics.js, the gtag.js is not strictly a Google Analytics library as it is supporting Google Ads Conversion tracking and will support tracking for many other Google products in the near future. So gtag.js is not really the next version of analytics.js
At present, there is analytics.js library which is used to measure users’ interactions with your website and send them to Google Analytics Server. Then we have got gtm.js library which is used for Google Tag Manager. Then we have got firebase.js library which is used to measure users interactions with your mobile apps via Firebase. Then we have got conversion.js library which is used for Google Ads Conversion Tracking.
The purpose of gtag.js is to replace all of these libraries with one single library and hence gtag.js is being promoted as ‘one tag to rule them all’. In order to keep the size of gtag.js small, this library calls other libraries internally. For example, gtag.js calls analytics.js and conversions.js internally.
Below is the example of global site tag configured for Google Analytics as well as Google Ads:
<!– Global site tag (gtag.js) – Google Analytics –> <script async src=”https://www.googletagmanager.com/gtag/js?id= UA-XXXX “></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag(‘js’, new Date());
gtag(‘config’, ‘UA-XXXX‘);// Google Analytics ID gtag(‘config’, ‘AW-XXXX‘);// Google Ads ID </script>
Instead of having multiple tracking codes for the Google products we can now manage all the events and page view data using gtag.js.
To install the global site tag, copy the following code and paste it immediately after the <head> tag on every page of your site. Replace UA-XXXX with the ID of your Google Analytics property to which you want to send data:
<!– Global site tag (gtag.js) – Google Analytics –> <script async src=”https://www.googletagmanager.com/gtag/js?id= UA-XXXX “></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag(‘js’, new Date());
gtag(‘config’, ‘UA-XXXX‘); </script>
You need only one global snippet per page.
Once the Global site tag is placed in the header section of the website we can use the gtag() commands anywhere on a webpage to send events data as well as ecommerce data to Google Analytics and other Google products like Google Ads, Campaign manager etc.
#1 Measuring internal promotion impressions
Internal promotions are those ads (like a banner ad) which take users to other parts of your website.
For example, you may run a banner ad on the home page, which promotes a particular product category and when a user clicks on the banner ad, he is redirected to the product category page.
The viewing of an internal promotion is called internal promotion impression.
So if a user viewed a banner ad on the home page two times, then the number of internal promotion impressions would be 2.
Following is an example of a tracking code which measures the internal ad impression:
gtag(‘event’, ‘view_promotion’, {// promoFieldObject stores internal promotion impression data “promotions”: [ { “id”: “[Server Variable]“,// internal ad ID – Required – Type: string – Example: ‘homeBanner1’ “name”: “[Server Variable]“,// internal promotion campaign Name – Type: string – Example: ‘Spring sale’ “creative”: “[Server Variable]”, // internal ad name – Type: String – Example: ‘Spring Sale banner1’ “position”: “[Server Variable]” // Position of the internal ad – Type: string – Example: ‘home top banner’ }, ] });
This tracking code is placed on the web page, where you are running your internal promotion ad and whose impressions (views) you want to measure.
Following are the various properties of promoFieldObject:
id – A valid internal Promo ad id like “homeBanner1”, “Men’s Category Banner”.
name – A valid internal promotion campaign name like “summer sale”, “Cyber Monday sale”.
creative – A promotion creative description like “Summer sale casuals banner”
position – where the internal promotion ad is positioned like ‘category page top banner’.
[Server Variable] – these are the server side variables. You need to ask your developer to write a server side script which populates the various fields (server variables) of the tracking code above, with the actual data.
Note: Use your own property ID (instead of ‘UA-XXXX-YY’) in the tracking code above.
In a purchase journey, a user may click on an internal promotion campaign.
Tie the following function via a Javascript event handler onClick to measure the clicks on an internal promotion campaign (like an internal banner):
gtag(‘event’, ‘select_content’, {// promoFieldObject stores internal promotion impression data “promotions”: [ { “id”: “[Server Variable]“,// internal ad ID – Required – Type: string – Example: ‘homeBanner1’ “name”: “[Server Variable]“,// internal promotion campaign Name – Type: string – Example: ‘Spring sale’ “creative”: “[Server Variable]”, // internal ad name – Type: String – Example: ‘Spring Sale banner1’ “position”: ‘[Server Variable]‘ // Position of the internal ad – Type: string – Example: ‘home top banner’ }, ] });
This tracking code is placed on the web page, where you are running your internal promotion ad and whose clicks you want to measure.
#3 Measuring product impressions
In a purchase journey, a user may view a product in the product list (product category page or internal search result page).
The viewing of a product in a product list is called product impression.
Use the following product impression tracking code on pages where your products are listed:
gtag(‘event’, ‘view_item_list’, { // ImpressionFieldObject stores product impression data “items”: [ { ”id”: “[Server Variable]”, // Product ID/SKU – Type: string “name”: “[Server Variable]”, // Product name – Type: string ”category”: “[Server Variable]”, // Name of the Product category. // Use / as a delimiter to specify up to 5 levels of hierarchy (e.g. Men/Shirts/T-Shirts) – Type: string “brand”: “[Server Variable]”,// Name of Product brand – Type: string “variant”: “[Server Variable]”, // Variant of the product like: colour, size etc – Type: string “list”: “[Server Variable]”, // Name of the Product list like “search results” – Type: string “position”: [Server Variable] // Product position in a list. For example 2 – Type: numeric }, { // ImpressionFieldObject stores product impression data ”id”: “[Server Variable]”, // Product ID/SKU – Type: string “name”: “[Server Variable]”, // Product name – Type: string ”category”: “[Server Variable]”, // Name of the Product category. // Use / as a delimiter to specify up to 5 levels of hierarchy (e.g. Men/Shirts/T-Shirts) – Type: string “brand”: “[Server Variable]”,// Name of Product brand – Type: string “variant”: “[Server Variable]”, // Variant of the product like colour, size etc – Type: string “list”: “[Server Variable]”, // Name of the Product list like “search results” – Type: string “position”: [Server Variable] // Product position in a list. For example 2 – Type: numeric } ] });
Here,
ImpressionFieldObject is a JavaScript object which is used to store product impression and it looks like the one below:
{
// ImpressionFieldObject stores product impression data
‘name’: ‘[Server Variable]‘, // Product name – Type: string
‘category’: ‘[Server Variable]‘, // Name of the Product category.
// Use / as a delimiter to specify up to 5 levels of hierarchy (e.g Men/Shirts/T-Shirts) – Type: string
‘brand’: ‘[Server Variable]‘,// Name of Product brand – Type: string
‘variant’: ‘[Server Variable]‘, // Variant of the product like: color, size etc – Type:string
‘list’: ‘[Server Variable]‘, // Name of the Product list like ‘search results’ – Type: string
‘position’: [Server Variable] // Product position in a list. For example 2 – Type: numeric
}
Note: An impressionFieldObject must have a name or id value. All other values are optional
Following are the properties of impressionFieldObject:
id
name
category
brand
variant
list
position
You need to ask your developer to write a server side script (like PHP) which loop through all the products on a page and send product impression data for each of them. The script should automatically populate the various fields (server variables) of your tracking code with the actual product data.
Note(1): Your product impression tracking code would look quite different once the server side script has been added to it.
Note(2): Do not send internal promotion click data along with product data in a single hit. If you need to send internal promotion click data then send it in a separate hit.
#4 Measuring click on a product link in the product list (measuring product clicks)
In the purchase journey, a user may click on a product link, in the product list, to view more details about the product.
Tie the following function via a Javascript event handler ‘onClick’ to the links of all the products listed on a page:
// Called when a link to a product is clicked. function onProductClick() { gtag(‘event’, ‘select_content’, { // productFieldObject stores product click and other details “content_type”: “product”, “items”: [ { ”id”: “[Server Variable]”, // Product ID/SKU – Type: string ”name”: “[Server Variable]”, // Product name – Type: string ”category”: “[Server Variable]”, // Product category – Type: string ”brand”: “[Server Variable]”, // Product brand – Type: string ”variant”: “[Server Variable]”, // Variant of the product like: color, size etc – Type: string ”position”: [Server Variable] // Product position in a list – Type: numeric Example: 10 } ] });
Here,
productFieldObject is a JavaScript object which is used to store all product data (other than product impression data). Data for the following type of products are stored in this JavaScript object:
Individual products that were viewed in a product list (product
Products whose detail pages were viewed
Products added to the shopping cart
Products removed from the shopping cart
Products at each step of the checkout process
Products that are purchased
Products that are part of a refund.
The productFieldObject looks like the one below:
{
// productFieldObject stores product click and other details “id”: “[Server Variable]”, // Product ID/SKU – Type: string “name”: “[Server Variable]”, // Product name – Type: string “category”: “[Server Variable]”, // Product category – Type: string “brand”: “[Server Variable]”, // Product brand – Type: string “variant”: “[Server Variable]”, // Variant of the product like: color, size etc – Type: string “position”: [Server Variable] // Product position in a list – Type: numeric Example: 10
}
Following are the properties of productFieldObject:
id
name
category
brand
variant
price
quantity
coupon
position
Your developer would have to write a server side script which sends product click data whenever a product link is clicked in a product list. The script should automatically populate the various fields (server variables) of your tracking code with the actual product data.
The ‘onProductClick‘ function can be tied via online Javascript event handler ‘onClick’ like the one below:
Your developer would write a script which populates the various fields (server variables) of your tracking code with the actual product data.
#6 Measuring the addition of a product(s) to a shopping cart
In the purchase journey, the user may decide to buy a product. So he can add the product to the shopping cart.
Tie the following function via a Javascript event handler ‘onClick’ to the shopping cart ‘add’ button on each product detail page and on the checkout page:
gtag(‘event’, ‘add_to_cart’, {// Called when a product is added to a shopping cart. “items”: [ { // productFieldObject stores product click and other details “id”: “[Server Variable]”, // Product ID/SKU – Type: string “name”: “[Server Variable]”, // Product name – Type: string “category”: “[Server Variable]”, // Product category – Type: string “brand”: “[Server Variable]”, // Product brand – Type: string “variant”: “[Server Variable]”, // Variant of the product like color, size etc – Type: string “price”: [Server Variable], // Product price – Type: numeric “quantity”: [Server Variable], // Product quantity – Type: numeric } ] });
Your developer would write a script which populates the various fields (server variables) of your tracking code with the actual product data. The ‘add_to_cart’ function can be tied via online Javascript event handler ‘onClick’ like the one below:
<button onclick=”add_to_cart(product);”>Add to Cart</button>
#7 Measuring removal of a product(s) from a shopping cart
In the purchase journey, the user may decide not to buy a certain product. So he can remove the product from his shopping cart.
Tie the following function via the Javascript event handler ‘onClick’ to the shopping cart ‘remove’ button on each product detail page and on the checkout page:
gtag(‘event’, ‘remove_from_cart’, {// Called when a product is removed from a shopping cart. “items”: [ { // productFieldObject stores product click and other details “id”: “[Server Variable]”, // Product ID/SKU – Type: string ”name”: “[Server Variable]”, // Product name – Type: string ”category”: “[Server Variable]”, // Product category – Type: string ”brand”: “[Server Variable]”, // Product brand – Type: string ”variant”: “[Server Variable]”, // Variant of the product like color, size etc – Type: string “price”: [Server Variable], // Product price – Type: numeric “quantity”: [Server Variable], // Product quantity – Type: numeric } ] });
Your developer would write a script which populates the various fields (server variables) of your tracking code with the actual product data. The ‘remove_from_cart’ function can be tied via online Javascript event handler ‘onClick’ like the one below:
<button onclick=”remove_from_cart(product);”>Remove from Cart</button>
#8 Measuring the first checkout step
In the purchase journey, the user may decide to start the checkout process and complete the various steps in the process.
In order to measure the first checkout step, set the action type to ‘checkout’ and ‘step field’ to the step number. Tie the following function via the Javascript event handler ‘onClick’ to the ‘checkout’ button:
/** * Called when the user clicks on the ‘checkout’ button */ function checkout(cart) { for(var i = 0; i < cart.length; i++) { var product = cart[i]; gtag(‘event’, ‘begin_checkout’, { “items”: [ { “id”: product.id, ”name”: product.name, ”category”: product.category, ”brand”: product.brand, ”variant”: product.variant, ”price”: product.price, ”quantity”: product.qty “checkout_step”: 1, // the value of 1 indicates first checkout step. } ] }); } }
The ‘checkout’ function can be tied via online Javascript event handler ‘onClick’ like the one below:
#9 Measuring the second and subsequent checkout steps
To measure each subsequent checkout step, send a checkout_progress event with the checkout items. Set the action type to ‘checkout_step’ to the step number.
To measure the second step of the checkout process:
Note: If your checkout process contains only a single step or if you have not configured enhanced ecommerce checkout funnel settings in your web property then measuring the individual checkout steps is not required.
#10 Measuring the checkout options
If you have measured a checkout step during the initial pageview but additional information about the same checkout step becomes available after a user has selected an option (like payment method) then you need to tie the following function via the Javascript event handler ‘onClick’ to the button(s) which takes a user to the next checkout step:
Once the purchase journey is over, the user may ask for a refund. You can provide either a full refund or partial refund.
Full refund means refunding the entire order.
Whereas partial refund means refunding a part of the order like refunding a single product.
In order to measure the impact of refund on your business bottomline, you first need to import the refund data to your GA property.
You can import refund data either manually using the ‘Data import’ feature of Google Analytics or through Management API.
Once you have uploaded refund data you can see it, in your ‘Sales Performance’ report:
Note: You cannot delete or modify refund data once it has been uploaded to a web property. So double check the validity of the refund data before you upload it.
To measure a full refund use the following tracking code:
Follow the steps below to implement enhanced ecommerce tracking on your website:
Upgrade To Universal Analytics (optional).
Add the required enhanced ecommerce tracking code on various web pages.
Enable enhanced ecommerce and configure Checkout steps name in your GA property.
Replace the old ecommerce tracking code with the product purchase tracking code.
Step-1: Upgrade To Universal Analytics (optional)
This step is required only when you are still using the classic Google Analytics (ga.js). The upgrade is required because classic Google Analytics does not support enhanced ecommerce tracking. Read this article for the upgrade: Universal Analytics Upgrade Guide
Step-2: Add the required enhanced ecommerce tracking code on various web pages
Add the required enhanced ecommerce tracking code on various webpages of your website (as mentioned in this article) to track the most important shopping activities.
If you have already had standard ecommerce tracking installed then do not add the tracking code to measure product purchases at this stage.
That is because you can not run enhanced ecommerce tracking in parallel with the standard ecommerce tracking for the same GA property and you also do not want to lose ecommerce data while you set up and test enhanced ecommerce tracking.
However, If you are setting up ecommerce tracking for the first time on your website, then you can also add the tracking code to measure product purchases at this stage.
Step-3: Enable enhanced ecommerce and configure Checkout steps name in your GA property
#1 Navigate to the admin section of your GA property.
#2 Click on ‘Ecommerce Settings’ under the ‘View’ column:
#3 ‘Enable Ecommerce’ and then ‘Enhance Ecommerce Reporting’ by switching the toggle button to ‘ON’:
#4 Give a descriptive name to each step in your checkout funnel:
Note: If you do not configure the checkout steps names then you will see only a single step called step 1 in your ‘Checkout behaviour Analysis’ report which is a good option only when you have got a single step checkout:
Once you configured the checkout steps names, your checkout behavior analysis report is going to look like the one below:
Once you have enabled ‘enhanced ecommerce reporting, you can see the new enhanced ecommerce tracking reports (under Conversions > Ecommerce in your GA view):
Note: It is important that you only enable the enhanced ecommerce tracking via the reporting interface when you are ready to test your enhanced ecommerce tracking setup.
Step-4: Replace the old ecommerce tracking code with the product purchase tracking code
Once you have replaced the old ecommerce tracking code with the product purchase tracking code on the order confirmation page, the standard ecommerce tracking will be replaced by enhanced ecommerce tracking.
If you want to play super safe, then first deploy enhanced ecommerce tracking on your staging website via GA test property. You may need to use multiple trackers here. And when everything looks great, then deploy the enhanced ecommerce tracking code on the live website via your main GA property.
"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 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.
About the Author
Himanshu Sharma
Founder, OptimizeSmart.com
Over 15 years of experience in digital analytics and marketing
Author of four best-selling books on digital analytics and conversion optimization
Nominated for Digital Analytics Association Awards for Excellence
Runs one of the most popular blogs in the world on digital analytics
Consultant to countless small and big businesses over the decade
Learn and Master Google Analytics 4 (GA4) - 126 pages ebook
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
