Gordon Choi

Author of the Analytics Book

User Tools

Site Tools


google_analytics_enhanced_ecommerce_tracking

Google Analytics Enhanced Ecommerce Tracking

Chapter 08

A typical ecommerce website needs to track online purchases (i.e. transactions). Google Analytics provides two major features for ecommerce websites to track transactions.

  • Ecommerce Tracking
  • Enhanced Ecommerce Tracking

I highly recommend any ecommerce website to set up Google Analytics ecommerce tracking (or enhanced ecommerce tracking) and record transaction data.

  • With ecommerce tracking (or enhanced ecommerce tracking), you can record the information about all the transactions that happen on your site including order IDs, transaction values, product IDs, product quantity, and many more.
  • With the transaction data recorded by Google Analytics, they can be connected other existing Google analytics metrics and dimensions for more advanced reporting and analysis.

The Scope of Ecommerce Tracking

Without Ecommerce Tracking, your Google Analytics data and your transaction data are separated.

  • On your website's server, all transactions are processed. All transaction data is recorded and stored in your database.
  • All users' behavior data is sent to and stored in Google's servers. Only behavior data shows up in Google Analytics reports.
  • No connection is established between Google Analytics data and your transaction data.
  • The disconnected data does not allow any further sophisticated analysis.

Once Ecommerce Tracking is implemented, a connection can be established between your Google Analytics data and your transaction data.

  • On your website's server, all transactions are processed. All transaction data is recorded and stored in your database.
  • All users' behavior data is sent to and stored in Google's servers.
  • A connection is established between Google Analytics data and your transaction data through your customers' order IDs.
  • Both behavior data and transaction data appear in your Google Analytics reports.
  • The connected data can be used for further complicated analysis.

Ecommerce Tracking Implementation

Below are the steps to implement Ecommerce Tracking onto your mobile website.

  • Enable Ecommerce Tracking
  • Initiate Ecommerce Tracking
  • Add a transaction
  • Add items for the Transaction
  • Send data
  • Remove data
  • Verify Data

Enable Ecommerce Tracking

Under your Google Analytics property, go to:

View -> Ecommerce Settings
  • Select On under Enable Ecommerce. This will enable your Google Analytics view to use the ecommerce tracking.

Ecommerce tracking allows you to send the transaction information of your users and have your users' transactions and other information related to their transactions available in Google Analytics reports.

  • Besides the basic Google Analytics tracking code, you are required to use an additional JavaScript code (i.e. Ecommerce tracking code) to send the transaction data to Google Analytics.
  • The Ecommerce tracking code should only be triggered and send transaction data on the web page once a transaction is complete.
  • The Ecommerce tracking code allows you to send compulsory data and optional data.

Initiate Ecommerce Tracking

To initiate Google Analytics Ecommerce Tracking on a web page, use the line of code below. Usually you should place this line of code on the page immediate after a transaction completes. This line creates a shopping cart object which awaits you to add transaction and item data into it.

ga('require', 'ecommerce');

The above line of code for Ecommerce Tracking initiation is the first line of Ecommerce Tracking code, and must be placed before all other Ecommerce Tracking related lines of code. It must be placed after the line of code in which Google Analytics tracker is initiated.

The order must be:

ga('create', 'UA-XXXXXXXX-Y', 'auto');
Some Google Analytics codes
ga('require', 'ecommerce');
Rest of the Ecommerce Tracking

Add a Transaction

The data fields per transaction:

id

  • It holds an identifier as a string for each unique transaction that happens on your site.
  • It is a compulsory field.

revenue

  • It represents the total revenue as a numerical value for a specific transaction.
  • It is a compulsory field.

affiliation

  • It can be used for a particular affiliate code or referral (as a string) for a particular transaction.
  • It is an optional field.

tax

  • It represents the tax charges as a numerical value for a specific transaction.
  • It is an optional field.

shipping

  • It represents the shipping charges as a numerical value for a specific transaction.
  • It is an optional field.

currency

  • It allows you to specify a currency for your transaction.
  • It is an optional field. Normally, you will only use this field when the currency you have selected under your Google Analytics view is different to this new currency.

Add Items for the Transaction

The data fields per product per transaction:

sku

  • It holds a unique identifier of a particular product.
  • It is a compulsory field.

name

  • It holds the name of a particular product.
  • It is a compulsory field.

price

  • It holds the unit price of a particular product as a numerical value.
  • It is a compulsory field.

quantity

  • It represents the number of units (as an integer) of a particular product purchased through a particular transaction.
  • It is a compulsory field.

category

  • It represents the category where a particular product belongs.
  • It is an optional field.

currency

  • It allows you to specify a currency for your transaction.
  • It is an optional field. Normally, you will only use this field when the currency you have selected under your Google Analytics view is different to this new currency.
  • The list of currency codes for all the supported currencies: External Link.

Send Data

The next step is you send the entire set of transaction data to Google Analytics with the line of code below:

ga('ecommerce:send');

Verify Data

Once you have implemented all lines of codes that are required for Ecommerce Tracking, the next step is to verify if the transaction data has been correctly recorded by Google Analytics.

It really depends on how frequency a transaction happens on your mobile website, but normally within the next hour or the next several hours your Ecommerce Tracking data should appear in your Google Analytics reports.

Ecommerce Tracking Example

The example Ecommerce tracking code sends the transaction data with two products to Google Analytics.

ga('require', 'ecommerce');
ga('ecommerce:addTransaction', 
{
'id': 't0000399168', 
'affiliation': 'None',
'revenue': '270.00',
'shipping': '5.00',
'tax': '27.00',
'currency': 'CNY'
});
ga('ecommerce:addItem', 
{
'id': ' t0000399168',
'name': 'Big Chocolate Bar',
'sku': 'gt345',
'category': 'Snack',
'price': '70.00',
'quantity': '1'
'currency': 'CNY'
});
ga('ecommerce:addItem', 
{
'id': ' t0000399168',
'name': 'Wine 1982',
'sku': 'gt017',
'category': 'Alcohol',
'price': '100.00',
'quantity': '2'
'currency': 'CNY'
});
ga('ecommerce:send');

The entire tracking code with the Google Analytics tracker and Ecommerce Tracking will become:

<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-XXXXXXXX-Y', 'auto');
ga('send', 'pageview');
ga('require', 'ecommerce');
ga('ecommerce:addTransaction', 
{
'id': 't0000399168', 
'affiliation': 'None',
'revenue': '270.00',
'shipping': '5.00',
'tax': '27.00',
'currency': 'CNY'
});
ga('ecommerce:addItem', 
{
'id': ' t0000399168',
'name': 'Big Chocolate Bar',
'sku': 'gt345',
'category': 'Snack',
'price': '70.00',
'quantity': '1'
'currency': 'CNY'
});
ga('ecommerce:addItem', 
{
'id': ' t0000399168',
'name': 'Wine 1982',
'sku': 'gt017',
'category': 'Alcohol',
'price': '100.00',
'quantity': '2'
'currency': 'CNY'
});
ga('ecommerce:send');
</script>

The Scope of Enhanced Ecommerce Tracking

Enhanced Ecommerce Tracking is an upgraded version of Ecommerce Tracking.

The advantages of Enhanced Ecommerce Tracking include tracking additional data besides the most common information, the completed transactions. In an ecommerce website's conversion funnel (for transactions), the web pages may be in this order:

  • List page - A user browses a specific list page (of products).
  • Product details page - A user browses a specific product's details page.
  • Shopping cart - A user adds a product to the shopping cart.
  • Checkout page - A user enters the checkout page.
  • Purchase completed - A user completes the entire transaction.

With Enhanced Ecommerce Tracking, you can track data regarding list pages, product details pages, shopping cart, checkout page, and more.

Enable Ecommerce Tracking

To enable Enhanced Ecommerce Tracking, Google Analytics must have Ecommerce Tracking also enabled.

Under your Google Analytics property, go to:

View -> Ecommerce Settings

Select On under Enable Ecommerce. This will enable your Google Analytics view to use the Ecommerce Tracking.

Now go to (which is still under the same screen):

View -> Enhanced Ecommerce Settings

Select On under “Enable Enhanced Ecommerce Reporting”, and click “Submit”. This will enable your Google Analytics view to use Enhanced Ecommerce Tracking.

Initiate Ecommerce Tracking

If you already have ecommerce tracking implemented on your website, you can convert the ecommerce tracking implementation to enhanced ecommerce tracking. First in your tracking code, replace:

ga('require', 'ecommerce');

with:

ga('require', 'ec');

Enhanced Ecommerce Tracking Implementation for Transactions

The example Enhanced Ecommerce tracking code sends the transaction data with two products to Google Analytics.

<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-XXXXXXXX-Y', 'auto');
ga('require', 'ec');
ga('set', '&cu', 'CNY'); //Specify currency
ga('ec:addProduct',{ //Add a product
'id': 'gt345',  // Product SKU
'name': 'Big Chocolate Bar',
'category': 'Snack',
'brand': 'Whitelabel',
'variant': 'none',
'price': '70.00',
'quantity': '1',
});
ga('ec:addProduct',{ //Add a product
'id': 'gt017',  // Product SKU
'name': 'Wine 1982',
'category': 'Alcohol',
'brand': 'French Red Wine',
'variant': 'red wine',
'price': '100.00',
'quantity': '2',
});
ga('ec:setAction', 'purchase',{ //Add the transaction
'id': 't0000399168', // Transaction id
'affiliation': 'none',
'revenue': '270.00',
'tax': '27.00',
'shipping': '5.00',
'coupon': 'none',
});
ga('send', 'pageview');
</script>

