How to Set Up Ecommerce Tracking with Google Tag Manager: Full Guide

Which Ecommerce Reports option is right for you?

If you want to see only sales data and how well each product performs, which traffic sources generate sales, then choose Standard Ecommerce functionality.

If you want to see not only purchases but visitor’s journey as well (data related to Add to cart activity, Checkout steps, etc.), then Enhanced Ecommerce should be your option.

However, it is much more difficult to implement Enhanced Ecommerce functionality, additionally, it requires much more developer’s time to get things going. Therefore, you’d need to weigh your options. With EE, you’ll get much more insights, but it’s much more expensive to properly implement.

This guide will explain only how to implement Standard Ecommerce reports. If you would like me to write a guide about the Enhanced Ecommerce, post a comment below (if there is enough of interest, I’ll do that in the future).

 

Ecommerce Tracking with Google Tag Manager: What’s the plan?

Although Google Tag Manager is usually promoted as the tool which enables marketers/web analysts to control web tracking without developer’s input, this time you’ll most likely need to get his/her help. Compared to Enhanced Ecommerce tracking, Standard Ecommerce requires a fairly small amount of developer’s time to successfully implement sales tracking.

Here’s the plan that you’ll need follow in this guide:

1. First, you’ll need to enable Ecommerce Reports in Google Analytics
2. Then you’ll need to ask a developer to push a transaction data to the Data Layer (or get a plugin for that purpose, if possible)
3. Send the Ecommerce transaction data to Google Analytics (via Google Tag Manager)
4. Test if everything is working properly

Ready to implement Ecommerce tracking with Google Tag Manager? Let’s roll!

 

#1. Enable ECOMMERCE Reports in Google Analytics

Log in to your Google Analytics account and go to the Admin section. You can reach it by clicking the gear icon in the bottom left corner:

…and then choose Ecommerce Settings on the view-level. Then click the toggle button to enable Ecommerce features. Leave Enhanced Ecommerce features disabled (because it’s out of the scope of this guide).

 

That’s it! Easy. The upcoming steps of Ecommerce tracking with Google Tag Manager won’t be that simple

 

#2. Transaction Data in the Data Layer

If you’re not familiar yet, the Data Layer is one of the key components of Google Tag Manager which can contain useful information that is later used in GTM tags, triggers, and variables. If you’re not familiar with it (or want to learn more), read this guide.

In order to make GA Ecommerce tracking with Google Tag Manager work, first, we need to get the transaction data pushed to the Data Layer. Then, we’ll instruct GTM to read that data and transfer it to Google Analytics. And it always works like that:

• A developer (or a plugin) adds the transaction data to the Data Layer (after a purchase is successfully completed)
• GTM is taught to recognize the successful purchase
• GTM (with help of Universal Analytics tag) transfers that data from the Data Layer to Google Analytics

Here’s the code that needs to be added to the Data Layer (I’ll also refer to this code as the GA Ecommerce dataLayer.push code):

<script>
window.dataLayer = window.dataLayer || []
dataLayer.push({
 'transactionId': '1234',
 'transactionAffiliation': 'Acme Clothing',
 'transactionTotal': 38.26, 
 'transactionTax': 1.29,
 'transactionShipping': 5,
 'transactionProducts': [{
   'sku': 'DD44',
   'name': 'T-Shirt',
   'category': 'Apparel',
   'price': 11.99,  
   'quantity': 1 
 },{
   'sku': 'AA1243544',
   'name': 'Socks',
   'category': 'Apparel',
   'price': 9.99,
   'quantity': 2
 }]
});
</script>

Not every parameter is required. In fact, most of them are optional. But the more data you pass, the more you’ll see in Ecommerce reports.

Speaking of the transaction parameters, only transactionId and transactionTotal are required. If with every sale you also pass transactionProducts, then the aforementioned dataLayer.push JavaScript snippet must also include name, sku, price, quantity.

If you want to see the full list of supported parameters, head over to the official Google’s documentation and expand the Standard Ecommerce section.

 

#2.1. Several things to keep in mind

There are several additional things you need to know before you copy that code and send it to the developer:

1. Blindly copying the aforementioned code and pasting it on a “Thank you” page won’t work. The developer must replace the value of each parameter with actually meaningful data. If the order total is $30, then the value of transactionTotal in that code must be 30.00. So in other words, the values of all the parameters must be replaced dynamically by the function(s) written by the developer.
2. The names of those parameters and the entire structure of the code must be identical to the one which is displayed in the aforementioned code and Google’s documentation. You are free to skip optional parameters, but you cannot rename transactionTotal into something else like orderTotal. Custom parameters are not supported in the code, therefore the developer must follow the exact naming convention used in that Ecommerce Transaction JS code.
3. If you are using a popular Ecommerce platform, like WooCommerce, then there is a high chance that a ready-made plugin exists which can send the GA Ecommerce transaction data to the Data Layer (in a proper format) after a successful purchase. In WooCommerce’s case, such a plugin is called GTM4WP. You can enable Standard Ecommerce tracking by going to plugin’s settings > Integration > Woocommerce and clicking Track classic e-commerce.

 

