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

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)

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

6 additional product related data-attributes

Update DOM of product detail pages

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!

Buttons with additional classes for product click and addToCart tracking

Update DOM of checkout steps

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!

Update DOM of Thank You page

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

References

Sebastian Buckpesch

Written by

I write about AWS and cloud topics. I’m interested in User experience, Web, Internet of things and Automation. Portfolio: https://buckpesch.io/