Looking for a secret weapon to kick your ecommerce reporting into overdrive and improve the conversion rates of your sales funnel? Google Analytics has an amazing suite of features that are rarely used. This secret weapon is free and incredibly valuable. There’s a catch though. It’s quite difficult to set up/implement. That’s about to change. In this article, we’ll discuss Enhanced Ecommerce features of Google Analytics and take a deep dive into the implementation using the standard implementation guide as well as the Redfly Google Tag Manager implementation (coming next). A guide like this has never been attempted before so if you’re already aware of the benefits of Enhanced Ecommerce reporting in GA (and even if you’re not), let’s jump on in.

In addition to tracking ecommerce transaction details on your website in Google Analytics, Enhanced Ecommerce allows you to track product impressions, product clicks, viewing product details, adding a product to shopping cart, checkout process steps, transactions and refunds. Let that sink in for a second. integrated into your standard Google Analytics reporting, your attribution models/reports and your Google Ads data, that’s an incredible set data right there. Before we get stuck into setting this up, let’s take a moment to see how that might look like in your GA account.

Enhanced Ecommerce Reports

Let’s start with the finished product. When you complete this guide and have everything set up and tested correctly your ecommerce reports in Google Analytics will change to look something like below.

Think about that. Whether you’ve got a single page checkout, no checkout or thank you page at all, or a complex sales funnel spanning multiple steps, days, devices and CRM systems, now you’ve got complete visibility into the behaviour of your customer before they converted, or worse, left your site. You can now tell what product list your customer filtered down to in a particular search before converting, what areas of the screen they were focused on before abandoning, how the placement of a competing or complementary product affected your conversion rates. Google Analytics just became infinitely more powerful. Let’s take a closer look at some of the new reports available.

The Ecommerce Overview report:

Shopping Behavior report:

Checkout Behavior report (this is from a site with a single page checkout):

Product Performance report:

Sales Performance report:

Standard Setup

The first step is always the easiest. You need to enable enhanced ecommerce tracking for your view in the admin section of your Google Analytics account.

Because enhanced ecommerce is tracking so many details about the purchase process it is quite complicated to implement. It also requires server side coding to get the values into the tracking script. You’ll have to pick and choose each of the features that you want to implement and each feature needs to be implemented separately.

If you are using traditional ecommerce already you need to create a new property for testing. You cannot run traditional ecommerce and enhanced ecommerce in the same time for the same web property. For tracking multiple properties please check Working with multiple trackers

First you need to load the enhanced ecommerce plugin. It should be loaded after the tracker object is created and before the enhanced ecommerce specific code.

The order should be like this:

<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-1', 'auto');  // Creating a tracking object
  
  ga('require', 'ec');                    // Loading the Enhanced Ecommerce plugin
  
  { ecommerce specific commands }
  
  ga('send', 'pageview');                 // Sending the pageview

</script>

The ecommerce data is sent to google analytics together with a hit – pageview or event. You need to send the hit after the enhanced ecommerce command.

Measuring Product Impressions

Whenever a product is displayed on your site on anything other than it’s dedicated product page, a product impression occurs. A product can appear on product category pages, search result pages, a top sellers list in your sidebar etc…

You can track these impressions using enhanced ecommerce!

Here is a sample html page with a fully working example code snippet for sending two product impressions to Google Analytics:

<!DOCTYPE html>
<html>
<head>
<title>Product Impressions</title>
<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-1', 'auto');   // Creating a tracking object
  
</script>
</head>
<body>
<script>
ga('require', 'ec');                // Loading the Enhanced Ecommerce plugin

ga('ec:addImpression', {
  'id': 'p01',                      // The Product's id
  'name': 'Red Widget',             // The Product's name
  'category': 'Widgets',            // The Product's category
  'brand': 'Super Widgets',         // The Product's brand
  'variant': 'Small',               // The Product's variant
  'list': 'Search Results',         // The list where the product appears
  'position': 1,                    // The Product's position in the list.
  'price': 12.50                    // The Product's price
});
ga('ec:addImpression', {
  'id': 'p02',
  'name': 'Blue Widget',
  'category': 'Widgets',
  'brand': 'Super Widgets',
  'variant': 'Small',
  'list': 'Search Results',
  'position': 2,
  'price': 7.50
});
ga('send', 'pageview');             // Sending the product impressions with the pageview
</script>
</body>
</html>

