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.

eCommerce tracking is very complex as it varies depending on your site platform.

A Shopify setup can be completely different from a Magento setup.

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.

This will be a custom trigger for our transaction. For the configuration, we don’t want to fire this on Page View. We want to fire it on the transaction event, which is part of this menu. We should choose Custom Event instead.

Under Event name, we’ll include transaction. We don’t need to fill out any filters here because this transaction event only happens once on the Order received page. 

For the Trigger Type, we can go with Custom Event. 

Then, hit Save.

Creating Event Tags

Now that we have a distinctive point, Google Tag Manager will know where to send off the data. We can now proceed with creating our text. I already have a Google Analytics Pageview tag installed and along with a variable.

I already have a Google Analytics Settings variable as well.

Since I have the Google Analytics Settings variable set up,  Google Analytics now knows where to send the data to. 

I will now show you how to set up a Google Analytics Settings variable. You may be able to see this variable when you click on the Variables section on the left hand side of Google Analytics.

Under the Tracking ID section is my Google Analytics Settings variable.

I just pasted my tracking ID from my account to rename the variable.

The Pageview tag will not send our Enhanced Ecommerce tracking data over. We will need to set up a tag that transports that data over. 

Click on New.

Let’s give this a name. We will rename this as GA – Event – Transaction. 

For the tag configuration, we will choose our Universal Analytics.

For the track type, you might be tempted to choose Transaction. But this actually isn’t quite right, since it’s connected to the classic eCommerce tracking instead of enhanced eCommerce tracking.

When using enhanced eCommerce tracking, there’s no Track Type to select here that sends over transaction data specifically. To do this, you would need to have other Tags such as a Pageview Tag or an Event Tag. 

For this setup, we’ll choose an Event Tag as the Track Type. 

For the category, we’ll go with Enhanced Ecommerce. 

And for the action, simply choose Event here.

This Event variable will pertain to the event key on the code below.

We can leave the Label and Value sections empty. 

But if you want, you could add a variable to the Label section as well by clicking on the button beside it.

Let’s add the Page Path variable to our Label. 

For the Non-Interaction Hit, I would turn to true as it fires after the Page Views.

And we’ll choose our Google Analytics Settings variable. This way, Google Analytics will know where to send that data to. 

The last setting we need to set is to actually pull that data from the Data Layer and transfer it to our event. Tick the box to Enable overriding settings in this tag.

Under more settings we’ll choose our Ecommerce settings right here. And now we want to choose Enable Enhanced Ecommerce Features. Choose True on the dropdown selection. Tick on the box opposite the Use Data Layer option as well because we have the information available here already. 

Last but not least, let’s add our trigger in the Triggering section.

We have already pre-configured our triggers. Let’s choose custom – transaction for our trigger.

Hit Save after choosing the trigger.

Click on Refresh to see the new updates on the Tags you’ve created. Then,  go back to our demo shop’s Order received page and reload that as well.

Testing

Based on the Summary of our Tags, we can see that our GA – Event – Transaction Tag has fired. 

We should also be able to see this Tag in our Google Tag Assistant plugin. Click on the Google Analytics tag.

We can observe that we have one Event here. Click on that Event.

Check the contents of the Event.

Then, head over to Google Analytics and open the Real-time section. After that, click on Events and observe the Event that had just happened.

The Event that has just happened will appear under the events last 30 minutes ago as it is a Non-Interaction Hit event. And here we go. You can also notice that the Enhanced Ecommerce transaction data will appear at the bottom of the Events page. 

The data that gets sent over will later be seen inside of the Conversions section. Ecommerce reports will be found under Sales Performance which is a sub-page for eCommerce. Although it takes a while to reflect sometimes, we should be able to see it later on. 

On the other end, let’s look up with our GTM/GA debug extension enabled. Let’s go over to our Developer Tools by clicking on the customize and control Google Chrome button (3 vertical dots menu at the right hand side of the browser), then the More Tools dropdown menu.

Here we have our GTM/GA debugger. Reload the page before proceeding.  After reloading, we’ll be able to see our Enhanced eCommerce tracking details. 

Once you’ve clicked on the container, you’ll see what data got sent over as well as the different products. Those are something you can check and see if it’s the right data that you have actually bought. These data are simply pulled out of the Data Layer. 

If you don’t see anything in the Enhanced eCommerce tracking tab right here, then this data might not have been correctly sent to Google Analytics. When that happens, your tag might be not configured correctly.

Everything looks good and we can now check if this works already. If you have a smaller account, this happens faster. Check your eCommerce reports by choosing the order date you want to check. After selecting the order date, click on Apply.

