Super Guide To Enhanced Ecommerce Tracking via Google Tag Manager [2019]

Last Updated on April 22, 2019 by Ritwik B

Enhanced E-Commerce Reports is one of the most powerful reports in Google Analytics. In this article, you’ll learn to implement the enhanced e-commerce tracking via GTM.

Google Tag Manager simplifies the process of implementation & also it is much more beneficial than google analytics implementation because the same e-commerce data collected in dataLayer can be used in

• Analytics tools such as mixpanel, amplitude, etc
• Ad networks such as Facebook, Twitter
• Remarketing – Dynamic Remarketing in Google or Facebook
• & so on

So it is always scalable to use GTM for tracking purposes.

Here are some of the myths related to Enhanced Ecommerce

1. Myth: Enhanced E-commerce Tracking can only be implemented on E-commerce Sites.
   Reality: It can be implemented on any site. Most important thing is to understand which e-commerce code populates which metric/dimension.
2. Myth: We need server-side access to implement Enhanced E-commerce.
   Reality: We can even implement it client-side. But it is recommended to use server-side variables.
3. Myth: We have to implement each & every code as specified in the GTM Doc.
   Reality: We can implement any portion of the code.
4. Myth: DataLayer Code placement is important.
   Reality: We can place it anywhere on the page by using custom events to fire e-commerce code.
5. Myth: It is too difficult to implement enhanced e-commerce
   Reality: Just follow this article & that myth would be busted 😃

Let’s start with the framework to follow

Google Analytics Enhanced Ecommerce Framework

Google has defined an ‘ecommerce’ Object containing the following ecommerce measurement objects, namely

1. impressions
2. click
3. detail
4. add
5. remove
6. checkout
7. checkout_option
8. purchase
9. refund
10. promoView
11. promoClick

To make it easy to understand,

Google has defined different E-commerce Codes for measuring different User Actions. 

Every code will populate a particular dimension/metric in the analytics ecommerce report.

The format of the ecommerce code is also easy to visualize as the code starts with

