Enhanced Ecommerce via Tag Manager Implementation Guide

As you might know, Enhanced eCommerce requires a special kind of implementation.

It goes way beyond your basic transaction tracking, and it would take a lot longer to implement, but the depth of the data would be definitely worth it.

Start off right

First and foremost, you have to enable Enhanced Ecommerce reporting for your Google Analytics view.

If you already have set up Analytics tracking on your site and you want to move to Tag Manager, we suggest creating a new GA property for testing purposes.

Having both tracking codes on the site might lead to counting the data twice for the same property.

To avoid this, you want to remove the standard GA tracking precisely at the moment when you add the GTM one.

Also, you want to thoroughly test the Tag Manager implementation before you put it live.

There is a debugging section towards the end of the article, which I am sure that will be useful.

For now, let’s go ahead with the core Tag Manager set up.

After you create an account and a container at tagmanager.google.com, it’s time to add the GTM code to the site.

There are three main elements which you need to add to every web page (in the following order):

the dataLayer variable declaration -> in the <head> section

the javascript part of the code -> in the <head> section as well

the noscript part of the code -> immediately after the opening tag

To start sending data to Google Analytics, we need to set up a basic pageview tag in GTM.

Make sure you don’t forget to enable the Enhanced Ecommerce Features!

Now, off to the exciting part.

To make it easy for the development team, we are going to break it down by page type.

The order of the implementation can be anything you want it to be. This way feels more comfortable to us, but there are other recommendations of how to do it. It’s up to you to choose the most suitable one.

Listing pages

These can include category pages, brand listings, search results, custom taxonomies, and so on. Pretty much, every page that contains a list of products.

The most important details to track here are product impressions and clicks.

The first step is to populate the dataLayer with the Enhanced Ecommerce data.

Tracking product impressions

For these to work, you need to push the details to the dataLayer when the page loads.

There are two common ways of sending product impressions:

populating the dataLayer before the GTM JS code is loaded

attaching an event to the dataLayer object

It should be enough just to have the code on the page for the tracking to work.

If you are working with an infinite scroll type of load, you could add the impression code dynamically as the products are revealed. In this case you should be using an event to send the data.

the dataLayer variable just by typing it in the console; if the result shows something similar to the image below, the dataLayer is populated correctly (this just means that the data is going into Tag Manager, not into Google Analytics)

if the dataLayer is populated before the “Page View” occurs (only for non-event interactions)

using an extension like Google Analytics Debugger to output the data that is being sent to Google Analytics into the browser console; for the impressions to work, it should look something like this:

To see how an event interaction would work, check the product clicks section below.

Advanced tip

Keep in mind that Google Analytics has a limit of 8kb of text that can be sent in a request (~8000 characters).

If you have a lot of products per listing, you might want to split the push into multiple requests.

Savio’s method is a good way of doing that. Here is a slightly modified version of the code that does it:

Tag Manager Configuration to capture the event

First, the trigger: a custom event having the same name as the one from dataLayer; make sure it’s unique throughout the container.

Secondly, the tag: send the event to GA using the trigger we created; check to use Data Layer.

To make sure that GTM is tracking the event you can either do the good ol’ click-and-escape on a product or you can try the GTM sonar Chrome extension to block the default behavior of clicks (we explain how it works in the Debugging section of the article).

The click event should look something like this in the preview window:

To make sure it goes to GA, have a look at the Real Time > Events report to see if “eCommerce – Product List Click” shows up after you click on a product.

[Video Tutorial] capture dataLayer events in Tag Manager

Analytics: The data is in the same report as the impressions: Product List Performance.

See the “Product list clicks” metric. It’s also used to calculate Product List CTR (list clicks/impressions).

There is a way to send the click data to Tag Manager without using an event. You could use the GTM auto-event tracking feature (“click” in this case).

You will need to provide the data for the ecommerce object for each product somewhere in the web page code (using one or more “data-*” attributes for example). After that, you need to capture the ecommerce data into a GTM variable.

After you get all the details into a variable, you need the same trigger and tag setup to send the event data to Google Analytics.

In this case, you want to trigger the clicks only for products in listings, and the tag won’t be using the dataLayer to send the data to Google Analytics, but the custom variable you created.

A bit more complicated, but not by far.

Moving on!

Product page

Tracking product detail views

The most important element to track on this page is the product detail view. Similar to the product list impressions push, you can track the detail view just by loading the code for this pageview.

The Tag Manager setup is very similar to the one we used for the product click (see above): a trigger that captures the custom event (named “EEaddToCart” in this case) and a Universal Analytics event tag to send the dataLayer details.

If everything goes well (fingers crossed!) the GA debug console should print something like this:

Analytics reports

The add to cart event is quite the pillar metric for Enhanced Ecommerce, and it’s used across multiple reports from the Conversions > Ecommerce section:

as a funnel step in the Shopping Behaviour report, we talked about in the Product Detail Views section

Tracking quantity change in cart

The quantity increase should be treated as an add to cart and the quantity decrease like a remove from cart.

As simple as that!

Advanced tip

In Google Analytics no default report offers details about removes from cart, but you can create a custom report to see the data:

Checkout page

Remember how in the first section of the article we set up some custom checkout steps when we enabled Enhanced Ecommerce in Google Analytics?

Now, it’s time to map out the steps in the dataLayer.

Keep in mind that the thank you page is NOT a checkout step. We will deal with it in the next section of the article.

Tracking the first step

The most comfortable way to track the checkout is by using an event for all the steps (see the Tracking product clicks section for details on how to set up a trigger and tag in GTM that sends the data to GA).

Notice the actionField object: it will map to the first step you set up as checkout option in GA (“Cart page” in our case). You could also consider the Cart page as a step in the checkout process.

Another element you might find useful is the checkout option. You could track stuff like billing, delivery, payment options or whatever you can think of.

It is a bit tricky because you might not have these details before the user submits the checkout form or before he moves to a next step.

So you can send an event that occurs when the user does the action (moving to a next step or hits the submit order button), or you could use the checkout_option object to update the value for a previous step.

Tracking secondary steps

The most important aspect to remember is that you should use the same event name across the checkout steps (“EEcheckout” in our case).

For the subsequent steps, it’s not mandatory to add the products Array to the dataLayer. It’s enough to send them for the first step.

Mainly, you want to avoid loading the transaction code more than once. You could very easily implement this by inserting an entry in the database once the transaction code is loaded the first time.

In Google Analytics the Enhanced Ecommerce transaction offers pretty much the same information as the basic one, except for a few more details like coupons, hierarchical product categories, product variants.

Other stuff to track

Promo views and clicks

These can occur on any page. So if you want to check the performance of your banners/promotions, you will have to push the data to the dataLayer on whatever page they are displayed.

The good news is that you can group them within the main ecommerce object.

Views

These should be tracked when the page loads, with no further action required in GTM.

In Analytics, you can see the refunded amount for each transaction in the Ecommerce > Sales Performance report:

Also, for each product in Ecommerce > Product Performance:

Debugging

This part is crucial since a lot of things can go wrong if you are not careful. Honing your troubleshooting skills would make your life a lot easier at this point.

Looking at interactions by type

Before getting into the tools that make our life easier, we should take a moment to think about an important distinction between interactions: those that take place when the page loads and those that happen when the user clicks on a particular element.

The main author of the Canonicalized content. I am highly passionate about data analysis, visualization and whatever helps people reach informed answers faster. I love what I do, and I am working to improve speed in every aspect of my life. I find comfort in helping people so if you have a question give me a shout!

Insiders only

This site uses cookies for a better viewing experience. By continuing navigation, you agree to the use of this info. Learn more about cookies and how to decline or change your settingsOkRead our Privacy Policy