How to Set Up GA4 E-commerce Tracking in GTM - With Free Importable Template
If you're running an e-commerce site and want to understand how your customers shop, GA4 e-commerce tracking is essential. It lets you see everything from which products people view to what ends up in their cart, through to completed purchases and even refunds.
But here's the thing: GA4 can't magically know when someone adds a product to their cart. Your website needs to tell GA4 what's happening, and that's where the data layer comes in.
In this guide, I'll walk you through the different ways to implement GA4 e-commerce tracking, with a focus on the Google Tag Manager approach that gives you the most flexibility and control.
What is the Data Layer?
The data layer is a JavaScript object that acts as a middleman between your website and your tracking tools. When something happens on your site (like a purchase), your website pushes that information to the data layer in a structured format. Google Tag Manager then listens for these pushes and sends the data to GA4.
Think of it like a translator: your e-commerce platform speaks its own language, GA4 speaks another, and the data layer translates between them.
Here's what a typical data layer push looks like for a purchase event:
window.dataLayer = window.dataLayer || [];
// Clear previous ecommerce data (recommended)
dataLayer.push({ ecommerce: null });
// Push the event
dataLayer.push({
event: 'purchase',
ecommerce: {
transaction_id: 'T12345',
value: 59.99,
tax: 4.99,
shipping: 5.99,
currency: 'GBP',
items: [{
item_id: 'SKU123',
item_name: 'Premium ID Card',
price: 49.01,
quantity: 1,
item_category: 'ID Cards',
item_brand: 'Digital ID'
}]
}
});
The GA4 E-commerce Events You Need
GA4 has a predefined set of e-commerce events. Using these exact event names is important because GA4 automatically populates standard reports and the monetisation section when it recognises them.
| Event | When to Fire |
|---|---|
view_item_list |
When a user views a list of products (category page, search results) |
select_item |
When a user clicks on a product from a list to view it |
view_item |
When a user views a product detail page |
add_to_cart |
When a user adds a product to their cart |
remove_from_cart |
When a user removes a product from their cart |
view_cart |
When a user views their cart page |
begin_checkout |
When a user starts the checkout process |
add_shipping_info |
When a user submits their shipping information |
add_payment_info |
When a user submits their payment information |
purchase |
When a user completes a purchase (order confirmation page) |
refund |
When a refund is processed (often server-side) |
Implementation Methods: Which One Should You Use?
There are three main ways to implement GA4 e-commerce tracking. Each has its pros and cons.
1. Native gtag.js Implementation
This involves adding Google's tracking code directly to your website and calling gtag() functions when e-commerce events occur. It's the simplest approach if you have a small site and direct access to the code, but it means your tracking logic is hardcoded into your website.
Pros: Simple, no GTM needed
Cons: Requires code changes for any tracking updates, less flexible
2. Google Tag Manager with Data Layer (Recommended)
This is the approach I recommend for most businesses. Your developer implements the data layer pushes, and then you configure GTM to listen for those events and send them to GA4. This separates your tracking configuration from your website code.
Pros: Flexible, no code changes needed for tracking updates, version control, easy testing
Cons: Initial setup requires developer involvement for data layer
3. Server-Side Tracking
E-commerce events are sent from your server rather than the browser. This is the most robust option but requires more technical setup. It's particularly useful for the purchase event, where you want to ensure every transaction is tracked regardless of what happens in the browser.
Pros: More accurate, not affected by ad blockers, better for sensitive data
Cons: More complex setup, requires server-side GTM container or Measurement Protocol
Setting Up GA4 E-commerce Tracking in GTM
Once your developer has implemented the data layer pushes, the GTM configuration is straightforward. Here's what you need:
Step 1: Create Custom Event Triggers
For each e-commerce event, create a Custom Event trigger that fires when that specific event is pushed to the data layer.
Go to Triggers > New > Custom Event
Enter the event name exactly as it appears in the data layer (e.g., 'purchase')
Name it clearly: 'purchase | Custom Event'
Step 2: Create GA4 Event Tags
For each trigger, create a corresponding GA4 Event tag.
Go to Tags > New > Google Analytics: GA4 Event
Enter your Measurement ID (or use a Constant variable)
Set the Event Name to match (e.g., 'purchase')
Tick 'Send Ecommerce data' and select 'Data Layer'
Attach the corresponding trigger
The 'Send Ecommerce data' checkbox is the key setting here. When enabled, GTM automatically reads the ecommerce object from the data layer and sends it to GA4 in the correct format. You don't need to manually map each parameter.
Step 3: Create a Measurement ID Variable
Rather than hardcoding your GA4 Measurement ID into each tag, create a Constant variable. This makes it easier to update if needed and keeps things tidy.
Go to Variables > User-Defined Variables > New
Choose 'Constant'
Enter your GA4 Measurement ID (G-XXXXXXXXXX)
Name it: 'GA4 Measurement ID | Constant'
Save Time: Import This GTM Container Template
Setting up all these tags and triggers manually is tedious. I've created a GTM container template that includes everything you need for standard e-commerce tracking. It includes 11 event tags, 11 corresponding triggers, and a Measurement ID variable.
Events included:
view_item_list, select_item, view_item
add_to_cart, remove_from_cart, view_cart
begin_checkout, add_shipping_info, add_payment_info
purchase, refund
How to import:
Download the JSON file (link at the end of this post)
In GTM, go to Admin > Import Container
Select the JSON file
Choose 'Merge' > 'Rename conflicting tags, triggers, and variables'
After import, update the 'GA4 Measurement ID | Constant' variable with your actual Measurement ID
Delete any events you don't need
Data Layer Examples for Your Developer
Here are copy-paste examples your developer can use as a starting point. The structure follows Google's GA4 e-commerce schema.
view_item_list (Category Page)
dataLayer.push({ ecommerce: null });
dataLayer.push({
event: 'view_item_list',
ecommerce: {
item_list_id: 'category_biodegradable',
item_list_name: 'Biodegradable Cards',
items: [
{
item_id: 'SKU001',
item_name: 'Eco Card White',
price: 12.99,
index: 0,
item_category: 'Biodegradable Cards'
},
{
item_id: 'SKU002',
item_name: 'Eco Card Blue',
price: 13.99,
index: 1,
item_category: 'Biodegradable Cards'
}
]
}
});
begin_checkout
dataLayer.push({ ecommerce: null });
dataLayer.push({
event: 'begin_checkout',
ecommerce: {
currency: 'GBP',
value: 18.49,
items: [{
item_id: 'SKU123',
item_name: 'Dyster White 750 Micron Biodegradable Cards',
price: 18.49,
quantity: 1,
item_category: 'Biodegradable Cards',
item_brand: 'Dyster'
}]
}
});
Required Item Parameters
At minimum, each item in the items array should include:
| Parameter | Description |
|---|---|
item_id |
SKU or product identifier |
item_name |
Product name |
price |
Unit price (numeric, no currency symbol) |
quantity |
Number of units |
item_category |
Product category |
item_brand |
Brand name (if applicable) |
Pro Tip: Always clear the ecommerce object before pushing a new event. This prevents stale data from previous events bleeding into the current one. Add dataLayer.push({ ecommerce: null }); before each e-commerce push.
Testing Your Implementation
Before publishing, test everything thoroughly:
1. GTM Preview Mode
Click Preview in GTM and walk through a complete purchase flow on your site. Check that each event fires at the right moment and that the ecommerce data is being captured correctly. You should see the ecommerce object in the Variables tab when each event fires.
2. GA4 DebugView
In GA4, go to Admin > DebugView. This shows events as they arrive in real-time. Look for your e-commerce events and click on them to verify all parameters are coming through correctly.
3. Browser Console
Open your browser's developer tools and type 'dataLayer' in the console. This shows you exactly what's being pushed. Useful for debugging data layer issues.
Common Issues and How to Fix Them
Events firing but no revenue data
Make sure 'Send Ecommerce data' is ticked in your GA4 Event tags and that the data layer includes the 'value' and 'currency' parameters at the event level (not just inside items).
Duplicate transactions
If users can refresh the thank you page and the purchase event fires again, you'll get duplicates. Ask your developer to only fire the purchase event once per transaction, typically by checking if the order has already been tracked (using a cookie or session variable).
Stale ecommerce data
If you see items from a previous event appearing in the current event, the ecommerce object isn't being cleared. Ensure your developer adds dataLayer.push({ ecommerce: null }) before each new e-commerce event.
Events not showing in GA4 reports
GA4 can take 24-48 hours to populate standard reports. Use DebugView for real-time verification. Also check that you're using the exact event names GA4 expects (they're case-sensitive).
Next Steps
Once your e-commerce tracking is in place, you'll be able to see your full purchase funnel in GA4's monetisation reports, understand which products drive the most revenue, identify where customers drop off in the checkout process, and measure the true ROI of your marketing campaigns.
If you need help implementing GA4 e-commerce tracking or want a full audit of your current setup, get in touch. I work with businesses and agencies to ensure tracking is accurate, compliant, and actually useful for decision-making.