Google Analytics Enhanced eCommerce Tracking with Google Tag Manager

🚨 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.

GTM For Beginners

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:

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. 

Screenshot of the shop page of the Demoshop website

To demonstrate what this would look like, I’m going to go through a quick order here.

Screenshot of an Add to cart button being clicked on the  shop page of the Demoshop website

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. 

Screenshot of the tags found in Demoshop’s Google Tag Manager

The Tags fired are created in the form of an event. 

Screenshot of a Google Analytics event tag found in Demoshop’s Google Tag Manager

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.

Screenshot of the Events section under the Real-time Reports section being clicked

Back in Google Tag Manager, you will be able to see the data sent from the Data Layer that we have implemented.

Screenshot of the Data Layer tab’s contents on the Google Tag Manager section

The Data Layer’s information will also include what products were bought, the transaction ID and other types of information.

Screenshot of the information included in the Data Layer section of Google Tag Manager

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. 

Screenshot of the Developer Tools being clicked to map out the data sent from Google Analytics

The extension is called the GTM/GA debugger which you can install onto your browser. 

Screenshot of the GTM/GA debugger Chrome extension button and the GTM/GA Debug button on Google Tag Manager

Reload the page. Then, click on the  Enhanced E-commerce tab. This is where all the information that was sent over with our order.

Screenshot of the Demoshop page being refreshed and the details under Enhanced Ecommerce tab being presented

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.

Screenshot of the Sales Performance details under the E-commerce Conversions section in Google Analytics

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. 

Screenshot of the Facebook Purchase Event and the Google Ads Purchase Event being displayed as the fired tags on Google Tag Manager

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. 

Screenshot of the contents of the Data Layer section of Google Tag Manager

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. 

Screenshot of the list of tags on Google Tag Manager that will be configured during the lesson

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.

Screenshot of the transactions created from gathering data through Google Analytics

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. 

Screenshot of the Google Tag Manager panel showing up on the Demoshop website

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.

Screenshot of the Preview button on Google Tag Manager being clicked

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.

Screenshot of the admin section being clicked and the E-commerce settings being clicked afterwards

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. 

Screenshot depicting E-commerce and E-commerce Reporting being switched on at the admin section of Google Analytics

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.

Screenshot of the Demoshop’s Order received page

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. 

Screenshot of the Data Layer section being clicked on

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. 

Screenshot of the data pushed to the Data Layer in Google Tag Manager

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.  

Screenshot of the Page View section under Google Tag Manager being clicked

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.

Screenshot of two Add to cart buttons and one View cart button being clicked on Demoshop

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. 

Screenshot depicting the steps needed to view the data transferred from Google Tag Manager to Google Analytics

We will be able to see more information on the orders when we click into an individual Transaction ID.

Screenshot of a transaction ID being clicked to view transaction details

We will also be able to see what Product was actually bought.

Screenshot showing products bought from transaction 2432

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? 

Screenshot showing the Data Layer tab in Google Tag Manager

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. 

Screenshot showing the Enhanced Ecommerce (UA) Developer Guide section of Google Tag Manager

What we are interested in particularly is the purchase tracking or Measuring Purchases right here. 

Screenshot showing the Measuring Purchases section of Google Tag Manager being clicked

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.

Screenshot showing codes in the Data Layer that may need to be installed

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.

Screenshot showing the Order details in Demoshop

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.

Screenshot showing the Order details and the Billing and Shipping addresses  in Demoshop

And that’s why Google Tag Manager actually requires a standard to pull that information in, which is this Data Layer.

Screenshot showing a Data Layer summary in Google Tag Manager

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.

Screenshot showing all the transaction information under Data Layer on Google Tag Manager

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. 

Screenshot of the script that needs to be installed in your website

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. 

Screenshot of the title, objective, and official vendor documentation on the Enhanced Ecommerce Transaction data implementation on Success page document

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.

Screenshot of the official specifications and implementations needed from the Google Tag Manager team

You should also add your email address on the document as well as the Page of Implementation.

Screenshot of the email and URL sections of the Enhanced Ecommerce Transaction data implementation on Success page document being highlighted

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.

Screenshot of Demoshop’s link being copied

Then, paste the URL under Page of Implementation.

Screenshot of Demoshop link being pasted in the Page of implementation section of the Enhanced Ecommerce Transaction data implementation on Success page document

But since our page always changes when it comes to the key, I’m going to get rid of this part of the URL. 

Screenshot of URL key being deleted

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. 

Screenshot of URL umber being changed from 464 to 111

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.

