Google Analytics Enhanced eCommerce Tracking with Google Tag Manager

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:

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.

Screenshot of the Trigger buttons and the New button being clicked on Google Tag Manager

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.

Screenshot of the trigger being renamed and the Custom Event button being clicked

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.

Screenshot of  the new Custom Event trigger being named, the All Custom Events button being ticked, and the Custom Event trigger being saved

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.

Screenshot of  the Tags section on the Google Tag Manager and the Google Analytics Pageview tag, and a variable

I already have a Google Analytics Settings variable as well.

Screenshot of the Google Analytics settings variable being highlighted on Google Tag Manager

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

Screenshot of the Google Analytics settings variable being clicked

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.

Screenshot of the Variables button and the variable under the  User-Defined Variable being clicked on Google Tag Manager

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

Screenshot of the Google Analytics settings variable being mentioned

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

Screenshot of the Google Analytics settings variable being pasted into Google Tag Manager

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.

Screenshot of the New button being clicked on Google Tag Manager

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

Screenshot of the tag name being changed and the Tag Configuration section being clicked

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

Screenshot of the Google Analytics : Universal Analytics button being clicked on

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

Screenshot of the  Event Track Type being chosen on the Track Type dropdown menu

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

Screenshot of the event category being input and the Action button being clicked

And for the action, simply choose Event here.

Screenshot of the Event variable being chosen and clicked

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

Screenshot of the event key in the Google Tag Manager window in the Demoshop webpage

We can leave the Label and Value sections empty. 

Screenshot of the Label and Value windows being highlighted

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

Screenshot of the Label button being clicked

Let’s add the Page Path variable to our Label

Screenshot of the Page Path variable being selected

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

Screenshot of the Non-Interaction Hit True option being selected

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

Screenshot of the Google Analytics Settings Variable being selected

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.

Screenshot of the overriding settings in this tag option being enabled by ticking on the box

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. 

Screenshot of the Ecommerce drop down menu being clicked on, the True option being selected on the Enable Enhanced Ecommerce Features dropdown menu, and the Use Data Layer box being ticked off

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

Screenshot of the Triggering section being clicked on

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

Screenshot of the custom - transaction Custom Event trigger being selected

Hit Save after choosing the trigger.

Screenshot of the Save button being clicked

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.

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

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.

Screenshot of the Google Tag Assistant being opened and the Google Analytics tag being mentioned

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

Check the contents of the Event.

Screenshot of the Enhanced Ecommerce Event tag preview on Google Assistant

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.

Screenshot of the Real-time and Events buttons being clicked on Google Analytics along with a preview of the Google Analytics Events dashboard

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. 

Screenshot of the Enhanced Ecommerce Event Category being clicked on Google Analytics’ Events dashboard

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. 

Screenshot of the Conversions, E-commerce, and Sales Performance buttons being clicked and the Sales Performance dashboard being displayed

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.

Screenshot of the Developer Tools being accessed via the Google Chrome settings

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. 

Screenshot of the GTM/GA Debug button being clicked, the page being refreshed, and the ENHANCED ECOMMERCE button being clicked to reveal the GTM container

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.

Screenshot of the product data inside the GTM container

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.

Screenshot of the order date being selected and the Apply button being clicked in Google Analytics’ Sales Performance dashboard

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.

Screenshot of the Transaction ID displaying on Google Analytics’ Sales Performance dashboard

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.

Screenshot of the correct transaction data being displayed on Google Analytics’ Sales Performance dashboard

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.  

Screenshot of the Pixels button being selected on Facebook Events Manager

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

Screenshot of the Pixel account being clicked

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

Screenshot of the Set Up and Install Pixel buttons being clicked on in Facebook Pixel

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

Screenshot of the Manually Install Pixel Code Yourself option being selected

Read through the guidelines first before clicking Continue.

Screenshot of the Continue button being clicked on the Install Pixel window

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

Screenshot of the Back button being clicked on the Set Up Events window

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.

Screenshot of the pixel code being clicked to be copied

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

Screenshot of a new tag about to be created on Google Tag Manager

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.

Screenshot of a Facebook tag event being renamed and the Tag Configuration section being clicked

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

Screenshot of the Custom HTML button being clicked on as the tag type choice

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

Screenshot of the pixel code being pasted into the HTML window of Google Tag Manager

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. 

Screenshot of select parts of the pixel code for tracking being highlighted in the HTML window

For the meantime, click on Continue. 

Screenshot of the Continue button being clicked in the Pixel installation window

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

Screenshot of the Manually Install Event Code button being clicked

Click on Purchase.

Screenshot of the Purchase section being clicked on the Install Pixel Code window

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.

Screenshot of the Purchase section of the Install Pixel Code being shown

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. 

Screenshot of the Conversion Value and Currency windows being filled with data in the Install Pixel Code window

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

Screenshot of the code under the Purchase section being clicked in order to copy it

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.

Screenshot of the tracking code being pasted into the Google Tag Manager

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

Screenshot of the tracking code being highlighted and cut

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.

Screenshot of the tracking code pasted in the Facebook tracking code section and the <script> </script> codes being removed from the HTML window

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.

Screenshot of the Facebook tracking code being highlighted and the Save button being clicked

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

Screenshot of the Save Tag being clicked to save the event tag created

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.

Screenshot of the Variables button being clicked on and the New variable button being clicked on

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

Screenshot of the new user-defined variable being renamed and the Variable Configuration window being clicked on

Then, we’ll choose the Data Layer Variable.

Screenshot of the Data Layer Variable button being clicked on Google Tag Manager

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

Screenshot of the Data Layer Variable Name section being highlighted

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. 

Screenshot of the transaction button and the Data Layer section being clicked on along with the revenue value being highlighted on Google Tag Manager

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. 

Screenshot of the ecommerce key, purchase key, actionField, and revenue values being highlighted on Google Tag Manager

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. 

Screenshot of the Data Layer Variable Name being filled out and the Save button being clicked on

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. 

Screenshot of the Demoshop page being refreshed, the transaction and Variables button being clicked on, and the dlv - revenue Variable Value being highlighted

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.

Screenshot of the Tags event and the Fb - Event - Transaction tag being clicked on Google Tag Manager

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

Screenshot of the value variable being highlighted in Google Tag Manager

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.

Screenshot of the two curly brackets variable being typed into the code and the dlv - revenue being selected

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

Screenshot of the USD variable being highlighted in the tag event HTML code

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

Screenshot of the custom - transaction trigger being selected in Google Tag Manager

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

Screenshot of the Fb - Event - Transaction trigger being saved

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.

Screenshot of the Google Tag Manager Tags Default Workspace being refreshed

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.

Screenshot of the transaction button being clicked and the Fb - Event - Transaction trigger being fired. The Google Tag Manager extension is also clicked, showing the Facebook Pixel Custom Parameter details

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. 

Screenshot of the Conversion button being clicked on under the Tools & Settings and the Measurement section

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. 

Screenshot of the Purchase Pixel and the new pixel button

Scroll down and click on Tag setup.

Screenshot of the tag setup button being clicked on in the Google Ads Purchase dashboard

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

Screenshot of the Conversion ID and the Conversion label being highlighted in the Google Ads Purchase dashboard

Create Google Ads Conversion Tag

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