You can see below our order with the ID, 465. It has transferred correctly. 

We’ll click into it so we’ll be able to see if the data has been transferred correctly.

We can now see that the data has been correctly transferred and are displayed in Google Analytics. We will now be able to utilize that data.

Conversion Tracking Based on Data Layer Information

But what if you wanted to set up another conversion tracking based on the information that you have available in the Data Layer? We can do this easily by pulling out the right data from the Data Layer. 

Facebook Event Conversion Tracking

For this example, we’ll set up Facebook Pixel. We’re going to go ahead and go over to Facebook and go to Events Manager and choose Pixels.  

Once we’re inside the Pixels dashboard, we’ll select a Data Source or a Pixel.

Then, we’ll click on Set Up and choose Install Pixel on the dropdown menu.

We’ll choose Manually Install Pixel Code Yourself as the type of Pixel we’ll be adding.

Read through the guidelines first before clicking Continue.

We need to copy the entire Pixel code, so we’ll  revert back to the previous page by clicking on Back.

Scroll down until you reach the second window with the Pixel codes and click on the code window to copy the entire Facebook Pixel code.

We’re going to transfer this code  over to Google Tag Manager. Click New to create the Facebook Pixel tag.

Create Facebook Pixel Tags 

We’ll rename this tag as such since it’s a tag which will track a Facebook Event Transaction. Then, click on the Tag Configuration window.

For the tag type, we’ll choose Custom HTML.

We’ll then paste our Pixel code in the HTML window. Let’s remove the noscript section as the code is all JavaScript. 

We can see that our code reflects that we’re going to initialize our Facebook Pixel. We also want to track our Purchase and not Page View. So we’ll look for the right code to make that happen. 

For the meantime, click on Continue. 

Let’s check what the syntax will be by clicking on Manually Install Event Code again.

Click on Purchase.

Set up Purchase with Conversion Value

Here we are at the Purchase window. We want to edit some of the information in order to create the correct syntax.

We want to set up this Purchase with a Conversion Value. In our case, it would be 70, for example. If you want, we can enter a value for the currency. 

The tracking code will be at the bottom when you scroll down, so do that and click on it to copy the code.

Go back to Google Tag Manager and paste the Facebook Pixel code you’ve just copied from Facebook Pixel under the code that’s already there.

Highlight and cut the Facebook Pixel code that you’ve just pasted. 

Then, highlight the Facebook PageView tracking code.

Then, we’ll paste the Facebook Pixel code that we’ve just cut from below to replace the PageView code included there initially.

We want to transfer the correct value over what we got from the Data Layer. To do that, we will need to set up a variable to pull that out of the Data Layer correctly. 

Hit Save.

We’re going to click on Save Tag here for now.

We’ll go back to our Variables section. We want to create a variable that pulls data out of the data layer. To do that, we have to click on New on the User-Defined Variables section.

We’ll rename this for our Data Layer Variable for our revenue. Click anywhere on the Variable Configuration window.

Then, we’ll choose the Data Layer Variable.

We need to set up the right key which we can include in the Data Layer Variable Name section. 

We’re going to go back to our Order received page. Under transaction, we can look at the revenue value under the Data Layer section. This is what we want to pull out. 

How can we get to this? It’s a bit more complicated than just typing in revenue because we need to first get the ecommerce key within the ecommerce key and the purchase object. And then within the purchase object, we also want to get the action field and then the revenue. 

So, how would we go about this in the Data Layer variable? We would choose the dot notation. So we’ll input ecommerce.purchase.actionfield.revenue. 

Then, we’ll Save this. 

Let’s see if this works, by refreshing the shop’s Order received page. Our new variables should now be available in the Variables menu under the transaction section. We can see that under the transaction variable, the dlv revenue is now showing as 70. 

Let’s go back to Google Tag Manager and check out the Tags section where we want to import into our Facebook Pixel. Go to Tags and click on the Fb – Event-Transaction tag.

In our Facebook section here. We need to replace the variable which is 70.

Our variable starts with two curly brackets. A  little menu will open with a list of variable choices. We’ll go with our dlv – revenue variable.

We can let the currency variable, USD, as is. Then, we’ll click anywhere on the Triggering window.

As a trigger, we’ll choose the custom – transaction trigger. 

You’ll be redirected back to the Tag window. Then, hit Save.

It will be really easy from here on  because we’ve set it up beforehand. It is now something we can reuse in our other tags.

Testing

As you can see in our transaction event, our Facebook event now fires and transfers this over to Facebook. This means that we have set up our Facebook Pixel for Conversion Tracking correctly.

