This article is in conjunction with the article Beginners Guide to Enhanced Ecommerce Tracking in Google Analytic where I explained the concept of enhanced e-commerce in great detail and also explained how enhanced ecommerce tracking is different from the traditional ecommerce tracking. If you have not already read that article, then I would strongly suggest you read it, before reading this advanced article on the same topic.

Caveat

This article explains enhanced e-commerce tracking set up in Google Analytics for the gtag.js library.

If you are using the analytics.js library then follow the steps mentioned in this article: Implementing Enhanced Ecommerce Tracking in Google Analytics (analytics.js) – Tutorial

I have shared a lot of tracking code throughout this article. This tracking code is pretty close to actual tracking code used for implementing enhanced ecommerce tracking but it is not the code which you can simply copy-paste without modification and then expect enhanced ecommerce tracking to automatically start working on your website.

That is because Enhanced ecommerce tracking just like the traditional ecommerce tracking cannot be implemented without adding a server side script to the enhanced ecommerce tracking code. 

The objective of this article is to provide a framework through which you and/or your developer can implement enhanced ecommerce tracking on your website.

Enhanced Ecommerce shopping activities

When we set up enhanced e-commerce tracking, we track following (but not limited to) shopping activities on an ecommerce website:

• Viewing of an internal promotion campaign (like an internal banner on a home page).
• Clicking on the internal promotion campaign 
• Viewing a product on the product list.
• Clicking on one of the product links in the product list (to view more details about the product).
  
• Viewing the product details page.
• Adding a product to the shopping cart. 
• Removing a product from the shopping cart.
• Starting the checkout process and completing the various steps in the process.
• Providing additional information during checkout (like selecting a payment or shipping method).
• Completing the checkout process by making a purchase.
• Asking for a refund.

 

Get the ebook (104 Pages)

Introduction to hits and hit type

In the context of Google Analytics, a hit is user interaction with your website/mobile app. The data you send to a Google Analytics Web Property is also known as ‘hit’.

The type of data you send to a Google Analytics web property is known as Hit Type. For example, ‘pageview’, ‘event’, ‘transactions’, ‘item’ etc are all hit types.

Introduction to Global Site Tag (gtag.js)

Global site tag or gtag.js is the new JavaScript library from Google.

Unlike ga.js or analytics.js, the gtag.js is not strictly a Google Analytics library as it is supporting Google Ads Conversion tracking and will support tracking for many other Google products in the near future. So gtag.js is not really the next version of analytics.js

At present, there is analytics.js library which is used to measure users’ interactions with your website and send them to Google Analytics Server. Then we have got gtm.js library which is used for Google Tag Manager. Then we have got firebase.js library which is used to measure users interactions with your mobile apps via Firebase. Then we have got conversion.js library which is used for Google Ads Conversion Tracking.

The purpose of gtag.js is to replace all of these libraries with one single library and hence gtag.js is being promoted as ‘one tag to rule them all’. In order to keep the size of gtag.js small, this library calls other libraries internally. For example, gtag.js calls analytics.js and conversions.js internally.

Below is the example of global site tag configured for Google Analytics as well as Google Ads:

<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id= UA-XXXX “></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());

gtag(‘config’, ‘UA-XXXX‘);// Google Analytics ID
gtag(‘config’, ‘AW-XXXX‘);// Google Ads ID
</script>

Instead of having multiple tracking codes for the Google products we can now manage all the events and page view data using gtag.js.

To install the global site tag, copy the following code and paste it immediately after the <head> tag on every page of your site. Replace UA-XXXX with the ID of your Google Analytics property to which you want to send data:

<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id= UA-XXXX “></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());

gtag(‘config’, ‘UA-XXXX‘);
</script>

You need only one global snippet per page.

Once the Global site tag is placed in the header section of the website we can use the gtag() commands anywhere on a webpage to send events data as well as e-commerce data to Google Analytics and other Google products like Google Ads, Campaign manager etc.

