How to Set up eCommerce and Confirmation Page Tracking with Google Analytics

Clickvoyant Analytics
Clickvoyant Analytics Insight
5 min readJan 4, 2017

The standard “out of the box” Google Analytics implementation covers all aspects of incoming site traffic and site browsing behavior. In order to track eCommerce transactions a special Google Analytics eCommerce tracking pixel needs to be implemented. This pixel needs to be implemented only on the Order Confirmation Page (the page immediately after a successful order was placed on your site). This is the page on which the customer sees the Order ID or Transaction ID tracking number and is typically known as a “Thank You” page.

Order Specific Data

While each page (such as the homepage or landing pages, etc.) of your site follows the same rules and format for every visitor session, the confirmation page is customer specific since it tracks a unique order. Hence, the same tracking code that has been deployed site-wide utilizing the Google Tag Manager (GTM) tool implementation needs to be specific for only the confirmation page to capture order specific data. This data cannot be simply stripped off of the Thank You page. Your IT or Developer will need to pass this data along to Google, following a predefined format. This format is referred to as a “Data Layer;” the order specific information such as Order ID or product SKU are known as “Values” and the coding standard is known as “Macros.” GTM is programmed to instinctively translate the Values from the Data Layer into your Google Analytics Reporting Console.

The Code for your IT or Developer

Unfortunately, you can not use GTM to deploy the confirmation page code. The Data Layer code is additional code that your IT team or site Developer needs to specially program into your Confirmation or Thank You page. It is important to remember that the GTM code that is one EVERY page of your site should not be changed or modified! The only thing different with the confirmation page is the addition of the Data Layer code. This new code, Data Layer, has to be coded ahead of the GTM code.

NOTE: It is very important that the confirmation page specific Data Layer code has to be embedded or coded on the Thank You page before the Google Tag Manager code.

<script>
dataLayer = [{
‘transactionId’: ‘1234’,
‘transactionAffiliation’: ‘Acme Clothing’,
‘transactionTotal’: 38.26,
‘transactionTax’: 1.29,
‘transactionShipping’: 5,
‘transactionProducts’: [{
‘sku’: ‘DD44’,
‘name’: ‘T-Shirt’,
‘category’: ‘Apparel’,
‘price’: 11.99,
‘quantity’: 1
},{
‘sku’: ‘AA1243544’,
‘name’: ‘Socks’,
‘category’: ‘Apparel’,
‘price’: 9.99,
‘quantity’: 2
}]
}];
</script>

What Does the Code Mean?

Only the part of the code that is bolded needs to be dynamic (values derived from each specific completed Order or Transaction). The part of the code that is not bolded has to remain static (maintain the predefined GTM format) — otherwise GTM will not be able to interpret it).

Code Nomenclature for your IT or Developer:

Transaction ID and Affiliation need to be in single quotes, because these two values, represent a string (don’t worry your IT or Developer will know what a string is, just make sure they are in single quotes (‘’), developers will sometimes use double quotes (“”) and tell you they are the same thing, but trust us, they should just follow Google guidelines). The ID is the Order Number (these sometimes have letters and numbers mixed together). The Affiliation is your store, this is here because some eComm businesses have multiple online stores or micro-sites.

‘transactionId’: ‘1234’,
‘transactionAffiliation’: ‘Acme Clothing’,

The Revenue or Currency part of the Sale is the: Total, Tax and Shipping. These should not have quotes and they should have a decimal place only if there are cents and dollars involved. If there are no pennies in the currency do not use a decimal point. Note: for International transactions do not use a comma even though in a comma may be used to differentiate between a whole currency and fractions of the currency (only use a period or decimal point).

‘transactionTotal’: 38.26,
‘transactionTax’: 1.29,
‘transactionShipping’: 5,

Be sure that only the amount of currency you collect and bill the customer is passed through. In the situation where there was a discount or free shipping promo, make sure the Google variable reflects the actual amount after the discount. For example, if shipping was free due to a discount, the shipping value should be zero. Please verify and thoroughly QA, otherwise you might wind up with inflated revenue, due to reporting demand sales and not reporting true total revenue.

The code is specifically formatted for the order total, tax and shipping — that means each one needs to be specifically broken out. Basically, do not included shipping and tax in the total as the total should only be the order total, otherwise again you could wind up with inflated revenue figures. The name of the eComm analytics game is data integrity.

The last component is for the individual products that made up the order. This piece of code can also be tricky or a sticking point for IT or Developers. This particular order is made up of two separate items with a total of 3 units sold. Each and every product or SKU that is part of the order needs to be listed separately, along with the product specific component of the order.

Final sticking point, if there was an order discount, please make sure that is also reflected in the Price of the product. Because the total of the product prices need to add up the same exact order total as above.

Notice how the total for the second item Sock is 9.99 while the quantity is 2. Google Analytics will total out the order by multiplying out the price and quantity. As with the values from the dimensions above, make sure to use single quotes for the SKU, Product Name and Product Category. Do not use any quotes for the Price and Quantity (as price and quantity are not strings).

Notice the square brackets [ ] these enclose ALL of the products that were part of the complete order. Notice the curly brackets { } these enclose each separate product. An order could have several of curly brackets but only one square bracket.

‘transactionProducts’: [{
‘sku’: ‘DD44’,
‘name’: ‘T-Shirt’,
‘category’: ‘Apparel’,
‘price’: 11.99,
‘quantity’: 1
},{
‘sku’: ‘AA1243544’,
‘name’: ‘Socks’,
‘category’: ‘Apparel’,
‘price’: 9.99,
‘quantity’: 2
}]

Congratulations! You made it through. Take the time and work this out with your IT or Developer. Make sure to thoroughly test this before the next part (connecting Data Layers with GTM — that part is really easy, and doesn’t require IT or Developers)

Read our Post on How to Create an eCommerce Tracking Pixel for your Confirmation Page using Google Tag Manager Account to finish your eCommerce Tracking Set Up

Learn more at www.clickvoyant.com

--

--