Tracking user interactions

Tracking product link clicks

You can track when a link to the product details page is clicked anywhere on the site.

The code below is for tracking product links clicks.

<!DOCTYPE html>
<html>
<head>
<title>Product Click</title>
<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-1', 'auto');  // Creating a tracking object

  ga('require', 'ec');                    // Loading the Enhanced Ecommerce plugin
  
  ga('send', 'pageview');
</script>
<script>
function trackProductClick() {	    // We create a function that will be called when a product links is clicked

ga('ec:addProduct', {
  'id': 'p01',                      // The Product's id
  'name': 'Red Widget',             // The Product's name
  'category': 'Widgets',            // The Product's
  'brand': 'Super Widgets',         // The Product's brand
  'variant': 'Small',               // The Product's variant
  'list': 'Search Results'          // The Product's list
});
ga('ec:setAction', 'click', {       // click action.
  'list': 'Search Results'          // Product list (string).
});
  ga('send', 'event', 'UX', 'click', 'Results', {    // Send the product click details with an event
      hitCallback: function() {
        document.location = 'product-detail.html';    // Redirect the user to the product page
      }
  });

}
</script>
</head>
<body>
<!-- Triggering the product click tracking function on the product link click -->
<a href="#" onclick="trackProductClick(); return !ga.loaded;">Product Details Page</a>
</body>
</html>

Tracking Product Details Views

On each dedicated product page visit we are sending the product details to Google Analytics with a pageview.

In order to measure the number of views of a product details page you need to use the code below:

<!DOCTYPE html>
<html>
<head>
<title>Product Details View</title>
<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-1', 'auto');

  ga('require', 'ec');
      
</script>
<script>
ga('ec:addProduct', {
  'id': 'p01',                      // The Product's id (id or name is required)
  'name': 'Red Widget',             // The Product's name
  'category': 'Widgets',            // The Product's
  'brand': 'Super Widgets',         // The Product's brand
  'variant': 'Small',               // The Product's variant
  'price': 12.50                    // The Product's price
});

ga('ec:setAction', 'detail');       // Sets the ecommerce action

ga('send', 'pageview');             // Send product details view with the pageview.
</script>
</head>
<body>

</body>
</html>

Tracking product addition or removal from cart

Each time a product is added to to the shopping cart we are sending the product details to Google Analytics together with an event.

For measuring product cart additions or removals you need to use the code below:

<!DOCTYPE html>
<html>
<head>
<title>Add To Cart</title>
<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-1', 'auto');

  ga('require', 'ec');
  
  ga('send', 'pageview');
    
</script>
<script>

function addToCart() {              // We create a function that will be called when a product links is clicked
  ga('ec:addProduct', {
  'id': 'p01',                      // The Product's id
  'name': 'Red Widget',             // The Product's name
  'category': 'Widgets',            // The Product's
  'brand': 'Super Widgets',         // The Product's brand
  'variant': 'Small',               // The Product's variant
  'price': 15,                      // The Product's price
  'quantity': 1
});
  ga('ec:setAction', 'add');        // 'add' or 'remove'
  ga('send', 'event', 'UX', 'click', 'add to cart');     // 'add to cart' or 'remove from cart'
}
</script>
</head>
<body>
<!-- Triggering the cart addition/removal tracking function on the add/remove button/link click -->
<a href="#" onclick="addToCart();">Add To Cart</a>
</body>
</html>

Tracking the checkout process

After the product has been added the cart you can track the checkout process steps. First you have to configure the checkout steps in the in Admin -> View -> Ecommerce Settings.
If your checkout process consists of two steps then you need to create two steps here and label them. These labels will appear in the Checkout Behavior report.

