Programming
Article
By Craig Buckler

How to Track Ecommerce Transactions with Google Analytics

By Craig Buckler
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

Google Analytics is an amazing tool. Many developers add page tracking code, but Analytics also allows you to monitor JavaScript/Ajax events and promotional campaigns such as email newsletters. In this article, we’ll look at tracking your shopping transactions.

Why Track Transactions in Google Analytics?

Your ecommerce system can provide detailed transaction statistics, but you can’t necessarily relate them to page views or other factors. For example, was an increase in sales caused by SEO improvements, a successful email campaign, advertising or seasonal variations?

Recording all transactions in Google Analytics provides a richer set of customer and product reports. With this information, you can assess the success of campaigns and concentrate on those which lead to increased ROI.

Ecommerce Tracking Basics

In most cases, a shop visitor will add items to a cart, proceed to the checkout, perhaps register, pay an amount, and be shown a receipt page. The full details of the transaction must be passed to Google Analytics at the “receipt” page stage.

Transaction data is normally stored in your back-end systems or passed back by the payment gateway. You need to pass this information to the analytics script. In other words, you’ll use a server-side language such as PHP to obtain the data and write JavaScript directly to the resulting HTML page.

Enable Ecommerce Tracking

By default, Google Analytics disables ecommerce reports, so you must choose “Yes, an E-commerce Site” on the edit profile screen (click Edit at the top-right of the Profile Settings page).

Transaction-tracking Code

There are five distinct parts to the ecommerce tracking code.

1. Set the account and track the page
The standard Google Analytics tracking code must be implemented, i.e.


var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']); // your GA ID
_gaq.push(['_trackPageview']);            // track the page view

2. Add transaction details
The next code block provides information about the transaction. It must include the following data in this order:

  • the order ID (required)
  • the store or affiliate name (required, but can be an empty string)
  • the total amount (required)
  • the tax amount
  • the shipping charge
  • the buyer’s city
  • the buyer’s state, county or province
  • the buyer’s country

Note that numeric amounts must be specified in JavaScript notation, i.e. no thousand separators and a period (.) for the decimal point.

For example:


_gaq.push(['_addTrans',
	'1234',       // order ID
	'SitePoint',  // store
	'19.99',      // total
	'1.50',       // tax
	'3.00',       // shipping
	'Chicago',    // city
	'Illinois',   // state
	'USA'         // country
]);

3. Add individual products
A code block is required for all products purchased within the transaction. The data is required in the following order:

  • the order ID (must be the same as the transaction)
  • the product code or SKU
  • the product name
  • the category or a variation, e.g. large size
  • the unit price
  • the quantity

_gaq.push(['_addItem',
	'1234',          // order ID
	'css123',        // SKU/code
	'CSS Live',      // product name
	'Online Course', // category or variation
	'9.99',          // unit price
	'1'              // quantity
]);

4. Submit the transaction
The last instruction submits all transaction data to Google Analytics:


_gaq.push(['_trackTrans']);

5. Load the Google Analytics script
Finally, we must remember to load the Analytics script. The asynchronous syntax is recommended:


(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Putting It All Together

Your final ‘receipt’ page will look something like this:


<!DOCTYPE html>
<html lang="en">
<head>
<title>Thank you for your order</title>
</head>
<body>
<p>Thank you for your order. Your details have been sent to customer@email.com.</p>

<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12345-6']);
_gaq.push(['_trackPageview']);

// transaction details
_gaq.push(['_addTrans',
	'1234',
	'SitePoint',
	'109.99',
	'10.00',
	'0.00',
	'Chicago',
	'Illinois',
	'USA'
]);

// item 1
_gaq.push(['_addItem',
	'1234',
	'css123',
	'CSS Live',
	'Online Course',
	'9.99',
	'1'
]);

// item 2
_gaq.push(['_addItem',
	'1234',
	'cb999',
	'Donation for Craig's excellent blog post',
	'Well-deserved bonus!',
	'100',
	'1'
]);

// track transaction
_gaq.push(['_trackTrans']);

// load Analytics
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>

Within a few hours, you’ll be able to view buying statistics in the Ecommerce section of the Google Analytics panel. You will also find further ‘Ecommerce’ tabs on other reports.

Are you tracking ecommerce transactions in Google Analytics? Have you found it useful?

note:Want more?

If you want to read more from Craig, subscribe to our weekly tech geek newsletter, Tech Times.

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.
Is it good?Is it good?