Screenshot of the location being indicated on the Enhanced Ecommerce Transaction data implementation on Success page document

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. 

Screenshot of a screenshot being taken at the Demoshop’s Order received page

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. 

Screenshot of the Demoshop Order received page screenshot being pasted into the Enhanced Ecommerce Transaction data implementation on Success page document

Another thing you need to consider is the Code Implementation example. For the code example, you will need to provide a clear instruction. 

Screenshot of the code example included in the Enhanced Ecommerce Transaction data implementation on Success page document

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.

Screenshot of the code example pasted into the screenshot section of the Enhanced Ecommerce Transaction data implementation on Success page document

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. 

Screenshot of the data layer and event key being highlighted in the code pasted on the Enhanced Ecommerce Transaction data implementation on Success page document

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.

Screenshot depicting where to add the data layer and the values in red that need to be changed in the Enhanced Ecommerce Transaction data implementation on Success page document

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. 

Screenshot of a notice requiring variables to be replaced dynamically according to the order data in the Enhanced Ecommerce Transaction data implementation on Success page document

First of all, notice the ID value right here. 

Screenshot of the ID tag being highlighted in the Enhanced Ecommerce Transaction data implementation on Success page document

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.

Screenshot of the ORDER NUMBER being highlighted in Demoshop’s Order received page

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.

Screenshot of the Order number being pasted into the Enhanced Ecommerce Transaction data implementation on Success page document

We also want to change the values under ‘revenue’.

Screenshot of the revenue value being highlighted on the Code Implementation example

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.

Screenshot of the revenue value in the Demoshop being copied

Paste the revenue value into the document.

Screenshot of the revenue value being pasted into the Code Implementation example

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. 

Screenshot of the product ID in the Code Implementation example being highlighted

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.

Screenshot of the product name in Demoshop’s HTML being inspected by right clicking and clicking on Inspect

After inspecting the elements, we find out that the product number is 37. 

Screenshot of product 37 being clicked on inside the Elements tab of the HTML preview of the Demoshop product page

That product number will be considered as the ID of the product. Paste the product ID variable into its designated area in the document.

Screenshot of the product ID being pasted into the Enhanced Ecommerce Transaction data implementation on Success page 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.

Screenshot of the unnecessary brand variable being highlighted in the Enhanced Ecommerce Transaction data implementation on Success page document

Upon checking, it shows that we have our Data Layer Code Implementation example filled out correctly.

Screenshot of the code implementation sample in the Enhanced Ecommerce Transaction data implementation on Success page document

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.

Screenshot of the details of the order number and products from store being highlighted in the Enhanced Ecommerce Transaction data implementation on Success page document

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.

Screenshot of the code implementation sample in the Enhanced Ecommerce Transaction data implementation on Success page document being highlighted and copied

I usually use GitHub for this type of task because of its functionality. 

Screenshot of GitHub being Googled and opened

After creating an empty window, I’ll add the input title and paste the Code Implementation example here.

Screenshot of the code title being input into GitHub and the code implementation sample being pasted into GitHub

Then, click Create secret gist.

Screenshot of the create secret gist button being clicked in GitHub

After creating a secret gist, I’ll copy the GitHub link at the top.

Screenshot of the GitHub link being copied

Then, paste the GitHub link to the Enhanced Ecommerce Transaction data implementation on Success page document.

Screenshot of the GitHub link being pasted into the plain text section of the Enhanced Ecommerce Transaction data implementation on Success page document

Now that we have this ready, we can send it off to our developer.

Screenshot of the EE Transaction DataLayer Implementation Specification Google document being sent via email to the developer as an attachment

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.

Screenshot of email address and message details being input before the document is sent as an email attachment

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.

Screenshot of the Demoshop’s WordPress backen’s URL being types into a Google Chrome address bar

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.

Screenshot of the Demoshop’s WordPress backend dashboard

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.

Screenshot of the Demoshop’s order received page link being highlighted

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.

Screenshot of the Plugin Editor being clicked on in the Demoshop’s WordPress dashboard

I’m going to go into our Plugin Editor here.

Screenshot of the Plugin Editor screen on Demoshop’s WordPress backend

Turn off the preview mode on Google Tag Manager by clicking on the Leave Preview Mode button.

Screenshot of the Leave Preview Mode button being clicked on the Google Tag Manager dashboard

Click on OK to turn off the Preview Mode .

Screenshot of the OK button on the Leave Preview Mode window being clicked on

