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

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.

 

Enhanced Ecommerce Google Analytics

 

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.

Enhanced_Ecommerce_Reports in Google Analytics

 

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.

 

 

NOTE: You can place this code anywhere on the site.(as we will fire it on custom event)
If Custom Event is not passed, you’ll have to place it before the tag manager code.

 

Now, let’s do Product ‘click’ code

 

Follow this logic:
  • Use a JS listener to listen for product clicks.
  • Pass clicked product in the array of object, named ‘productClickedArray’. (You can match the ‘id’ of clicked product from previous productImpressionArray variable & fetch the same.)
  • Push ecommerce ‘click’ object to ecommerceObject.
  • Push ecommerceObject to dataLayer.

 

 

NOTE: To make sure product click data is passed you can also use the eventCallback function but don’t depend too much on JS.

 

You can now create a new trigger to include regex event named ‘productImpressions|productClick‘. Attach this trigger to previously created analytics event tag.

 

Ecommerce_Tracking_Trigger_-_Custom_Events

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

 

Product Details Pages are the pages where we can view product description, select product quantity, variants & also add them to the cart.

 

You can now see that the code logic & format is quite similar.

 

For Product ‘Detail’ Code
  • Pass Product Data in an array of objects. (named productDetailArray)
  • Pass it in the ecommerce ‘detail’ object.
  • Push ecommerce object to dataLayer.

 

 

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

‘productImpressions|productClick|productDetail’

 

 

For E-commerce ‘add’ object (Add To Cart),
  • 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

 

It is similar to ecommerce ‘click’ object

 


 

Modify the Previous Trigger to include ‘productAddToCart’. 

 

If you have option to remove from cart, you can just replace { ‘ecommerce’ : { ‘add’ : ……… to { ‘ecommerce’ : { ‘remove’ : ………   .

 

Rest everything is same as add to cart code.

 

Step – 5 : Implement  ‘Checkout’ Code on Checkout Pages & ‘Purchase’ Code on Transaction Success Page.

 

The implementation of checkout code depends on how many steps you have in the checkout process.
Even if you have one-page checkout (URL not changing) , you can use ajax callbacks to trigger the ‘checkout’ code.

 

You can implement this code when u the er lands on Checkout Page. (Starting Step – 1)

 

Let’s say, ecommerce site checkout flow is
  • Step – 1: User Info
  • Step – 2: Billing Info
  • Step – 3: Shipping
  • Step – 4: Payment Info
  • Step – 5: Confirm

 

So, implement the below code when user lands on User info

 

To implement ecommerce ‘checkout’ code
  • 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.

 

 

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.

 

Checkout_Behaviour_-_Enhanced_Ecommerce_Reports

 

When the user completes the first step & lands on Step – 2: Billing Info, the only change to make in the above code is to change it to step 2.

 

So ‘actionField : {‘step’ : 1 }….  becomes ‘actionField : {‘step’ : 2 } ……

 

You should implement this on all checkout steps.

 

& the final step is the ecommerce ‘purchase’ code.

 

In the final transaction success code, you can use the same product array used for checkout steps.

 

Follow this
  • 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.

 

 

Finally, you have Successfully implemented Enhanced Ecommerce in Google Analytics. But wait…..

 

What About PromoViews, PromoClicks & Refunds?

Let’s talk about promoViews & promoClicks. It is quite similar to ecommerce ‘impressions’ & ‘clicks’ code.

Now it depends on the pages where you implement these promos.

Let’s say you implement it on Product Detail Page.

You can.

  • Pass all the Promos in an array of objects. (named promotionArray)
  • Pass this promo array to ecommerce ‘promoView’ object.
  • Pass ecommerceObject in dataLayer.

 


 

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

 

 

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.

 

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

 

The Final Trigger Should include all custom events:

productImpression|productClicks|productDetail|productAddToCart|productCheckout|transactionSuccess

 

https://www.digishuffle.com/wp-content/uploads/2017/12/Enhanced_Ecommerce_GTM.png

 

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:

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

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

Automated Cost Data Import – Facebook To Google Analytics

Google Analytics Audit Checklist – Complete Guide

Advanced Guide To Cohort Analysis in Google Analytics

Ritwik is Web Analyst & Growth Hacking Consultant. He loves to write technical & easy to understand blogs for Marketers & Entrepreneurs. Focused on Google Analytics, Tag Management, GScripts & more. Google Certified Professional. A Firm Believer in Teaching -> Learning -> Growing. :)

Privacy Preference Center

Necessary

Advertising

Analytics

Other