#2.2. Where to place that GA Ecommerce dataLayer.push code?

In order to know where that dataLayer.push code must be added, first you need to think more about what happens after a successful purchase?

• Is the client redirected to a “Thank you” page?
• Or does the page remain as it is and only a “Success” message is displayed on the screen (but the URL of that page stays the same)?

If the client is redirected to a “Thank you” page, then that GA Ecommerce dataLayer.push code must be placed above the GTM container code. It’s very important to place it above. Why? Because then the Ecommerce transaction data will be already available for Google Tag Manager when it starts loading.

The sooner that data is pushed to the Data Layer, the sooner you’ll be able to send this data to Google Analytics.

Have you noticed that every time a page loads and GTM Preview and Debug mode is enabled, there are 3 events displayed there: Pageview, DOM Ready, and Window Loaded? If a developer places the GA Ecommerce dataLayer.push code above the GTM container, then you will be able to send the Transaction data to GA with the Pageview event. And that Pageview event is the earliest moment when you can fire tags.

Join Google Tag Manager Community.
Useful guides, awesome content, friendly help.

JOIN GTM COMMUNITY

If for some reason, a developer placed the Ecommerce dataLayer.push code below the GTM container, then the earliest moment when you can send that Ecommerce data to the GA will be DOM Ready trigger.

If the page does not reload when the purchase is successfully made, then your developer can place the code whenever he/she wants but one additional modification is needed then. A developer must add an additional parameter called “event” (its value can be whatever you want, e.g. “purchase”, “sale”, “ecommerce” or anything else that makes sense to you).

Here’s what a final dataLayer.push code looks like after that additional line of code is added (see the line no.4):

<script>
window.dataLayer = window.dataLayer || []
dataLayer.push({
 'event': 'purchase',
 'transactionId': '1234',
 'transactionAffiliation': 'Acme Clothing',
 'transactionTotal': 38.26,
 'transactionTax': 1.29,
 'transactionShipping': 5,
 'transactionProducts': [{
   'sku': 'DD44',
   'name': 'T-Shirt',
   'category': 'Apparel',
   'price': 11.99,
   'quantity': 1
 },{
   'sku': 'AA1243544',
   'name': 'Socks',
   'category': 'Apparel',
   'price': 9.99,
   'quantity': 2
 }]
});
</script>

If that’s the case of your current project, you’ll need to create a custom trigger in GTM to catch this interaction. I’ll explain that a bit later.

Let’s take a look in action, what happens when a developer implements the Google Analytics Ecommerce dataLayer.push code on a website (or installs a plugin for that purpose).

 

#2.3. Testing the GA Ecommerce dataLayer.push code with Google Tag Manager

Once the developer informs you that the transaction dataLayer.push code is now implemented, it’s time to test it. What you should do is:

• Enable Preview and Debug mode
• Go to the website/online store where you want to track transactions and complete a purchase
• Complete the purchase

Scenario #1. The Ecommerce dataLayer.push code is added above the GTM container (on a “Thank you” page). Since this dataLayer.push does not have an “event” parameter, it will be displayed as a is “Message” (see the screenshot below). Such push (“Message”) cannot be used as a trigger in GTM (firing condition which then activates tags) so the earliest moment we can send the transaction data to Google Analytics is on Page view event.

But since our Google Analytics Ecommerce dataLayer.push is already initiated before the entire GTM did, its data is already in the Data Layer, therefore, we can continue using that transaction data in all the subsequent events, including Page view.

 

Scenario #2. The Ecommerce dataLayer.push code is added below the GTM container (on a “Thank you” page). Since this dataLayer.push also does not have an “event” parameter, it is also displayed as a “Message” (see the screenshot below). However, this time the dataLayer.push was completed a bit later (because it is placed below the GTM container), therefore, with Page View event we cannot reach the data stored in the “Message”.

Only all the subsequent events (DOM Ready, Window Loaded) can access the transaction data. That’s why in this case you and I will be using DOM Ready event as a trigger.

 

Scenario #3. The Ecommerce dataLayer.push code is activated on a page which is not reloaded (a.k.a. “event” parameter is added to the .push code). In this case, a developer added an additional parameter “event” of which value is “purchase”.

In order to use this moment as a tag firing condition, you and would need to create a Custom Event Trigger.

Now, let’s take a closer look at what data was pushed to the Data Layer. Click the “Message” or “Purchase” in the Preview and Debug mode (it depends on a project/website) and go to the Data Layer tab.

You should see something like this (P.S. my screenshot contains some fake product or transaction data):

So the screenshot above displays what a developer pushed to the Data Layer. Double check if:

• All the needed parameters are included
• Their values match the actual transaction information
• Names of the parameters match those which are displayed in Google’s official documentation (or this blog post that you are currently reading).

If you answered “No” to at least one question, discuss that issue with a developer and try to resolve it as soon as possible. If everything is fine, then proceed to the next step.