{ ‘ecommerce’ : { USER_ACTION : …. 

Eg:

• { ‘ecommerce’ : { ‘impressions’ : …  represents Product Impressions Data
• { ‘ecommerce’ : { ‘click’ : … represents Product Click Data
• { ‘ecommerce’ : { ‘add’ : … represents Add To Cart Data
• { ‘ecommerce’ : { ‘remove’ : … represents Remove From Cart Data
• { ‘ecommerce’ : { ‘checkout’ : … represents Checkout Steps Data and so on………..

We’ll now be implementing these different blocks of code one by one on different pages.

Make sure to follow this framework or ask your developer to stick it on the wall while implementation process.

Steps for Google Analytics Enhanced Ecommerce via GTM

Step – 1: Toggle Enhanced e-commerce in Google Analytics (recommended in Test View)

This is a most important step to which lets the analytics show processed & configured in the ecommerce Reports.

Make sure you have a test view created, if not just create a new one. It’s not a good idea to do test tracking in your main (filtered view).

In the Test View, Go To E-commerce Settings > Enable E-commerce > Enable Enhanced E-commerce.

After enabling, you can see the new blank reports in the Conversions > Ecommerce tab.

Step – 2: In GTM, Create Google Analytics Event Tag with Enhanced Ecommerce dataLayer Option Checked.

Just create one analytics event tag in google tag manager.

• Category : ‘Enhanced Ecommerce’
• Action: ‘{{Event}}’

Enable the dataLayer option in More Settings > Ecommerce.

Save the Tag without Trigger. We’ll be constructing the trigger in below steps.

Step – 3 : Implement Product ‘Impressions’ & ‘Click’ Code on Product Listing Pages.

Product listing pages are the pages where products are listed in bulk. These pages may be

• Search Results pages
• Product Category Pages
• Related Product Widget Pages
• “People who bought this also bought…” widget pages, etc

These ‘impressions’ & ‘click’ code are related & I’ll tell you why.

First, let’s go with ‘impressions’ code.

To implement E-commerce ‘impression’ code follow this logic

• Populate Product Data in an array of objects. (named productImpressionArray)
• Pass it in the ecommerce ‘impression’ object.
• Push ecommerce object to dataLayer.

<script>
var window.dataLayer = window.dataLayer || []

//Step-1: Populate product in an array //
var productImpressionArray = [ 
{
'name': 'Product #1',      // Name or ID is required.
'id': '101',
'price': '15.25',
'brand': 'Nike',
'category': 'Shoes',
'variant': 'Gray',
'list': 'Search Results',
'position': 1                  
}, 
{
'name': 'Product #2', // Name or ID is required.
'id': '102',
'price': '22.11',
'brand': 'Puma',
'category': 'Shoes',
'variant': 'Black',
'list': 'Search Results',
'position': 2
}, 
...................
]

//Step - 2: Pass it in ecommerce object //
var ecommerceObject = {
 'ecommerce' : { 'impressions' : productImpressionArray },
'event' : 'productImpressions'                                     //pass custom event
 }

//Step - 3: Push to DataLayer//
dataLayer.push(ecommerceObject)

</script>

<script>
// Inititalize Click Listener //


// Pass clicked Product in array of object //
var productClickedArray = [{
'name': 'Product #1',             // Name or ID is required.
'id': '1',
'price': '15.25',
'brand': 'Nike',
'category': 'Shoes',
'variant': 'Gray',
'position': 2
}]

//Pass the Product clicked data in ecommerce object //
var ecommerceObject = {
'ecommerce' : { 'click' : 
{ 'products' : productClickedArray, 
  'actionField' : {'list' : 'Search Results' }             // Pass the correct page type in place of 'Search Results'. 
}
},
'event' : 'productClick'                                     //pass custom event
}

//Push the ecommerceObject in dataLayer
dataLayer.push(ecommerceObject)

</script>

Step – 4 : Implement Product ‘Detail’ & ‘Add’ Code on Product Details Pages.

<script>
var window.dataLayer = window.dataLayer || []
//Step-1: Pass Product Data in an array of objects //
var productDetailArray= [ 
{
'name': 'Product #1',      // Name or ID is required.
'id': '101',
'price': '15.25',
'brand': 'Nike',
'category': 'Shoes',
'variant': 'Gray'
}
]

//Step - 2: Pass it in ecommerce object //
var ecommerceObject = {
'ecommerce' : { 'detail' : 
{ 'products' : productDetailArray,
  'actionField' : {'list' : 'Related Products'}            
}
},
'event' : 'productDetail'                                   //pass custom event
}

//Step - 3: Push to DataLayer//
dataLayer.push(ecommerceObject)

</script>

Modify the previous trigger & add the custom event ‘productDetail’. Now the trigger should look like

‘productImpressions|productClick|productDetail’

• You can use AddToCart callback(ajax success callbacks) if any, to push the product details in dataLayer.
• Populate the ecommerce ‘add’ object
• Pass the same in dataLayer

<script>
// Pass Product added to cart in array of object //
var productAddToCartArray = [{
'name': 'Product #1',             // Name or ID is required.
'id': '1',
'price': '15.25',
'brand': 'Nike',
'category': 'Shoes',
'variant': 'Gray',
'quantity': 1
}]

//Pass the Product Add To Cart data in ecommerce object //
var ecommerceObject = {
 'ecommerce' : { 'add' : 
{ 'products' : productAddToCartArray }, 
'currencyCode' : 'EUR'                                           (Optional) 
},
'event' : 'productAddToCart'                                     //pass custom event
}

//Push the ecommerceObject in dataLayer
dataLayer.push(ecommerceObject)
</script>

• Step – 1: User Info
• Step – 2: Billing Info
• Step – 3: Shipping
• Step – 4: Payment Info
• Step – 5: Confirm

• You can use successful callbacks for each step to trigger the code.
• Pass the products added to cart in the array of objects, named productCheckoutArray.
• Push the productCheckoutArray data to the ecommerce ‘checkout’ object. 
• Push the ecommerceObject data to dataLayer.

<script>
// Pass Products added to cart in array of object //
var productCheckoutArray = [{
'name': 'Product #1',             // Name or ID is required.
'id': '1',
'price': '15.25',
'brand': 'Nike',
'category': 'Shoes',
'variant': 'Gray',
'quantity': 1
},
{
'name': 'Product #2',             // Name or ID is required.
'id': '2',
'price': '22.10',
'brand': 'Puma',
'category': 'Shoes',
'variant': 'White',
'quantity': 2
}]

//Push the product array data to the ecommerce 'checkout' object. //
var ecommerceObject = {
 'ecommerce' : { 'checkout' : 
{
'products' : productCheckoutArray,
'actionField' : {'step' : 1 }                // Enter Step Number.
}
}
'event' : 'productAddToCart'                                     //pass custom event
}

//Push the ecommerceObject data to dataLayer.//
dataLayer.push(ecommerceObject)
</script>

In the above code the important step is the Step Number. It will be reflected in the E-commerce  — > Checkout Behaviour Report in Google Analytics.

• Pass the same product array of objects obtained in checkout steps in productTransactionArray.
• Pass transaction info in ‘action field’ object as
  • Transaction/Order ID
  • Revenue. (Should be addition of all products + tax + shipping )
  • tax (optional)
  • shipping (optional)
  • coupon (optional)
  • affiliation (optional)
• Pass all the above info in ecommerce ‘purchase’ object
• Pass the ecommerceObject in dataLayer.

<script>
// Pass Purchased Products in array of object //
var productPurchasedArray = [{
'name': 'Product #1',             // Name or ID is required.
'id': '1',
'price': '40',
'brand': 'Nike',
'category': 'Shoes',
'variant': 'Gray',
'quantity': 1,
'coupon': 'SUMMER'
},
{
'name': 'Product #2',             // Name or ID is required.
'id': '2',
'price': '20',
'brand': 'Puma',
'category': 'Shoes',
'variant': 'White',
'quantity': 2
}]

var actionField = {
'id': 'T12345',                                            // Transaction ID. Required for purchases and refunds.
'affiliation': 'Online Store',
'revenue': '97',                                      // Total transaction value (incl. tax and shipping)
'tax':'5.5',
'shipping': '11.5',
'coupon': 'SUMMER_SALE' 
}


//Push the product array data to the ecommerce 'purchase' object. //
var ecommerceObject = {
'ecommerce' : {'purchase' : { 
'products' : productPurchasedArray,
'actionField : actionField                //.
}},
'event' : 'transactionSuccess'                                     //pass custom event
}

//Push the ecommerceObject data to dataLayer.//
dataLayer.push(ecommerceObject)
</script>

What About PromoViews, PromoClicks & Refunds?

<script>
// Pass Products added to cart in array of object //
var promotionsViewArray = [{
'name': 'Summer Offer',             // Name or ID is required.
'id': 'SUMMER_SALE',
'creative': 'banner1',
'posiiton': 'slot1'
},
{
'name': 'Free Shipping',             // Name or ID is required.
'id': 'FREE_SHIP',
'creative': 'banner1',
'posiiton': 'slot1'
}]

//Push the product array data to the ecommerce 'checkout' object. //
var ecommerceObject = {
 'ecommerce' : { 'promoView' : 
{
'promotions' : promotionsViewArray
}
}
'event' : 'promoView'                                     //pass custom event
}
//Push the ecommerceObject data to dataLayer.//
dataLayer.push(ecommerceObject)

</script>

For PromoClicks, you can implement a click listener follow the same logic as ‘click’ or ‘addtocart’.

<script>
// Pass Product added to cart in array of object //
var promoClickArray = [{
'name': 'Summer Sale',             // Name or ID is required.
'id': 'SUMMER_SALE',
'creative': 'Banner1',
'position': 'LeftBanner1'
}]

//Pass the Product Add To Cart data in ecommerce object //
var ecommerceObject = {
 'ecommerce' : { 'promoClick' : 
{ 'promotions' : promoClickArray }
},
'event' : 'promoClick'                                     //pass custom event
 }

//Push the ecommerceObject in dataLayer
dataLayer.push(ecommerceObject)
</script>

You can also combine more than one code. Eg:  If the promo is on product detail page along with Impressions., then 3 e-commerce codes will fire simultaneously the promoView, detail & impressions.

<script>
dataLayer.push({
'ecommerce' : { 'promoView' : ........
              { 'detail' : ............
              { 'impressions' : ...........
})

</script>

For refunds simply use this code as per gtm docs.  You can change the Transaction/Order ID of refunded data.

dataLayer.push({
  'ecommerce': {
    'refund': {
      'actionField': {'id': '12344'}         // Transaction/Order ID. Required for purchases and refunds.
    }
  }
});

The Final Trigger Should include all custom events:

productImpression|productClicks|productDetail|productAddToCart|productCheckout|transactionSuccess

Make sure to preview all the events before publishing to live view.

Important Points

• You can implement & test the code one by one, if possible.
• You can start the implementation from the purchase code, then move on to checkout, add to cart & so on….
• The Transaction & Revenue data in GA will match the backend data 95% of the time. The reason behind it would be a topic for the later post.
• Feel Free to comment if you implement it successfully or have issues 🙂.

Other Articles:

Top 10 Ecommerce Tracking Issue Fixes: Is Your Code Not Working? Data Discrepancy? & More…

How To Track Multiple Ecommerce Funnels in Google Analytics (Analytics Hacks)

Bounce Rate Bible: Bounce Rate Benchmarks[2016/2017]

Ritwik B

Ritwik is a Web Analyst & Product Marketer. He loves to write technical & easy to understand blogs for Marketers & Entrepreneurs. Focused on Google Analytics, Facebook Analytics, Tag Management, Marketing & Automation Scripts & more. Google Certified Professional. A Firm Believer in Teaching -> Learning -> Growing. :)