The example below shows the setup for a two step checkout process. The first step will be the shipping details page and the second step the payment details page.

You can find a complete working example below:

<!DOCTYPE html>
<html>
<head>
<title>Checkout Step</title>
<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-1', 'auto');
      
</script>
<script>
ga('require', 'ec');

ga('ec:addProduct', {
  'id': 'p01',                      // The Product's id
  'name': 'Red Widget',             // The Product's name
  'category': 'Widgets',            // The Product's
  'brand': 'Super Widgets',         // The Product's brand
  'variant': 'Small',               // The Product's variant
  'price': 15,                      // The Product's price
  'quantity': 1
});

ga('ec:setAction','checkout', {
    'step': 1,            // First checkout step, use 2 for the second step etc...
    'option': 'Visa'      // Optional additional info
});

ga('send', 'pageview');       // Send checkout step with the pageview.
</script>
</head>
<body>

</body>
</html>

Tracking Ecommerce Transactions

An ecommerce transaction can be tracked on the checkout success or thank you page where the user is notified about the successful transaction.

The ecommerce transaction is sent with a page view.

<!DOCTYPE html>
<html>
<head>
<title>Ecommerce Transaction</title>
<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-1', 'auto');
  
</script>
</head>
<body>
<script>
ga('require', 'ec');

ga('ec:addProduct', {
  'id': 'p01',                      // The Product's id
  'name': 'Red Widget',             // The Product's name
  'category': 'Widgets',            // The Product's
  'brand': 'Super Widgets',         // The Product's brand
  'variant': 'Small',               // The Product's position in the list
  'price': '12.50',                 // The Product's price
  'quantity': 1                     // The quantity of products purchased
});

ga('ec:addProduct', {
  'id': 'p02',
  'name': 'Blue Widget',
  'category': 'Widgets',
  'brand': 'Super Widgets',
  'variant': 'Small',
  'price': '7.50',
  'quantity': 1
});

ga('ec:setAction', 'purchase', {
  'id': 'T12345',                    // Transaction ID
  'affiliation': 'Widget Store',     // Affiliation
  'revenue': '20.00',                // Revenue
  'tax': '2.00',                     // Tax
  'shipping': '3.50',                // Shipping cost
  'coupon': 'CP12345'                // coupon code if any
});

ga('send', 'pageview');              // Send the transaction details with the pageview request
</script>
</body>
</html>

Debugging Your Enhanced Ecommerce Implementation

There are tools for checking if your enhanced ecommerce implementation is working properly. We’ll check our sample codes using the Google Tag Assistant and Google Analytics Debugger Chrome plugins.

Debugging using Google Tag Assistant

When you have Google Tag Assistant installed you need to enable it for your domain. Click the small Google Tag Assistant icon when you’re on a page you want to test and click “enable”:

Once enabled, reload your page so Google Tag Assistant can analyze it. You should see your Google Analytics listed in Google Tag Assitant:

Click your tag to continue to see the details about your tag:

Now Click “Pageview Requests” at the bottom and on the next screen click URLs at the top.
You’ll see the request URL sent to Google Analytics. To see the request details arranged in a table click the small table icon above the URL:

On the next screen you will see the parameters and values sent to Google Analytics arranged in a table.

Debugging using Google Analytics Debugger

Install the Chrome extension from the Chrome Web Store

To use the extension please follow the steps below:

– Go to the page you want to test your Google Analytics tracking code on
– Click the extension’s icon next to the address bar to enable it
– Go to Menu -> More Tools -> Developer Tools or press Ctrl+Shift+J
– Select the console tab
– Reload the page you are on

You will see the data being sent to google analytics:

 Go Forth & Multiply

So there you have it. Now you’ve got a brand new suite of free tools to play with to squeeze those extra percentage points out of your conversion rate. We have clients that have improved their conversion rate 100%-150% on an already optimized conversion funnel. The more you understand about what your visitors are doing on your website before they leave (or convert), the more you can identify problem activities that, until enhanced ecommerce, were simply unknowable, the more you can improve your customer experience and ultimately your bottom line.