2 steps to Google Analytics Enhanced E-Commerce using Google Tag Manager

Google Analytics Shopping Behaviour Funnel by Eivind Savio

To be able to analyze your product performance it is necessary to gather data about the customer onboarding process. To do so I will give you an easy 2 step guide to setup enhanced e-commerce tracking in Google Analytics. The final result will be a Google Analytics E-Commerce section, fed with data of impressions, clicks, add-to-cart and purchases sent by the Google Tag Manager.

Everything works, because I provide you a “magic javascript tracking script”, that reads all necessary information from your DOM and sent them to Google Analytics in the right format. Read on and be surprised, it has never been easier. :-)

What you need

1. Google Tag Manager installed on your site
2. Google Analytics Tag setup in Google Tag Manager
3. Being able to modify your websites DOM

This is not a Getting-Started Guide to Google Analytics or Google Tag-Manager. If you need help with that, please read this article.

What we will do (the 2 steps + testing)

1. Setup Variables, Triggers and Tags in Google Tag Manager
2. Add classes, scripts and attributes to the DOM
3. Check if it is working and debugging tips

Setup Variables, Triggers and Tags in Google Tag Manager

dataLayer Variables

Custom Event Triggers

Tags

Overview of all tags, which have to be setup (detailed instructions below)

Add the Magic Tracking script as ‘Custom HTML’ tag in Google Tag Manager

Add classes, scripts and attributes to the DOM

Add dataLayer and variables to page head

Initialize those 2 arrays right before your Google Tag Manager script.

<script>
    product = []; // Containing all products of the current page
    dataLayer = [];
</script>
<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->

Update DOM of products in lists

1. Add the .productEntity CSS class for all products in lists
2. Add data-product_name,data-product_id,data-product_price,data-product_category,data-productlist_position, data-productlist_name to the DOM element containing the productEntity class.

6 additional product related data-attributes

Update DOM of product detail pages

1. Add .productEntity and .productEntityDetailPageCSS classes on your productDetail page.
2. Add data-product_name,data-product_pid,data-product_id,data-product_category to the DOM element containing the productEntityDetailPage class.

Additional classes and information about the product on a detail page

Update DOM of links/buttons

The links/buttons must be inside of a container with .productEntity class, which we added to your DOM in the previous step!

1. Add .productEntityClick to all links/buttons linking to a product
2. Add .productEntityAddToCart to all links/buttons adding a product to cart

Buttons with additional classes for product click and addToCart tracking

Update DOM of checkout steps

1. Add .checkoutStep CSS classes on each Checkout step container (e.g. Delivery, Payment, …).
2. Add data-stepto the DOM element containing the .checkoutStepclass.

Update DOM of checkout links/buttons

The links/buttons must be inside of a container with .checkoutStep class, which we added to your DOM in the previous step!

1. Add .checkoutStepProceed to all links/buttons linking to the next step in the checkout process

Update DOM of Thank You page

1. Add .purchaseThankYouPage CSS class to your “Thank you” container
2. Add data-purchase_id, data-purchase_affiliation, data-purchase_revenue, data-purchase_tax, data-purchase_shipping and data-purchase_coupon to exact that same container.
3. Render all purchased products in a list within that Thank You page container.

Thank you page container with css class and data-attributes

Products with meta information rendered within the Thank You page container.

Check if it is working and debugging tips

Puh, that was a lot of stuff. If you did not do so already, it is now time to check if it is working. Here is a list of tools to use:

My typical debugging screen looks like this:

Google Tag Manager Debugger, Google Analytics Debugger and DOM inspector in Google Chrome

Some final words

I tried to destile the most important information in the process and reduce the setup process just to simple DOM manipulations and Google Tag-Manager settings. There are several parts in which the process can be improved. If you have any proposals or improvements, please write me a message or tell me what you think.

Future improvements

• Add to cart/Remove from cart quantity is statically set to 1
• Lazy Loading is not supported yet. Only products rendered to the DOM on page load will be captured
• Product impressions will be sent for all products rendered to the DOM, even if they are not viewed yet by the user (e.g. on the bottom of the page, but user does not scroll down). Only sent impressions, when products become visible.
• When having a validation error when proceeding in the checkout process, then “proceedInCheckout” events will be tracked more than once.

References

• https://canonicalized.com/enhanced-ecommerce-tag-manager/
• https://www.savio.no/analytics/easier-enhanced-ecommerce-product-promo-tracking