#1 Measuring internal promotion impressions

Internal promotions are those ads (like a banner ad) which take users to other parts of your website.

For example, you may run a banner ad on the home page, which promotes a particular product category and when a user clicks on the banner ad, he is redirected to the product category page.

The viewing of an internal promotion is called internal promotion impression.

So if a user viewed a banner ad on the home page two times, then the number of internal promotion impressions would be 2.

Following is an example of a tracking code which measures the internal ad impression:

gtag(‘event’, ‘view_promotion’, {// promoFieldObject stores internal promotion impression data
“promotions”: [
{
“id”: “[Server Variable]“,// internal ad ID – Required – Type: string – Example: ‘homeBanner1’
“name”: “[Server Variable]“,// internal promotion campaign Name – Type: string – Example: ‘Spring sale’
“creative”: “[Server Variable]”, // internal ad name – Type: String – Example: ‘Spring Sale banner1’
“position”: “[Server Variable]” // Position of the internal ad – Type: string – Example: ‘home top banner’
},
] });

This tracking code is placed on the web page, where you are running your internal promotion ad and whose impressions (views) you want to measure.

Following are the various properties of promoFieldObject:

1. id – A valid internal Promo ad id like “homeBanner1”, “Men’s Category Banner”.
2. name – A valid internal promotion campaign name like “summer sale”, “Cyber Monday sale”.
3. creative – A promotion creative description like “Summer sale casuals banner”
4. position – where the internal promotion ad is positioned like ‘category page top banner’.

[Server Variable] – these are the server side variables. You need to ask your developer to write a server side script which populates the various fields (server variables) of the tracking code above, with the actual data.

Note: Use your own property ID (instead of ‘UA-XXXX-YY’) in the tracking code above.

#2 Measuring clicks on internal promotion

In a purchase journey, a user may click on an internal promotion campaign.

Tie the following function via a Javascript event handler onClick to measure the clicks on an internal promotion campaign (like an internal banner):

gtag(‘event’, ‘select_content’, {// promoFieldObject stores internal promotion impression data
“promotions”: [
{
“id”: “[Server Variable]“,// internal ad ID – Required – Type: string – Example: ‘homeBanner1’
“name”: “[Server Variable]“,// internal promotion campaign Name – Type: string – Example: ‘Spring sale’
“creative”: “[Server Variable]”, // internal ad name – Type: String – Example: ‘Spring Sale banner1’
“position”: ‘[Server Variable]‘ // Position of the internal ad – Type: string – Example: ‘home top banner’
},
] });

This tracking code is placed on the web page, where you are running your internal promotion ad and whose clicks you want to measure.

#3 Measuring product impressions

In a purchase journey, a user may view a product in the product list (product category page or internal search result page).

The viewing of a product in a product list is called product impression.

Use the following product impression tracking code on pages where your products are listed:

gtag(‘event’, ‘view_item_list’, { // ImpressionFieldObject stores product impression data
“items”: [
{
”id”: “[Server Variable]”, // Product ID/SKU – Type: string
“name”: “[Server Variable]”, // Product name – Type: string
”category”: “[Server Variable]”, // Name of the Product category.
// Use / as a delimiter to specify up to 5 levels of hierarchy (e.g. Men/Shirts/T-Shirts) – Type: string
“brand”: “[Server Variable]”,// Name of Product brand – Type: string
“variant”: “[Server Variable]”, // Variant of the product like: colour, size etc – Type: string
“list”: “[Server Variable]”, // Name of the Product list like “search results” – Type: string
“position”: [Server Variable] // Product position in a list. For example 2 – Type: numeric
},
{
// ImpressionFieldObject stores product impression data
”id”: “[Server Variable]”, // Product ID/SKU – Type: string
“name”: “[Server Variable]”, // Product name – Type: string
”category”: “[Server Variable]”, // Name of the Product category.
// Use / as a delimiter to specify up to 5 levels of hierarchy (e.g. Men/Shirts/T-Shirts) – Type: string
“brand”: “[Server Variable]”,// Name of Product brand – Type: string
“variant”: “[Server Variable]”, // Variant of the product like colour, size etc – Type: string
“list”: “[Server Variable]”, // Name of the Product list like “search results” – Type: string
“position”: [Server Variable] // Product position in a list. For example 2 – Type: numeric
}
] });

