Step-by-step Guide on How to Implement GA4 Ecommerce with Tag Manager

7 min readFeb 17, 2022

title image. It apperar a troley and a web side. It’s an example of Ecommerce

Table of Contents

Introduction
GA4 Configuration
Events Definition
GTM Configuration
data.Layer Values
Tag Creation
Conclusion

#1 Introduction

If you’re reading this article it means you are willing to make data-driven decisions for your Online Business. Congratulations!

When an E-commerce is hosted in a CMS, you probably have access to reports and statistics. This is a good way to get started in the world of data, as it allows you to have an overview of what is happening in the business.

If you want to track the entire Customer Journey it is important to complement these reports with custom reports, especially for data concerning events and products. In this article we will see what steps you need to take to achieve this.

#2 GA4 Configuration

Without Google Analytics you will not be able to configure the E-commerce for GA4. You can find other alternatives on the market, off course, but not without evaluating first if it is worthwhile to move away from a powerful and free tool like Google.

Note: To optimize the GA4 property to the fullest, read this article from Online Metrics where several initial configurations are proposed.

Regarding GA4 E-commerce, you should take into account the Currency and List Unwanted Referrals.

Currency
Indicate in which currency you want the reports to be displayed. Most commonly it is your local currency. From Property Settings you can do this.

Property settings, adding local currency to GA4

List Unwanted Referrals
Some CMSs integrate the payment checkout gateaway in the same domain. When the user inserts the credit card, it’s validated from the same platform. Other CMSs that don’t integrate the payment checkout gateaway in the same domain, it is an external entity that validates the transaction. Some of them are Paypal, Stripe or Redsys.

If this is your case and you don’t do anything, Google Analytics will break the session when the user is redirected to this third party entity. When he or she returns to the Thankyou Page, the purchase will be attributed to this entity, not yours.

To make Google Analytics understand that this redirection was to validate the transaction, we must exclude referral traffic from this entity.

If you make this configuration, the purchase will be attributed to your Online Store.

Note: Before making this configuration make ensure if your payment checkout gateaway is integrated in your E-commerce or if transactions are validated by an external entity. Only proceed if your case is the latter.

Step 1
Select the Data Stream. Admin > Data Streams > Select Yours

selecting the Data Stream of our GA4 property

Step 2
Click on More Tagging Settings

Selecting More Tagging Settings in GA4 property

Step 3
Select list unwanted referrals

Selecting List Unawanted Referrals in GA4 Property

Step 4
Add the domain or domains of the payment checkout gateway entities.

Inserting referal domain exclusion. Example: paypal.com

You could also use regular expressions:

Use regular expressions for inserting domains

#3 Events Definition

As we saw in the Measurement Plan, the most important event is the purchase. From here, you must assess which other events make sense to track in your Online Store. Remember that it is about identifying those that are relevant in the Customer Journey.

In this example we will see the product detail (event: view_item), add to cart (event: add_to_cart) and the achievement of a sale (event: purchase).

planning which events are relevant in the Funnel

#4 GTM Configuration

We assume that Tag Manager code is already inserted in the web page. If not, I recommend you reading this article from Analytics Mania. Once GTM code is inserted in your Online Store, you must activate the E-commerce functionality in order to dump the events in the data.Layer. Only if they are available in the data.Layer will you have access to them.

Note: To activate the E-commerce in Tag Manager you can use a CMS plugin or by contacting a developer. In the Implementation Plan I explain how to prepare the documentation for a developer.

In preview mode, the left column shows the events that are triggered as we navigate through the Online Store. In the data.Layer (right of the image) the event appears at the beginning of the declaration and then the variables with their respective values.

dataLayer example of the container with the event: product detail

All the events have and should have an identical structure in how the data is dumped into the data.Layer. There are some parameters that are specific to the purchase event: Tax, shipping, payment_type, transaction_id, coupon and affiliattion.

dataLayer example of the container with the event: add to cart

Your job as a Digital Analyst is verify that data is reported correctly in the data.Layer and that there are no inconsistencies between the events and in the values of the variables.

A common error in the currency variable is to put the sign of the currency ($, € or £) instead of the ISO nomenclature (USD, EUR, GBP)
Another common error in the price variable is to add the currency symbol ($30.0) instead of the numeric value only (30.0)

#5 data.Layer Values

Once data is being reported correctly (in preview mode) it is time to access these values with Tag Manager.

A good method is to follow the DVTT framework. This leads to a concise and efficient approach to the project. First we will access the data.Layer values, then we will create the trigger and finally the tag. Check out Analytics Mania for more details about DVTT.

Variable Configuration
From the Tag Manager panel we choose a variable of Data Layer type because the values we want to fecth are in the data.Layer.

The data.Layer structure allows us to access the values in a simple way, since the variables are at the same level just after the dataLayer.push declaration ({

Entering the name of the variable we want to collect is enough.

write the name of the variable in the variable settings: SKU

write the name of the variable in the variable settings: Name

And so on with all the variables we need to collect.

Note: Remember which data.Layer parameters are required and which are recommended for each event. To find out, see this presentation

Once variables are created, check one more time in Preview Mode if values are repporting correctly.

variables are reporting correctly in the dataLayer

#6 Tag Creation

Once you managed to access the variables and values are being collected correctly, it is time to create the tag. This is in charge of transporting the event and the associated parameters from Tag Manager to GA4.

Although the event is triggered with the name ee_purchase, when creating the tag we must explicitly follow Google’s nomenclature for naming the event.

Tag Manager preview mode is quite reliable. The data shown are the ones sent to GA4. Even so, it is convenient to verify that they are really being sent correctly. In the next image we can see how the view_item event arrives correctly together with the items.

Note: Checking is made with the view_item event instead of purchase. I have done it this way so that the transaction is not counted. However, keep in mind that you MUST ensure that purchase event is passed correctly to GA4.

If everything is correct we can publish the Tag Manager container.

# 7 Conclusion

When we talk about Digital Analytics for an Online Store it means being able to collect data that allows us to make decisions.

Implementing E-commerce tracking for GA4 is essential to know what is working and what needs to be improved in the Customer Journey. The use of Tag Manager will make this configuration much easier.

This way we can complement the reports we have in the CMS by answering questions such as: What products are being viewed in detail, how many of these products are being added to the cart? And, of all the products that have been viewed, which have been purchased?