Go back to Demoshop’s WordPress backendand click on the Select plugin to edit dropdown menu. Then, choose our WooCommerce plugin. 

Screenshot of the WooCommerce option being clicked on the Plugin Editor dashboard

Click on Select.

Screenshot of the Select button being clicked on the Plugin Editor dashboard after choosing the WooCommerce option

Under the Plugin Files section, click on templates from the dropdown menu. 

Screenshot of the template button being clicked on in the Plugin Editor dashboard

Under templates, click on checkout.

Screenshot of the checkout section being clicked on in the Plugin Editor dashboard

Then, click on thankyou.php.

Screenshot of the thankyou.php being clicked on in the Plugin Editor dashboard

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. 

Screenshot of a blank space in the thankyou.php file in the Plugins Editor

Copy the code in the Code Implementation example.

Screenshot of the Code Implementation example being copied from the Enhanced Ecommerce Transaction data implementation on Success page document

Paste the code into the WooCommerce plugin window.

Screenshot of the Code Implementation example being pasted into the Plugin Editor window

Click on Update File.

Screenshot of the Update File button being clicked on below the Plugin Editor

Go to the Checkout page and reload this. Then, click on the Preview button and see what happens. 

Screenshot of the Preview button on the Google Tag Manager dashboard being clicked

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.

Screenshot of the Demoshop being refreshed and the transaction button and Data Layer button on the Google Tag Manager window being clicked

As I’m checking, the Order Number, 464, matches the code on Google Tag Manager’s Data Layer code quite nicely.

Screenshot of the ORDER NUMBER on the Demoshop website matching the id number on Google Tag Manager

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. 

Screenshot of the Add to cart and View cart buttons being clicked on

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.

Screenshot of the transaction and Data Layer buttons being clicked on Google Tag Manager to check for variables

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.

Screenshot of the mismatched order number and id number on the Orders received page and on Google Tag Manager

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.

Screenshot of the order details from the Orders received page and Google Tag Manager

This is a static Data Layer that will always push the same information into the Data Layer. 

Screenshot of a static data layer in Google Tag Manager

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.

Screenshot of the hardcoded variables in the Enhanced Ecommerce Transaction data implementation on Success page document

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.

Screenshot of the product ID in the backend being mentioned as something the user and the developer will need to be well-versed with

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.

Screenshot of the order number being echoed out using the order variable and the Update File button being clicked on

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. 

Screenshot of the Order received page of the Demoshop website being reloaded the transaction and Data Layer buttons being clicked on, and the order numbers being compared

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.

Screenshot of the old code being highlighted in the Plugin Editor

I will paste it here. As you can see, there is a bit more code here because it needs to be parsed correctly. 

Screenshot of the new code being pasted into the Plugin Editor

In the code, the number of products that the customer has bought needs to change as well.

Screenshot of the newly pasted products code being mentioned

You will obviously need to increase the different products in the code because the quantity in this code needs to change.

Screenshot of the products code being highlighted on the Enhanced Ecommerce Transaction data implementation on Success page document

We need to have some coding for each loop that goes through the different products. 

Screenshot of the loop code being highlighted in the Plugin Editor

This is an example of how the code might look like. To save this, click on Update File.

Screenshot of the Update File button on the Plugin Editor being clicked on

Then, we can go back to the Order received page and refresh the page.

Screenshot of the Order received page of the Demoshop website being refreshed

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. 

Screenshot of the transaction and Data Layer buttons being clicked on and the order ID and Revenue value being highlighted

Upon reviewing the data on the Order received page, we can see the value of the Subtotal.

Screenshot of the revenue subtotal being highlighted

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.

Screenshot of the revenue, taxes, and shipping costs being highlighted

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. 

Screenshot of the product id being highlighted during a spot check

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.

Screenshot of the Patient Ninja product id and the Patient Ninja product on the Orders received page about to be opened in a new tab

Let’s spotcheck this quickly and see if this is true. Right click on the product page and choose Inspect.

Screenshot of the the Patient Ninja webpage HTML about to be inspected

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. 

Screenshot of the product ID being checked on the HTML code of the Patient Ninja product page

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. 

Screenshot of the information on the Data Layer and the events in Google Tag Manager

On the Page View section, we can observe that the data is not at the Data Layer. 

Screenshot of the page view data not being in the Data Layer

On the transaction event, where we have added coded into its Data Layer, we have that information available. 

Screenshot of the transaction event details being highlighted on the data layer

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. 

Screenshot of the transaction event details such as the ID and product names on the data layer

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.