Here,

ImpressionFieldObject is a JavaScript object which is used to store product impression and it looks like the one below:

{

// ImpressionFieldObject stores product impression data

‘id’: ‘[Server Variable]‘, // Product ID/SKU – Type: string

‘name’: ‘[Server Variable]‘, // Product name – Type: string

‘category’: ‘[Server Variable]‘, // Name of the Product category.

// Use / as a delimiter to specify up to 5 levels of hierarchy (e.g Men/Shirts/T-Shirts) – Type: string

‘brand’: ‘[Server Variable]‘,// Name of Product brand – Type: string

‘variant’: ‘[Server Variable]‘, // Variant of the product like: color, size etc – Type:string

‘list’: ‘[Server Variable]‘, // Name of the Product list like ‘search results’ – Type: string

‘position’: [Server Variable] // Product position in a list. For example 2 – Type: numeric

}

Note: An impressionFieldObject must have a name or id value. All other values are optional

Following are the properties of impressionFieldObject:

1. id
2. name
3. category
4. brand
5. variant
6. list
7. position

You need to ask your developer to write a server side script (like PHP) which loop through all the products on a page and send product impression data for each of them. The script should automatically populate the various fields (server variables) of your tracking code with the actual product data.

Note(1): Your product impression tracking code would look quite different once the server side script has been added to it.

Note(2): Do not send internal promotion click data along with product data in a single hit. If you need to send internal promotion click data then send it in a separate hit.

#4 Measuring click on a product link in the product list (measuring product clicks)

In the purchase journey, a user may click on a product link, in the product list, to view more details about the product.

Tie the following function via a Javascript event handler ‘onClick’ to the links of all the products listed on a page:

