🚨 Note: All standard Universal Analytics properties will stop processing new hits on July 1, 2023. 360 Universal Analytics properties will stop processing new hits on October 1, 2023. That’s why it is recommended to do the GA4 migration. We also have a GA4 version of this article.
eCommerce tracking is very complex as it varies depending on your site platform.
A Shopify setup can be completely different from a Magento setup.
Sign up to the FREE GTM for Beginners Course...
In this tutorial, I want to attempt to give you a somewhat comprehensive solution to get started with installing eCommerce tracking and show you how to install enhanced eCommerce transaction tracking on your purchase pages.
Some of what you have to look forward to:
- Installing Google Analytics eCommerce Tracking with Google Tag Manager
- Using the Data Layer for eCommerce Tracking
- Sending Data from GTM to Google Analytics
- Commerce Conversion Tracking Based on the Data Layer
Now that you know the tasks we’re going to cover for each video. Let’s start with the first task for setting up Google Analytics Ecommerce Tracking with Google Tag Manager.
Installing Google Analytics eCommerce Tracking with Google Tag Manager
Welcome back to our Demoshop. In this Demoshop, we want to install Google Analytics eCommerce tracking.
To demonstrate what this would look like, I’m going to go through a quick order here.
And once I get to the thank you page, we can see that we have several tags firing.
The one we care about is our Google Analytics – Event – Enhanced eCommerce, which sends our data over to Google Analytics.
The Tags fired are created in the form of an event.
So, in Google Analytics, under Real-time reporting, we should be able to see our Events information that just came in. Once done, we will be able to see our transaction information.
Back in Google Tag Manager, you will be able to see the data sent from the Data Layer that we have implemented.
The Data Layer’s information will also include what products were bought, the transaction ID and other types of information.
We also have an extension available for our Chrome browser. So, if you click on More Tools and then go into the Developer Tools, you should be able to see what data got sent over.
The extension is called the GTM/GA debugger which you can install onto your browser.
Reload the page. Then, click on the Enhanced E-commerce tab. This is where all the information that was sent over with our order.
Later on, we should be able to see this inside of Google Analytics under our Conversions section, here under E-commerce. Under E-commerce, click on Sales Performance. This section will be filled with the information that we have retrieved from our Data Layer.
I also fired a Facebook Purchase Event and a Conversion Purchase Event to Google Ads. But those are something that we’re going to set up in the end.
The GTM Data Layer
So, how will this implementation go down? At the heart of all of this is a special kind of Data Layer.
This is an enhanced eCommerce tracking Data Layer that we need to implement onto our page.
This type of Data Layer is not something that we presumably will be able to do ourselves unless we use a plugin. It also isn’t pre-installed. To remedy this, I’m going to show you a way to write specifications for your developer in order to get this implemented correctly.
Once these tags are present in Google Analytics, they will be able to configure our tags. You can install this easily to your Google Tag Manager container.
We’re going to go through this step-by-step, and you can download the Google Tag Container by following these steps.
We should be able to see our data in Google Analytics, Facebook and Google Ads and have our tracking correctly set up.
In Google Analytics, you will also be able to see the full details of each of the transactions from our orders received page.
You can access this by going into the Acquisition section. Then, click on Conversions and the E-commmerce button under it. Under E-commerce, click on Sales Performance.
On the performance page, you will be able to see the Revenue, Tax, Delivery, Refund Amount, and Quantity data for each of the Transaction IDs being tracked.
Install Google Tag Manager
Now what do you need in order for this implementation to work? First of all, you would need to have Google Tag Manager installed.
If you’re unsure if Google Tag Manager has been installed correctly, you should go into your Google Tag Manager account and click on the Preview button to check. If your preview mode pops up, then this is an indication that Google Tag Manager was correctly installed.
On the Google Analytics side, we also need to prepare something in the Admin section. You will need to go under the View section and click on the E-commerce Settings.
Turn on Enable E-commerce and Enable Enhanced E-commerce Reporting. Click on the Save button. After this, we have Google Analytics prepared to receive that data.
Test Your Tracking
Last but not least, you probably want to figure out a way on how you can do test conversions easily in the shop that you’re working on. Whether it’s offline on your local machine or if this is a live site, you might want to get a coupon code set up or test a credit card.
But for the purpose of this tutorial, we will be working on this Order received page, which you will have to track to go through the whole checkout flow.
So, this will not be a one-time thing. You have to get something set up so that you can do this more often in order to see if your data is coming through correctly.
Now with this in place, let’s get started setting up our Data Layer in the next lesson.
Working with the Data Layer
First of all, what is the Data Layer? You might have seen that name down here in the preview mode before.
The Data Layer is a central repository for structured data. This lives in the background of Google Tag Manager. And it provides Google Tag Manager with a system to ingest data that comes from the outside.
How Does the Data Layer Work?
You can actually push whatever data you want into the Data Layer, and then make it available to Google Tag Manager. By default, Google Tag Manager pushes certain data automatically.
How to See the Data Layer
Google Tag Manager pushes data each time an event is recorded in the navigation bar on the left.
The first event, Page View, fires when Google Tag Manager is initialized. There are also events for DOM Ready and Window Loaded, each with their own Data Layers.
With this data in the Data Layer, we can now start working. The default Data Layer doesn’t have much information, but the real power comes in once you transfer data that is specific to your application.
What information do we want to transfer here from this demo shop? We have already seen it. It’s on the Thank You page. Let’s do another test order using this example.
On the Order received page, we want to now transfer data over to our eCommerce tracking. If we look at these reports on Google Analytics, we can clearly see the data under Transaction ID, Revenue, Tax, Delivery costs, Shipping costs, Refund Amount, and the Quantity.
We will be able to see more information on the orders when we click into an individual Transaction ID.
We will also be able to see what Product was actually bought.
How to Make a Custom Data Layer
So how can we make this available in our Data Layer tab? For this, we need to install a custom Data Layer which pushes specific information to Google Tag Manager. What would this Data Layer look like?
The Data Layer needs to have a specialized format which is explained in the documentation of the Enhanced Ecommerce (UA) tracking section of Google’s official Developer Guide. Enhanced eCommerce tracking is fairly complex as there are many Data Layers involved.
What we are interested in particularly is the purchase tracking or Measuring Purchases right here.
The Measuring Purchases section gives us an example of the Data Layer that we would need to install. It doesn’t give us the exact code as this is always different from site to site.
Where to Implement the Data Layer
Now, where would we implement this Data Layer code? The code needs to be implemented onto your shop system since we want to transfer dynamic data over to Google Tag Manager. This means that the Data Layer needs to change based on the Order Number and the Total.
The Data Layer must also change based on the products that have been bought. While you might be thinking of pulling out the data from the site directly, it may not be possible as not every page displays the information the same way.
And that’s why Google Tag Manager actually requires a standard to pull that information in, which is this Data Layer.
How to Implement the Data Layer
So how can you implement this Data Layer? There are three ways that you can try.
Option 1: Built-In Data Layer
In this example, Google Tag Manager has a working Data Layer already installed. In the Data Layer section of this example, you can see all the transaction information that we saw earlier.
Having Google Tag Manager installed on your eCommerce store is definitely ideal, but not all eCommerce systems are so forward thinking that they have a default Data Layer installed.
Option 2: Data Layer Plugin
Another option would be to use a plugin. A lot of eCommerce shop systems have plugins that you can buy or download for free and install to your installation. They can also allow you to add the functionality of displaying the data layer onto the Order received page.
If you want to go down that route, and it’s definitely an easier route than our next part. You might want to do a Google search for any plugin experiences and reviews to find the best plugin is for your shop system.
Option 3 : Custom Data Layer
But if you have a complete custom shop, or there is no plugin out there that works correctly, then you might need to install Google Tag Manager manually. This means you need to actually be going into the code of your website in order to install this little bit of script. If you want to do it yourself, you’ll need access to the backend code.
You’ll need to have access to the server in order to alter the server code and implement the PHP code. If you work within a bigger company, chances are that there’s somebody dedicated that takes care of the development of the website. So you will need to get in contact with them in order to install this code.
This is probably the most common option when implementing eCommerce tracking. You might not be very familiar with coding, and therefore, I want to give you a little bit of help on how you can communicate effectively with your developer. This starts with sending over clear instructions of what you want to have done.
Communicating Ecommerce Tracking Implementation with Your Developer
To help communicate with your developer better, I’ve come up with a document here that you can copy and send over so that he/she knows what to do. Google Tag Manager also has an Enhanced Ecommerce (UA) Developer Guide that you might want to look at.
For the document, we need to add a title, the objective of our implementation, what we want to have done, and an official vendor documentation.
This document is designed to help developers if they’re unclear about anything. This way, they can always see the official specifications and know what needs to be implemented from the Google Tag Manager team.
You should also add your email address on the document as well as the Page of Implementation.
To help the developer find the Page of Implementation, add the URL of the page where you want the changes implemented. So, in our case, it would be this one.
Then, paste the URL under Page of Implementation.
But since our page always changes when it comes to the key, I’m going to get rid of this part of the URL.
This number on the URL would probably always change. So, I’m just going to put 111 in here. To make it clear, we want to have it on this Order received page.
Where do we want to have it within the HTML? We want it below the Google Tag Manager snippet code right here, so include it in the Location section of the guide.
Then, you might want to add a screenshot. This way, the developer has a test on hand and knows what you’re looking at once you want to have this deployed.
Paste this into the document. With this screenshot, the developer will know what you were looking at and what the Order received page looks like.
Another thing you need to consider is the Code Implementation example. For the code example, you will need to provide a clear instruction.
It is oftentimes not enough to just send over this document and say, “Please implement this,” because the developer then would need to go through and figure out which parts are necessary and which parts are just clutter. This can eat up a lot of their time.
Copy the Code Implementation example. Follow the best practices of checking if the data layers are already there by adding in a few slight variations. Then, include an event key that is not in the documentation. It’s necessary and best practice to include them.
Next, go ahead and fill out the Data Layer. Don’t be afraid if you are not familiar with coding right here, you just need to change the red values.
Notice the variables need to be replaced dynamically according to the order data, which means you need to come up with an example here that the developer would recognize.
First of all, notice the ID value right here.
Go back to our Order received page. And we can see here that this is the correct Order Number that I want to see inside of Google Analytics later. We’ll refer to it as the ID value.
I’ll add the Order Number as the ‘id’ value. I’ll do this by pressing on Ctrl+Shift+V in order to keep the formatting and style.
We also want to change the values under ‘revenue’.
Let’s see where the revenue is right here. I don’t want to have the dollar sign in there, so I’ll copy only the numbers.
Paste the revenue value into the document.
And here, you can see that we need to have the ID of the product itself. How would we find that out? It always depends on your shop system. To find out, you might want to look into the back end.
We can just go back to this product here to start looking for the HTML.Right-click, then click on Inspect to get a detailed overview of the elements of the web page.
After inspecting the elements, we find out that the product number is 37.
That product number will be considered as the ID of the product. Paste the product ID variable into its designated area in the document.
You don’t have to include all the different variables if they’re not necessary. In this example, it’s just the name or ID that are required. So, you can get rid of the brand variable, but remember to get rid of the whole line here with the comma attached.
Remember to change the variables for the price, product, and category as well.
Upon checking, it shows that we have our Data Layer Code Implementation example filled out correctly.
Hopefully, our developer will know what to fill in here because he now has information about the product. He knows what the Order number is. For this example, it’s 464. He also knows that these are actual productsfrom our store as the variables have been filled out correctly.
I would recommend for you to also make a copy of this in plain text, which is always quite tricky coding-wise. This is because we have different quotation marks which could make things complicated. If you later put this into a PDF, you don’t want to lose this information. To make sure I don’t lose this data, I’m going to copy this.
I usually use GitHub for this type of task because of its functionality.
After creating an empty window, I’ll add the input title and paste the Code Implementation example here.
Then, click Create secret gist.
After creating a secret gist, I’ll copy the GitHub link at the top.
Then, paste the GitHub link to the Enhanced Ecommerce Transaction data implementation on Success page document.
Now that we have this ready, we can send it off to our developer.
Hopefully, after a short while, the developer can give us feedback with details as to when it can be done, when it will be done, and if testing it now can be possible.
How Do Developers Implement DataLayers?
In the meantime, I want to play the developer here just to show you what a developer would need to do in order to implement this. As you know, we are here on a WordPress blog and the plugin that governs our ecommerce system is WooCommerce. In order to implement this, I would need to have access to the WordPress backend.
I’m going to go to my WordPress admin section here. From here, I can install the required codes.
A developer would probably do this a bit differently than I would do right now, and I wouldn’t recommend you to actually copy these steps. I just want to demonstrate how you can implement the Data Layer manually and what would be involved in order to install a Data Layer.
So this next part will not be really applicable to you if you’re using a different shop system. But nonetheless, it will give you an idea of how a developer would go about this task.
Install Data Layers on Certain Pages
First of all, the developer will see that he needs to install this on a certain page. As per the Page of implementation section of our document, this page is the checkout or the Order received page. This page is actually the page template and is something that is governed by our plugin, WooCommerce.
We would need to alter some code in the WooCommerce plugin. Again, this is not something that is recommended to do with a live plugin, so don’t try this at home.
In your dashboard, click on the Plugins section, then click on Plugin Editor.
I’m going to go into our Plugin Editor here.
Turn off the preview mode on Google Tag Manager by clicking on the Leave Preview Mode button.
Click on OK to turn off the Preview Mode .
Go back to Demoshop’s WordPress backendand click on the Select plugin to edit dropdown menu. Then, choose our WooCommerce plugin.
Click on Select.
Under the Plugin Files section, click on templates from the dropdown menu.
Under templates, click on checkout.
Then, click on thankyou.php.
This thankyou.php file will be executed once you get to the Order received page. Here at the bottom of the window is where we want to paste our code.
Copy the code in the Code Implementation example.
Paste the code into the WooCommerce plugin window.
Click on Update File.
Go to the Checkout page and reload this. Then, click on the Preview button and see what happens.
I’m going to activate this again. Hit the Refresh icon. Then, click on the transaction button and open the Data Layer on that page.
As you can observe, this matches our specifications. However, be on the lookout for anything that the developer may have missed. The developer might have simply pasted the code like how I did it. Check to see if all the values are dynamic.
As I’m checking, the Order Number, 464, matches the code on Google Tag Manager’s Data Layer code quite nicely.
But what if I go through another conversion?
For my next example, I’ll click Add to cart on two different products in the demo shop and then click on the View cart buttons.
Spot-Check Variables and Correct Them
After clicking on the View cart button, you will reach the Order received page. Go to the transaction section again and then click on the Data Layer.
Compare the variables in your Data Layer with those in the Order received page. In this example, you can see that the Order Number variable and the variable in the product id section of the Data Layer code don’t match.
The Order Number is showing the variable 465, while the product id variable in the Data Layer code is showing 464.
A closer look also shows that the products that I’ve ordered and those that appear in the Data Layer code don’t match as well starting with the product name to the product id.
This is a static Data Layer that will always push the same information into the Data Layer.
Because of this, we will need to go back to inform the developer that the variables are not dynamic and were just hard coded in. To fix this, we must tell the developer to add the right variable to make it dynamic.
This is where real backend coding comes in. To do this, you will need to know your shop system well. Your developer must also know the shop system well in order to change the product ID dynamically based on the customer’s order.
So for example, in WooCommerce, you can get the order details with a little bit of PHP right here. I echo out the order number from our order variable and implement this into this field to automatically fill it out.
Let’s see if this actually works by refreshing the page.
Now, we can see that our Order Number matches the product ID in our Data Layer.
However, the other variables are not correct yet.
Therefore, I will need to fill them out with the correct code. I have something prepared here already. I’m going to copy the code I’ve prepared and highlight the area where it needs to go.
I will paste it here. As you can see, there is a bit more code here because it needs to be parsed correctly.
In the code, the number of products that the customer has bought needs to change as well.
You will obviously need to increase the different products in the code because the quantity in this code needs to change.
We need to have some coding for each loop that goes through the different products.
This is an example of how the code might look like. To save this, click on Update File.
Then, we can go back to the Order received page and refresh the page.
Now that we have our transaction Data Layer, let’s see if it’s correctly built. We can see that we have our order ID, we have our revenue, which is hopefully correct.
Upon reviewing the data on the Order received page, we can see the value of the Subtotal.
The code should also include the value of the shipping costs. It only depends if you want to have the revenue, shipping costs, as well as the inclusion of taxes. In our case, the shipping costs are not included.
I’ll leave this up to you to decide how you want to track your numbers within analytics. But this looks good to me. You might want to spot check certain values that might not be the same in your template that you have created.
I’ve checked the other order IDs for the products and they’re correct. We’ll observe one of the products called Patient Ninja. We’ll check for its product ID, which appears to be 50. Open the product page in a new tab.
Let’s spotcheck this quickly and see if this is true. Right click on the product page and choose Inspect.
In the HTML code of the page, it appears that the product ID is indeed 50. So, this should be the right product ID and the implementation seems to work here just fine.
Set Up Tags and Forward Data to Google Analytics
Let’s look at this Data Layer. We have information available here. And on the left side, we can see our events where the data is available.
On the Page View section, we can observe that the data is not at the Data Layer.
On the transaction event, where we have added coded into its Data Layer, we have that information available.
Since the Data Layer code has been added into the transaction event, we are now able to send on the product ID, product names, and so on to our tools like Google Analytics. This part of the process is very important because we can base our trigger on that.
Create Custom Trigger
Let’s head over to Google Tag Manager where we’ll create a custom trigger via the Triggers section. To get started on this task, click on New.