Google Ads Tags Conversion Tracking

One more tag is left which is our Google Ads tag. So I’m going to go over to the Conversions section of my Google Ads account. If you don’t know where to find the Conversions section, this can be found when you click on Tools & Settings. It will be found under Measurement. 

In the Conversions page, you’ll find that we also have a Purchase pixel. You can also set this up from new by clicking on the blue circle with the plus sign on top, but we will not be doing that anymore as I have already set this up. 

Scroll down and click on Tag setup.

Then, click on Use Google Tag Manager. We’ll also copy the Conversion ID as well as the Conversion label.

Create Google Ads Conversion Tag

Let’s go back to the Tags section in Google Tag Manager and click on New.

We’re going to name our new Tag GAds – Conversion – Purchase. Then, we’ll click on Tag Configuration. 

We’ll choose our Google Ads Conversion Tracking as our tag type.

Then, we’ll fill out the Conversion ID and our Conversion Label sections with the appropriate details which we copied earlier.

The Conversion Linker Tag

And now we need to have the actual Conversion Value. Click on the brick icon opposite the Conversion Value window.

Choose dlv – revenue.

Testing

We also might want to enter the Order ID just to avoid counting a duplicate because this will deduplicate all our orders if they are sent twice. Click on the brick icon opposite the Order ID window.

Since we don’t have a Variable set up right here, I’m going to do this right from this menu. 

Click on the plus sign ( + ) on the top right hand side of the window beside the Built-ins button.

Let’s rename this variable as dlv – order ID. 

We’ll choose the Data Layer Variable as our variable type.

Similar to what we had encountered earlier,  we need to find out what is the right key to use under Data Layer Variable Name.

We’ll then go to the Data Layer section on Google Tag Manager where we’ll observe the variables included which are the ecommerce, purchase, action field, and ID variables.

Then, hit Save.

For the Currency Code, we can also hard code this. After that, click anywhere on the Triggering section to set our triggers.

We’ll choose custom – transaction as our trigger. 

We can now find our finished Facebook Event Transaction tag on Google Tag Manager. 

We also need to set up a tag for our Google Ads Conversion Linker. So click on New again.

Let’s rename this tag first before clicking on Tag Configuration.

Choose Conversion Linker first as the Tag type.

Then, click on the Triggering section to set the triggers for this tag.

The trigger must be deployed on all pages, so we’ll choose All Pages as the trigger type.

After setting those up, we’ll hit Save.

On the Google Tag Manager Default Workspace, we’ll Refresh the page to make sure all the tags we’ve made will be displayed.

Let’s go back to our Order received page. And as we can see, we now have the transaction event for our Facebook Pixel Event Transaction, our Google Analytics Event for eCommerce Tracking, and then our Google Ads Conversion Tracking. You could even set up more conversion tracking if you have any other quotes that you want to send that data to. 

We also want to check if our Google Ads Conversion Tracking is working. So we’ll go ahead and open the Google Tag Assistantand then click on the downward arrow button to check more details about the tag.

Then, click the backward arrow to show us the other existing tags in the tagging system of Google Tag Assistant. 

Our tagging system tells us that we have our Google Ads Conversion Tracking installed. We’ll click on Google Ads Conversion Tracking afterwards to check its details.

The details of the Conversion Value and the Conversion Currency were transferred as well.

This all seems to work just fine. I would always recommend doing a little bit more testing just so you know that this is all correct here. You might want to go through another test order better to check twice rather than have faulty data later on. 

But I’m pretty satisfied right now with our implementation. The last step in this whole process is always publishing a version so it goes live to your users. 

You will do this by going into Google Tag Manager and clicking the Submit button.

Input a Version Name and then click on Publish.

You’re all set. All of your tags are working and have been saved in your Version. 

Summary

This tutorial is just a small part of the whole process of Enhanced eCommerce Tracking.  There are more Tags you can set up as well as data layers that you can install for more advanced tracking.  

We were able to learn several things that have to do with Google Analytics eCommerce tracking from knowing about the GTM Data Layer, creating your own Data Layers, setting up Tags, creating custom triggers, setting up purchases, and creating Tags within Google Ads among many other important steps.

So, we encourage you to discover more ways to set this up by using Google documentations. We hope that this blog will be able to help you with the correct first steps in successfully installing eCommerce tracking tools.

Check out our handy guide on how to upgrade to Google Analytics 4.

Do you still have questions about eCommerce tracking? Do you have other tools or approaches that you really love using for your own eCommerce tracking? Leave us a comment to let us know!