The currency of the transaction is specified by:

ga('set', '&cu', 'CNY');

The method that adds an item to the transaction:

ga('ec:addProduct',{
// Some Codes
});

The method that adds the transaction:

ga('ec:setAction', 'purchase',{
// Some Codes
});

Note, this line of code has been intentionally placed at the end of the entire tracking code. This ensures all the information of this transaction have been specified before the data is sent to Google Analytics.

ga('send', 'pageview');

Enhanced Ecommerce Tracking Implementation for Product Details View

To track user's view of a specific product details page, add the following code to all product details pages.

<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-XXXXXXXX-Y', 'auto');
ga('require', 'ec');
ga('set', '&cu', 'CNY'); //Specify currency
ga('ec:addProduct',{
'id': 'gt345',  // Product SKU
'name': 'Big Chocolate Bar',
'category': 'Snack',
'brand': 'Whitelabel',
'variant': 'none',
'price': '70.00',
'quantity': '1',
});
ga('ec:setAction', 'detail'); //Set the action to "details page"
ga('send', 'pageview');
</script>

Enhanced Ecommerce Tracking Implementation for Shopping Cart

A shopping cart of an ecommerce website allows a user to:

  • Add an item (to the cart) when the user intents to buy that particular item.
  • Remove an item (from the cart) when the user no longer wants to buy that particular item.

Adding an Item to the Shopping Cart

<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-XXXXXXXX-Y', 'auto');
ga('require', 'ec');
ga('set', '&cu', 'CNY'); //Specify currency
function addToCart(product) {
  ga('ec:addProduct',{
  'id': 'gt345',  // Product SKU
  'name': 'Big Chocolate Bar',
  'category': 'Snack',
  'brand': 'Whitelabel',
  'variant': 'none',
  'price': '70.00',
  'quantity': '1',
  });
  ga('ec:setAction', 'add'); // Set action to "add to cart"
  ga('send', 'event', 'enhanced ecommerce', 'button click', 'add to Cart'); // Send "add to cart" with an event.
}
ga('send', 'pageview');
</script>

Removing an Item from the Shopping Cart

<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-XXXXXXXX-Y', 'auto');
ga('require', 'ec');
ga('set', '&cu', 'CNY'); //Specify currency
function removeFromCart(product) {
  ga('ec:addProduct',{
  'id': 'gt345',  // Product SKU
  'name': 'Big Chocolate Bar',
  'category': 'Snack',
  'brand': 'Whitelabel',
  'variant': 'none',
  'price': '70.00',
  'quantity': '1',
  });
  ga('ec:setAction', 'remove'); // Set action to "remove from cart"
  ga('send', 'event', 'enhanced ecommerce', 'button click', 'remove from Cart'); // Send "remove from cart" with an event.
}
ga('send', 'pageview');
</script>

Enhanced Ecommerce Tracking Implementation for Checkout

In the Checkout process of your ecommerce website, you will require users to submit a form with their personal information. Once the information is submitted to you, the transaction is considered “complete”. The checkout process may vary on different ecommerce websites.

  • Your Checkout process may have a form on only a single page.
  • Your Checkout process may have a form that spans over multiple pages.

In this example, it demonstrates the implementation of Enhanced Ecommerce Tracking for the first page in the Checkout process.

<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-XXXXXXXX-Y', 'auto');
ga('require', 'ec');
ga('set', '&cu', 'CNY'); //Specify currency
function checkout(cart) {
  for(var i = 0; i < cart.length; i++) {
    var product = cart[i];
    ga('ec:addProduct',{
    'id': 'gt345',  // Product SKU
    'name': 'Big Chocolate Bar',
    'category': 'Snack',
    'brand': 'Whitelabel',
    'variant': 'none',
    'price': '70.00',
    'quantity': '1',
    });
  }
  ga('ec:setAction','checkout', {'step': 1}); // Set the action to "Checkout" and set value to 1 for the Checkout process's first page.
}
ga('send', 'pageview');
</script>

Add an onclick function to the Checkout button.

<button onclick="checkout(cart);">Checkout</button>

Previous Chapters

Next Chapters


Gordon Choi's Analytics Book has been available since August 2016 and is proudly powered by Folks Analytics.

Thank you for reading! If you love my book, you're welcome to donate through Paypal.

google_analytics_enhanced_ecommerce_tracking.txt · Last modified: 2017/02/16 23:19 by Gordon Choi