// Called when a link to a product is clicked.
function onProductClick() {
gtag(‘event’, ‘select_content’, { // productFieldObject stores product click and other details
“content_type”: “product”,
“items”: [
{
”id”: “[Server Variable]”, // Product ID/SKU – Type: string
”name”: “[Server Variable]”, // Product name – Type: string
”category”: “[Server Variable]”, // Product category – Type: string
”brand”: “[Server Variable]”, // Product brand – Type: string
”variant”: “[Server Variable]”, // Variant of the product like: color, size etc – Type: string
”position”: [Server Variable] // Product position in a list – Type: numeric Example: 10
}
] });

Here,

productFieldObject is a JavaScript object which is used to store all product data (other than product impression data). Data for the following type of products are stored in this JavaScript object:

1. 1. Individual products that were viewed in a product list (product
   2. Products whose detail pages were viewed
   3. Products added to the shopping cart
   4. Products removed from the shopping cart
   5. Products at each step of the checkout process
   6. Products that are purchased
   7. Products that are part of a refund.

The productFieldObject looks like the one below:

{

// productFieldObject stores product click and other details
“id”: “[Server Variable]”, // Product ID/SKU – Type: string
“name”: “[Server Variable]”, // Product name – Type: string
“category”: “[Server Variable]”, // Product category – Type: string
“brand”: “[Server Variable]”, // Product brand – Type: string
“variant”: “[Server Variable]”, // Variant of the product like: color, size etc – Type: string
“position”: [Server Variable] // Product position in a list – Type: numeric Example: 10

}

Following are the properties of productFieldObject:

1. id
2. name
3. category
4. brand
5. variant
6. price
7. quantity
8. coupon
9. position

Your developer would have to write a server side script which sends product click data whenever a product link is clicked in a product list. The script should automatically populate the various fields (server variables) of your tracking code with the actual product data.

The ‘onProductClick‘ function can be tied via online Javascript event handler ‘onClick’ like the one below:

<a href=”/tops/figber/” onClick=”onProductClick();”><img src=”/prod/figber.jpg”></a>

#5 Measuring product details view

In the purchase journey the user can view the product details page.

Add the following code on each product details page:

gtag(‘event’, ‘view_item’, {
“items”: [
{
// productFieldObject stores product click and other details

”id”: “[Server Variable]”, // Product ID/SKU – Type: string
”name”: “[Server Variable]”, // Product name – Type: string
”category”: “[Server Variable]”, // Product category – Type: string
”brand”: “[Server Variable]”, // Product brand – Type: string
”variant”: “[Server Variable]”, // Variant of the product like color, size etc – Type: string
}
]

Your developer would write a script which populates the various fields (server variables) of your tracking code with the actual product data.

#6 Measuring the addition of a product(s) to a shopping cart

In the purchase journey, the user may decide to buy a product. So he can add the product to the shopping cart.

Tie the following function via a Javascript event handler ‘onClick’ to the shopping cart ‘add’ button on each product detail page and on the checkout page:

gtag(‘event’, ‘add_to_cart’, {// Called when a product is added to a shopping cart.
“items”: [
{
// productFieldObject stores product click and other details
“id”: “[Server Variable]”, // Product ID/SKU – Type: string
“name”: “[Server Variable]”, // Product name – Type: string
“category”: “[Server Variable]”, // Product category – Type: string
“brand”: “[Server Variable]”, // Product brand – Type: string
“variant”: “[Server Variable]”, // Variant of the product like color, size etc – Type: string
“price”: [Server Variable], // Product price – Type: numeric
“quantity”: [Server Variable], // Product quantity – Type: numeric
}
] });

Your developer would write a script which populates the various fields (server variables) of your tracking code with the actual product data. The ‘add_to_cart’ function can be tied via online Javascript event handler ‘onClick’ like the one below:

<button onclick=”add_to_cart(product);”>Add to Cart</button>

#7 Measuring removal of a product(s) from a shopping cart

In the purchase journey, the user may decide not to buy a certain product. So he can remove the product from his shopping cart.

Tie the following function via the Javascript event handler ‘onClick’ to the shopping cart ‘remove’ button on each product detail page and on the checkout page:

gtag(‘event’, ‘remove_from_cart’, {// Called when a product is removed from a shopping cart.
“items”: [
{
// productFieldObject stores product click and other details
“id”: “[Server Variable]”, // Product ID/SKU – Type: string
”name”: “[Server Variable]”, // Product name – Type: string
”category”: “[Server Variable]”, // Product category – Type: string
”brand”: “[Server Variable]”, // Product brand – Type: string
”variant”: “[Server Variable]”, // Variant of the product like color, size etc – Type: string
“price”: [Server Variable], // Product price – Type: numeric
“quantity”: [Server Variable], // Product quantity – Type: numeric
}
] });

Your developer would write a script which populates the various fields (server variables) of your tracking code with the actual product data. The ‘remove_from_cart’ function can be tied via online Javascript event handler ‘onClick’ like the one below:

<button onclick=”remove_from_cart(product);”>Remove from Cart</button>

#8 Measuring the first checkout step

In the purchase journey, the user may decide to start the checkout process and complete the various steps in the process.

In order to measure the first checkout step, set the action type to ‘checkout’ and ‘step field’ to the step number. Tie the following function via the Javascript event handler ‘onClick’ to the ‘checkout’ button:

/**
* Called when the user clicks on the ‘checkout’ button
*/
function checkout(cart) {
for(var i = 0; i < cart.length; i++) {
var product = cart[i];
gtag(‘event’, ‘begin_checkout’, {
“items”: [
{
“id”: product.id,
”name”: product.name,
”category”: product.category,
”brand”: product.brand,
”variant”: product.variant,
”price”: product.price,
”quantity”: product.qty
“checkout_step”: 1, // the value of 1 indicates first checkout step.
}
] });
}
}

The ‘checkout’ function can be tied via online Javascript event handler ‘onClick’ like the one below:

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

#9 Measuring the second and subsequent checkout steps

To measure each subsequent checkout step, send a checkout_progress event with the checkout items. Set the action type to ‘checkout_step’ to the step number.

To measure the second step of the checkout process:

gtag(‘event’, ‘checkout_progress’, {
“items”: [
{
“checkout_step”: “2”,

Similarly,

To measure the third step of the checkout process:

gtag(‘event’, ‘checkout_progress’, {
“items”: [
{
“checkout_step”: “3”,

Tie the following function via the Javascript event handler ‘onClick’ to each button which takes a user to the next checkout step:

/**
* Called when the user moves to the next checkout step
*/
function checkout(cart) {
for(var i = 0; i < cart.length; i++) {
var product = cart[i];
gtag(“event”, “checkout_progress”, {
“items”: [
{
”id”: product.id,
”name”: product.name,
”category”: product.category,
”brand”: product.brand,
”variant”: product.variant,
”price”: product.price,
”quantity”: product.qty
“checkout_step”: “2”,
}
] });
}
}

The ‘checkout’ function can be tied via online Javascript event handler ‘onClick’ like the one below:

<button onclick=”checkout(cart);”>Continue</button>

Note: If your checkout process contains only a single step or if you have not configured enhanced ecommerce checkout funnel settings in your web property then measuring the individual checkout steps is not required.

#10 Measuring the checkout options

If you have measured a checkout step during the initial pageview but additional information about the same checkout step becomes available after a user has selected an option (like payment method) then you need to tie the following function via the Javascript event handler ‘onClick’ to the button(s) which takes a user to the next checkout step:

gtag(‘event’, ‘set_checkout_option’, {
“checkout_step”: 1,
“checkout_option”: “shipping method”,
});

Note: Not every checkout process need a checkout option.

#11 Measuring purchase

In the purchase journey, the user completes the checkout process by making a purchase.

In order to measure transaction, use the following tracking code on the order confirmation page:

gtag(‘event’, ‘purchase’, {
// actionFieldObject stores action data
“id”: “[Server Variable]”, // Transaction id – Type: string
“affiliation”: “[Server Variable]”, // Store name – Type: string
“revenue”: “[Server Variable]”, // Total Revenue – Type: numeric
“tax”: “[Server Variable]”, // Tax – Type: numeric
“shipping”: “[Server Variable]”, // Shipping – Type: numeric
“coupon”: “[Server Variable]” // Order/Transaction coupon – Type: string
“items”: [
{
“id”: “[Server Variable]”,
“name”: “[Server Variable]”,
“list_name”: “[Server Variable]”,
“brand”: “[Server Variable]”,
“category”: “[Server Variable]”,
“variant”: “[Server Variable]”,
“list_position”: 1,
“quantity”: 2,
“price”: ‘12.0’
},
});

#12 Measuring refund

Once the purchase journey is over, the user may ask for a refund. You can provide either a full refund or partial refund.

Full refund means refunding the entire order.

Whereas partial refund means refunding a part of the order like refunding a single product.

In order to measure the impact of refund on your business bottomline, you first need to import the refund data to your GA property.

You can import refund data either manually using the ‘Data import’ feature of Google Analytics or through Management API.

Once you have uploaded refund data you can see it, in your ‘Sales Performance’ report:

Note: You cannot delete or modify refund data once it has been uploaded to a web property. So double check the validity of the refund data before you upload it.

To measure a full refund use the following tracking code:

gtag(‘event’, ‘refund’, { “transaction_id”: “actionFeildObject” })

and provide the transaction ID in the actionFieldObject.

To measure a partial refund use the following tracking code:

gtag(‘event’, ‘refund’, {
“transaction_id”: “79.18502354114992”, // Transaction id – Type: string – Required field
“value”: 23.07,
“currency”: “USD”,
“tax”: 1.24,
“shipping”: 0,
“items”: [
{
“id”: “Product ID”, // // Product ID/SKU – Type: string – required field
“name”: “Product Name”,
“brand”: “Product Brand”,
“category”: “Product Category”,
“variant”: “Product Variant”,
“quantity”: 2, // // Product quantity – Type: numeric – required field
“price”: ‘2.0’
},

Note: The refund hit will be sent only when a matching transaction is found.

Follow the steps below to implement enhanced ecommerce tracking on your website:

1. Upgrade To Universal Analytics (optional).
2. Add the required enhanced ecommerce tracking code on various web pages.
3. Enable enhanced ecommerce and configure Checkout steps name in your GA property.
4. Replace the old ecommerce tracking code with the product purchase tracking code.

Step-1: Upgrade To Universal Analytics (optional)

This step is required only when you are still using the classic Google Analytics (ga.js). The upgrade is required because classic Google Analytics does not support enhanced ecommerce tracking. Read this article for the upgrade: Universal Analytics Upgrade Guide

Step-2: Add the required enhanced ecommerce tracking code on various web pages

Add the required enhanced ecommerce tracking code on various webpages of your website (as mentioned in this article) to track the most important shopping activities.

If you have already had standard e-commerce tracking installed then do not add the tracking code to measure product purchases at this stage.

That is because you can not run enhanced ecommerce tracking in parallel with the standard ecommerce tracking for the same GA property and you also do not want to lose ecommerce data while you set up and test enhanced ecommerce tracking.

However, If you are setting up ecommerce tracking for the first time on your website, then you can also add the tracking code to measure product purchases at this stage.

Step-3: Enable enhanced ecommerce and configure Checkout steps name in your GA property

#1 Navigate to the admin section of your GA property.

#2 Click on ‘Ecommerce Settings’ under the ‘View’ column:

#3 ‘Enable Ecommerce’ and then ‘Enhance Ecommerce Reporting’ by switching the toggle button to ‘ON’:

#4 Give a descriptive name to each step in your checkout funnel:

Note: If you do not configure the checkout steps names then you will see only a single step called step 1 in your ‘Checkout behaviour Analysis’ report which is a good option only when you have got a single step checkout:

Once you configured the checkout steps names, your checkout behavior analysis report is going to look like the one below:

Once you have enabled ‘enhanced ecommerce reporting, you can see the new enhanced ecommerce tracking reports (under Conversions > Ecommerce in your GA view):

Note: It is important that you only enable the enhanced ecommerce tracking via the reporting interface when you are ready to test your enhanced ecommerce tracking setup.

Step-4: Replace the old ecommerce tracking code with the product purchase tracking code

Once you have replaced the old ecommerce tracking code with the product purchase tracking code on the order confirmation page, the standard ecommerce tracking will be replaced by enhanced ecommerce tracking.

If you want to play super safe, then first deploy enhanced ecommerce tracking on your staging website via GA test property. You may need to use multiple trackers here. And when everything looks great, then deploy the enhanced ecommerce tracking code on the live website via your main GA property.

Other Articles on Enhanced Ecommerce Tracking

#1 Understanding Enhanced Ecommerce tracking in Google Analytics

#2 Using Enhanced E-Commerce segments for Remarketing in Google Analytics

#3 Using Cohort Analysis & Enhanced ecommerce to understand users behavior

#4 Fixing Duplicate, Cancelled, Test orders & Refunds in Google Analytics

#5 Enhanced Ecommerce Tracking via Google Tag Manager

#6 Implementing Enhanced Ecommerce Tracking in Google Analytics (analytics.js) – Tutorial