I have shared a lot of tracking code throughout this article. This tracking code is pretty close to the 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.
This 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 or your developer can implement enhanced ecommerce on your website.
Eleven most important shopping activities
Following are the 11 most important shopping activities on an ecommerce website:
#1 A user view an internal promotion campaign (like an internal banner on a home page).
#2 The user clicks on the internal promotion campaign and is then redirected to a product list page (which can be a product category page or internal search result page).
#3 The user views a product on the product list.
#4 The user clicks on one of the product links in the product list to view more details about the product.
#5 The user then view the product details page.
#6 The user then decides to buy the product. So he adds the product to the shopping cart. He may add multiple products to his shopping cart.
#7 The user may later decide to remove the certain product from the shopping cart before starting the checking out process. #8 The user then decides to start the checkout process and complete the various steps in the process. #9 The user provides additional information during checkout (like select a payment or shipping method). #10 The user finally completes the checkout process by making a purchase. #11 The user may later decide to ask for a refund of his order.
In enhanced ecommerce, we can track all of these 11 shopping activities (and more), in order to get a deep insight into shopping behaviour.
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 promote 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 views 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:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-YY', 'auto');
ga('require', 'ec');
ga('ec:addPromo',{
// promoFieldObject stores internal promotion impression data
'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'
});
ga('send', 'pageview');
</script>
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.
The highlighted code (in bold text) below is the enhanced ecommerce tracking code. The rest of the code is the Google Analytics tracking code:
‘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’
}); ga(‘send’, ‘pageview’); </script>
Here,
ga(‘require’, ‘ec’); is a Google Analytics command which is used to load the enhanced ecommerce plugin. Without this plugin, your enhanced ecommerce tracking won’t work. ga(‘ec:addPromo’,promoFieldObject); is the enhanced ecommerce command which is used to collect and store impression data of an internal promotion campaign. This command is made up of:
#1 ec:addPromo – it is a Google Analytics command which is used to measure internal promotion impressions and send the impression data to promoFieldObject
#2 promoFieldObject – it is a JavaScript object which is used to store impression data of internal promotion campaigns and it looks like the one below:
{ // promoFieldObject stores internal promotion impression data
‘id’: ‘[Server Variable]’, // internal ad ID – Required – Type: string – Example: ‘homeBanner1’
‘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’
}
Following are the various properties of promoFieldObject:
id
name
creative
position
[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.
Now I am going to explain the various components of the tracking code which is used for measuring internal promotion impressions in greater detail.
Introduction to hits and hit type
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.
In order to implement enhanced ecommerce tracking on your website, you need to use the enhanced ecommerce plugin (also called ‘ec’ in short). The Google Analytics command which is used to load the enhanced ecommerce plugin is:
This command is similar to the command which is used to load the traditional ecommerce plugin in Google Analytics:
ga(‘require’, ‘ecommerce’); // load traditional ecommerce library
How to use Enhanced Ecommerce Plugin?
Just like traditional ecommerce plugin, the enhanced ecommerce plugin must also be loaded, afteryour tracking object and before you use any of the enhanced ecommerce tracking commands (like ec:addProduct).
‘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’
}); ga(‘send’, ‘pageview’); </script>
Such little detail comes handy when you are testing your enhanced ecommerce implementation. Whenever you don’t see ecommerce data in your reports, make sure that you are not making such hard to spot mistakes.
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):
// Call this function when promo click occurs.
function onPromoClick() {
ga('ec:addPromo', {
// promoFieldObject stores internal promotion impression data
'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'
});
// Send the promo_click action with an event.
ga('ec:setAction', 'promo_click');
ga('send', 'event', 'enhanced ecommerce', 'Internal Promotion Click', '[INTERNAL PROMOTION NAME]');
}
This tracking code is placed on the web page, where you are running your internal promotion ad and whose clicks you want to measure.
Here,
ga(‘ec:setAction’, <action-type>,actionFieldObject); – This enhanced ecommerce command is used to collect and store data related to enhanced ecommerce action. This command is made up of:
#1 ec:setAction – it is a google analytics command which is used to measure ecommerce action data and then send the data to actionFieldObject.
#2 <action-type> – it denotes following ecommerce user actions:
‘promo_click’ – For example: ga(‘ec:setAction’, ‘promo_click’); // measure clicks on an internal promotion
‘detail’- For example: ga(‘ec:setAction’, ‘detail’); // product detail views
‘add’ – For example: ga(‘ec:setAction’, ‘add’); // measure Product Add to Cart.
‘remove’ – For example: ga(‘ec:setAction’, ‘remove’); // measure Product remove from Cart
‘checkout‘ – For example: ga(‘ec:setAction’,’checkout’, {‘option’: ‘visa’}); // measure additional information about a checkout step
‘purchase’ – For example: ga(‘ec:setAction’, ‘purchase’,{…}); // measure a purchase.
‘refund’ – For example: ga(‘ec:setAction’, ‘promo_click’); //measure the refund of one or more products.
#3 actionFieldObject – it is a JavaScript object which is used to store ecommerce action data. This object can look like the one below:
{
// actionFieldObject stores action data
‘id’: ‘VBT145346’, // Transaction id – Type: string
‘affiliation’: ‘VB Store’, // Store name – Type: string
‘revenue’: ‘37.39’, // Total Revenue – Type: numeric
Ask your developer to write a script which populate the various fields (server variables) of your tracking code with the actual data. Note: Do not send internal promotion impression data along with internal promotion click data in just one hit. Send internal promotion click data in a separate hit after sending the impression data.
The complete code may look like the one below:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-YY', 'auto');
ga('require', 'ec');
// Call this function when promo click occurs.
function onPromoClick() {
ga('ec:addPromo', {
// promoFieldObject stores internal promotion impression data
'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'
});
// Send the promo_click action with an event.
ga('ec:setAction', 'promo_click');
ga('send', 'event', 'enhanced ecommerce', 'Internal Promotion Click', '[INTERNAL PROMOTION NAME]');
}
ga('send', 'pageview');
</script>
#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:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-YY', 'auto');
ga('require', 'ec');
ga('ec:addImpression',{
// 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: 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
});
ga('ec:addImpression',{
// 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: 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
});
ga('send', 'pageview');
</script>
Here,
ga(‘ec:addImpression’,impressionFieldObject); is the enhanced ecommerce command which is used to collect and store product impression data. This command is made up of:
#1 ec:addImpression – it is a Google Analytics command which collect/measures product impressions and send the impression data to impressionFieldObject
#2 impressionFieldObject – it 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 (measure 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() {
ga('ec:addProduct',{
// 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
});
ga('ec:setAction', 'click', {list: '[Server Variable]'});
// Send click with an event, then send user to product page.
ga('send', 'event', 'enhanced ecommerce', 'Product clicks', [Product]});
}
Here,
ga(‘ec:addProduct’,productFieldObject); is the enhanced ecommerce command which is used to collect and store all product data (other than product impression data). This command is made up of:
#1 ec:addProduct – it is a Google Analytics command which collects/measures all product data (other than product impression data) and then sends the product data to productFieldObject.
#2 productFieldObject – it 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
‘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
#3 ga(‘ec:setAction’, ‘click’, {list: ‘[LIST NAME]’}); – it is the enhanced ecommerce command which is used to measure click on a product link, in the product list (i.e. it measures product clicks)
Your developer has 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:
#1 ga(‘ec:addProduct’,productFieldObject); is the enhanced ecommerce command which is used to collect and store all product data (other than product impression data).
#2 ga(‘ec:setAction’, ‘detail’); – it is the enhanced ecommerce command which is used to measure product details page views
Your developer writes 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:
// Called when a product is added to a shopping cart.
function addToCart(product) {
ga('ec:addProduct',{
// 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
});
ga('ec:setAction', 'add'); // measure product add to cart
ga('send', 'event', 'enhanced ecommerce', 'button click', 'add to Cart'); // Send 'add to cart' using an event.
}
Here,
ga(‘ec:setAction’, ‘add’); – is the enhanced ecommerce command which is used to measure product add to cart.
Your developer writes a script which populates the various fields (server variables) of your tracking code with the actual product data.
The ‘addToCart’ function can be tied via online Javascript event handler ‘onClick’ like the one below:
<button onclick=”addToCart(product);”>Add to Cart</button>
The complete code may look like the one below:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-YY', 'auto');
ga('require', 'ec');
// Called when a product is added to a shopping cart.
function addToCart(product) {
ga('ec:addProduct',{
// 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
});
ga('ec:setAction', 'add'); // measure product add to cart
ga('send', 'event', 'enhanced ecommerce', 'button click', 'add to Cart'); // Send 'add to cart' using an event.
}
ga('send', 'pageview');
</script>
#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:
// Called when a product is removed from a shopping cart.
function removeFromCart(product) {
ga('ec:addProduct',{
// 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
});
ga('ec:setAction', 'remove'); // measure product remove from cart
ga('send', 'event', 'enhanced ecommerce', 'button click', 'remove from Cart'); // Send 'remove from cart' using an event.
}
Here,
ga(‘ec:setAction’, ‘remove’); – is the enhanced ecommerce command which is used to measure product remove from cart.
Your developer writes a script which populates the various fields (server variables) of your tracking code with the actual product data.
The ‘removeFromCart’ function can be tied via online Javascript event handler ‘onClick’ like the one below:
<button onclick=”removeFromCart(product);”>Remove from Cart</button>
The complete code may look like the one below:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-YY', 'auto');
ga('require', 'ec');
// Called when a product is removed from a shopping cart.
function removeFromCart(product) {
ga('ec:addProduct',{
// 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
});
ga('ec:setAction', 'remove'); // measure product remove from cart
ga('send', 'event', 'enhanced ecommerce', 'button click', 'remove from Cart'); // Send 'remove from cart' using an event.
}
ga('send', 'pageview');
</script>
#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, use ec:addProduct command for each product added to the shopping cart and the ec:setAction command. 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];
ga('ec:addProduct', {
'id': product.id,
'name': product.name,
'category': product.category,
'brand': product.brand,
'variant': product.variant,
'price': product.price,
'quantity': product.qty
});
}
ga('ec:setAction','checkout', {'step': 1}); // the value of 1 indicates first checkout step.
}
Here,
ga(‘ec:setAction’,’checkout’, {‘step’: 1}); – is the enhanced ecommerce command which is used to measure the first step of the checkout process.
The ‘checkout’ function can be tied via online Javascript event handler ‘onClick’ like the one below:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-YY', 'auto');
ga('require', 'ec');
/**
* Called when the user clicks on the 'checkout' button
*/
function checkout(cart) {
for(var i = 0; i < cart.length; i++) {
var product = cart[i];
ga('ec:addProduct', {
'id': product.id,
'name': product.name,
'category': product.category,
'brand': product.brand,
'variant': product.variant,
'price': product.price,
'quantity': product.qty
});
}
ga('ec:setAction','checkout', {'step': 1}); // the value of 1 indicates first checkout step.
}
ga('send', 'pageview');
</script>
#9 Measuring the second and subsequent checkout steps
In order to measure individual checkout steps, use ec:addProduct command for each product added to the shopping cart and the ec:setAction command.
Set the action type to ‘checkout’ and ‘step field’ to the step number.
To measure the second step of the checkout process:
use ec:addProduct for each product added to the shopping cart use ga(‘ec:setAction’,’checkout’, {‘step’: 2});
Similarly,
To measure the third step of the checkout process:
use ec:addProduct for each product added to the shopping cart use ga(‘ec:setAction’,’checkout’, {‘step’: 3});
Tie the following function via the Javascript event handler ‘onClick’ to each button which takes a user to the next checkout step:
/**
* Called when the user moves to the next checkout step
*/
function checkout(cart) {
for(var i = 0; i < cart.length; i++) {
var product = cart[i];
ga('ec:addProduct', {
'id': product.id,
'name': product.name,
'category': product.category,
'brand': product.brand,
'variant': product.variant,
'price': product.price,
'quantity': product.qty
});
}
ga('ec:setAction','checkout', {'step': [step number]});
}
The ‘checkout’ function can be tied via online Javascript event handler ‘onClick’ like the one below:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-YY', 'auto');
ga('require', 'ec');
/**
* Called when the user moves to the next checkout step
*/
function checkout(cart) {
for(var i = 0; i < cart.length; i++) {
var product = cart[i];
ga('ec:addProduct', {
'id': product.id,
'name': product.name,
'category': product.category,
'brand': product.brand,
'variant': product.variant,
'price': product.price,
'quantity': product.qty
});
}
ga('ec:setAction','checkout', {'step': [step number]});
}
ga('send', 'pageview');
</script>
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.
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:
// Called when user provides additional information.
function onAdditionalInformation(stepNumber, optionSelected) {
ga('ec:setAction', 'checkout_option', {
'step': [stepNumber],
'option': [optionSelected]
});
ga('send', 'event', 'enhanced ecommerce', 'checkout_option', [optionSelected],[stepNumber]);
}
For example:
// Called when user selects a payment option. function onPaymentSelection(stepNumber, optionSelected) { ga(‘ec:setAction’, ‘checkout_option’, { ‘step’: 2, ‘option’:’visa’ });
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 an entire transaction use the following enhanced ecommerce command:
ga(‘ec:setAction’, ‘refund’, actionFieldObject);
and provide the transaction ID in the actionFieldObject.
For example:
// Refund an entire transaction.
ga('ec:setAction', 'refund', {
'id': '43545232' // Transaction id - Type: string - Required field
});
The complete code for full refund may look like the one below:
Following is a list of various enhanced ecommerce commands which we used while setting up enhanced ecommerce tracking, for quick reference:
#1 ga(‘require’, ‘ec’); is a Google Analytics command which is used to load the enhanced ecommerce plugin.
#2 ga(‘ec:addPromo’,promoFieldObject); is the enhanced ecommerce command which is used to collect and store impression data of an internal promotion campaign.This command is made up of:
#2.1 ec:addPromo – it is a Google Analytics command which is used to measure internal promotion impressions and send the impression data to promoFieldObject
#2.2 promoFieldObject – it is a JavaScript object which is used to store impression data of internal promotion campaigns.
#3 ga(‘ec:setAction’, <action-type>,actionFieldObject); – This enhanced ecommerce command is used to collect and store data related to enhanced ecommerce action.
This command is made up of:
#3.1 ec:setAction – it is a google analytics command which is used to measure ecommerce action data and then send the data to actionFieldObject.
#3.2 <action-type> – it denotes following ecommerce user actions:
‘promo_click’ – For example: ga(‘ec:setAction’, ‘promo_click’); // measure clicks on an internal promotion
‘detail’- For example: ga(‘ec:setAction’, ‘detail’); // product detail views
‘add’ – For example: ga(‘ec:setAction’, ‘add’); // measure Product Add to Cart.
‘remove’ – For example: ga(‘ec:setAction’, ‘remove’); // measure Product remove from Cart
‘checkout‘ – For example: ga(‘ec:setAction’,’checkout’, {‘option’: ‘visa’}); // measure additional information about a checkout step
‘purchase’ – For example: ga(‘ec:setAction’, ‘purchase’,{…}); // measure a purchase.
‘refund’ – For example: ga(‘ec:setAction’, ‘promo_click’); //measure the refund of one or more products.
#3.3 actionFieldObject – it is a JavaScript object which is used to store ecommerce action data.
#4 ga(‘ec:addImpression’,impressionFieldObject); is the enhanced ecommerce command which is used to collect and store product impression data. This command is made up of:
#4.1 ec:addImpression – it is a Google Analytics command which measures product impressions and send the impression data to impressionFieldObject
#4.2 impressionFieldObject – it is a JavaScript object which is used to store product impression data.
#5 ga(‘ec:addProduct’,productFieldObject); is the enhanced ecommerce command which is used to collect and store all product data (other than product impression data). This command is made up of:
#1 ec:addProduct – it is a Google Analytics command which collect/measures all product data (other than product impression data) and then send the product data to productFieldObject.
#2 productFieldObject – it is a JavaScript object which is used to store all product data (other than product impression data). Data for following type of products is stored in this JavaScript object:
Individual products that were viewed in a product list (product
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 e-commerce 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.
Frequently Asked Questions About Setting up Enhanced Ecommerce Tracking in Google Analytics
What is a hit?
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.
What is a tracker?
Tracking object (also known as a tracker) is used to send hit data to Google Analytics (GA) web property: Without first creating and using a tracking object, you can not send hit data to a GA property.
What is the enhanced ecommerce plugin?
In order to implement enhanced ecommerce tracking on your website, you need to use the enhanced ecommerce plugin (also called ‘ec’ in short). The Google Analytics command which is used to load the enhanced ecommerce plugin is: ga(‘require’, ‘ec’); // load enhanced ecommerce library.
Just like traditional ecommerce plugin, the enhanced ecommerce plugin must also be loaded, after your tracking object and before you use any of the enhanced ecommerce tracking commands (like ec:addProduct).
Do I need to upgrade to Universal Analytics?
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. ide
What steps are required to implement enhanced ecommerce tracking on my website?
1) Upgrade To Universal Analytics (optional). 2) Add the required enhanced ecommerce tracking code on various web pages. 3) Enable enhanced ecommerce and configure Checkout steps name in your GA property. 4) Replace the old ecommerce tracking code with the product purchase tracking code.
Get weekly practical tips on GA4 and/or BigQuery to accurately track and read your analytics data.
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
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, 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.
