Design & UX

How to Track Ecommerce Transactions with Google Analytics

Craig Buckler
Share

Google Analytics is a really useful tool for tracking visitors on your website, but few developers go beyond adding the standard tracking code, which consists of a JavaScript snippet.

Other than custom Events (see the link above if you’re curious what Events are), we can also track ecommerce transactions in Google Analytics using some extra code.

Why Track Ecommerce Transactions in Google Analytics?

Most ecommerce systems offer detailed transaction statistics, but you can’t necessarily relate them to sessions, devices, demographics or other important metrics. For example, was an increase in sales caused by UX improvements, a successful marketing campaign, or seasonal variations? Who knows.

Recording transactions in Google Analytics means that:

  • product and user reports are richer and more insightful
  • you can relate transactions directly to AdWords and other campaigns systems
  • you can assess the success of campaigns and concentrate on those that lead to a high return on investment
  • you can award access to these reports to those in your company without having to add them to the ecommerce system.

Let’s dive in.

The Overall Concept

Typically, your users will add items to a cart, check out, possibly register, pay an amount, and then be redirected to a confirmation screen. The transaction details will then show up in Google Analytics, once the user has officially checked out.

Ecommerce transaction data is usually stored in your back-end system or the back-end system of a payment gateway. For this information to show up in Google Analytics, we need to update our JavaScript code so Google Analytics can track this data too.

How to Enable Ecommerce Tracking

Proceed to the Admin area (cog icon) on the left-hand side, select your PROPERTY (your website), and then select Ecommerce Settings. Switch the “Status” to ON.

Note: the Related Products feature was deprecated in April 2017, so avoid this entirely.

Enhanced Ecommerce Settings allows you to record product impressions, promotions and actions such as coupon usage. I recommend that you implement standard ecommerce tracking first, then consult the Enhanced Ecommerce Documentation when you want to move on to more advanced ecommerce tracking later down the line.

Finally, open the View Settings menu and change the Currency displayed as value if necessary.

Enable Ecommerce Transactions

Next, use this snippet to enable ecommerce transactions:

ga('require', 'ecommerce');

Note: this must be run after the page tracking snippet and before any ecommerce functionality is used.

Starting a New Transaction

Next, the transaction is initiated with this JavaScript code:

ga('ecommerce:addTransaction', {
  'id': '[transactionId]',
  'affiliation': '[storeName]',
  'revenue': '[totalCost]',
  'shipping': '[shippingCost]',
  'tax': '[taxCost]',
  'currency': '[currency]'
});

Let’s look at each of the lines in this object individually …

[transactionId] (required)

The unique transaction identifier, e.g. 'ABC-123'.

[storeName] (optional)

The affiliation or store name, e.g. 'My Online Shop'.

[totalCost] (optional)

The total cost including shipping and taxes. A string-encoded number without currency symbols must be used, e.g. '12.99'.

[shippingCost] (optional)

The (numeric) cost of shipping, e.g. '2.99'.

[taxCost] (optional)

The (numeric) tax, e.g. '1.64'.

[currency] (optional)

We already set up the default currency earlier, but you can alternatively specify a 3-character ISO 4217 country code such as EUR (Euros) or GBP (British Pound) if the shopper opts to pay using a different currency.

Adding Items to a Transaction

Items are added to an existing transaction with this snippet:

ga('ecommerce:addItem', {
  'id': '[transactionId]',
  'name': '[productName]',
  'sku': '[productCode]',
  'category': '[categoryName]',
  'price': '[price]',
  'quantity': '[quantity]'
});

Again, let’s look at each of the lines in this object individually …

[transactionId] (required)

The unique transaction identifier, e.g. 'ABC-123'. This must match the code used in the transaction above, to clarify that this item relates to the basket the user already has.

[productName] (required)

The product name, e.g. 'mens blue shirt'.

[productCode] (optional)

A unique product code or stock-keeping unit (SKU), e.g. 'MBS-00001'.

[categoryName] (optional)

A category or variation, e.g. 'mens shirts'.

[price] (optional)

The numeric price of this item, e.g. '9.99'.

[quantity] (optional)

The quantity purchased, e.g. '2'.

Clearing Items in a Transaction

In case the user empties their cart, the following JavaScript command clears all items from the transaction:

ga('ecommerce:clear');

Submit the Transaction to Google Analytics

The final transaction with all items must then be submitted with the following JavaScript command:

ga('ecommerce:send');

Naturally, this would happen on the confirmation screen.

The Final Code

The HTML code in your final confirmation screen could therefore look something like this:

<!DOCTYPE html>
<html>
<head>
<title>Thank you for your order</title>
</head>
<body>

<h1>Thank you for your order</h1>
<p>A receipt has been sent to you@youremail.com</p>

<!-- standard GA code -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>

<script>
// enable the ecommerce features
ga('require', 'ecommerce');

// start the transaction
ga('ecommerce:addTransaction', {
  'id': '10001',
  'affiliation': 'My Cool Store',
  'revenue': '54.97',
  'shipping': '5.00',
  'tax': '0.00'
});

// add item 1
ga('ecommerce:addItem', {
  'id': '10001',
  'name': 'Learn HTML',
  'sku': 'BOOK00001',
  'category': 'book',
  'price': '14.99',
  'quantity': '1'
});

// add item 2
ga('ecommerce:addItem', {
  'id': '10001',
  'name': 'Learn CSS',
  'sku': 'BOOK00002',
  'category': 'book',
  'price': '14.99',
  'quantity': '1'
});

// add item 3
ga('ecommerce:addItem', {
  'id': '10001',
  'name': 'Learn JavaScript',
  'sku': 'BOOK00003',
  'category': 'book',
  'price': '19.99',
  'quantity': '1'
});

// send transaction
ga('ecommerce:send');
</script>
</body>
</html>

Within a few hours, you’ll be able to view transaction statistics in the Conversions → Ecommerce section of Google Analytics (among other reports as well).

For more information, refer to the Google Analytics documentation: