Advanced E-commerce Tracking with GTM & GA4
A complete GA4 e-commerce measurement setup for a demo online store — from data layer design to validated purchase events.
- Type
- Demonstration project
- Focus
- E-commerce measurement
- Scope
- Data layer · GTM · GA4
- Environment
- Demo storefront
Demonstration project. This is a demonstration project built in a demo environment to show how I approach this kind of work. It does not represent a real client, real data or real results.
Overview
This project shows how I structure e-commerce tracking for an online store. The store itself is a concept storefront I designed for the demonstration; the tracking architecture is the same one I would use on a live shop.
The goal is a setup where every step of the buying journey — from viewing a product to completing a purchase — is captured as a clean, consistent event that GA4 and the ad platforms can rely on.
Business challenge
E-commerce tracking tends to fail in the same few places. The demonstration is designed around the issues I see most often:
- Purchase events firing more than once when a thank-you page is reloaded
- Product data that differs between the product page, the cart and the order
- Checkout steps that aren't tracked, so drop-off points are invisible
- Revenue in analytics that can't be reconciled with the store's own orders
Solution
A measurement plan first, then a data layer that follows GA4's recommended e-commerce schema, then a container that reads from it.
- One documented event architecture covering the whole funnel
- A consistent item object reused by every event
- A single set of GTM tags driven by data layer variables
- Transaction-level deduplication so each order is counted once
- Validation of every event in GTM preview and GA4 DebugView
Implementation
01
Event architecture
Mapped the customer journey to GA4's recommended events: view_item_list, select_item, view_item, add_to_cart, view_cart, begin_checkout, add_shipping_info, add_payment_info and purchase.
02
Data layer
Specified each data layer push with a shared item structure (item_id, item_name, item_category, price, quantity) and cleared the ecommerce object before every push.
03
Product events
Listing impressions, product clicks and product detail views carry list and position context so merchandising performance can be analysed.
04
Add-to-cart events
Cart additions, removals and quantity changes are tracked with the correct value and currency for each action.
05
Checkout events
Each checkout stage sends its own event, making it possible to see exactly where shoppers leave.
06
Purchase events
The purchase event includes transaction ID, value, tax, shipping, coupon and the full item array, with a guard against duplicate firing.
07
GA4 validation
Every event was checked in GTM preview mode and GA4 DebugView, then compared against the demo store's order data.
Technology stack
Google Tag Manager
Google Analytics 4
Google Ads
JavaScript
Project visuals
A closer look at the build.
- 01
view_item_list
Category or search results shown
- 02
select_item
Product clicked in a list
- 03
view_item
Product detail page viewed
- 04
add_to_cart
Product added to the cart
- 05
view_cart
Cart opened
- 06
begin_checkout
Checkout started
- 07
add_shipping_info
Delivery details submitted
- 08
add_payment_info
Payment method selected
- 09
purchase
Order confirmed
E-commerce event architecture
Nine GA4 recommended events mapped across the buying journey, each fired from a single data layer push.
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "T-10482",
value: 4999.00,
tax: 762.56,
shipping: 0.00,
currency: "INR",
items: [{
item_id: "SKU-2041",
item_name: "Aero Wireless Headphones",
item_category: "Audio",
price: 4999.00,
quantity: 1,
}]
}
});Data layer — purchase event
The purchase push follows GA4's e-commerce schema with a transaction ID for deduplication and a full item array.
- 10:42:19view_itemitem_id SKU-2041 · value 4999.00valid
- 10:43:02add_to_cartquantity 1 · currency INRvalid
- 10:43:40view_cartitems[1] · value 4999.00valid
- 10:44:37begin_checkoutitems[1]valid
- 10:45:12add_shipping_infoshipping_tier standardvalid
- 10:45:51add_payment_infopayment_type upivalid
- 10:46:10purchasetransaction_id T-10482 · fired oncevalid
Illustrative validation view · demo data
GA4 validation
Each event is checked in debug mode: correct name, complete parameters and no duplicates.
Demo storefront with tracked interactions
The concept product page used for the demonstration, annotated with the events fired at each interaction.
Deliverables
What a project like this hands over.
- Measurement plan and event architecture
- Data layer specification for developers
- Google Tag Manager container (tags, triggers, variables)
- GA4 configuration with key events
- Validation checklist with test evidence
Key learnings
What this kind of work teaches.
- A shared item object prevents most product data mismatches before they happen.
- Clearing the ecommerce object before each push avoids values leaking between events.
- Deduplicating on transaction ID is essential wherever a confirmation page can be reloaded.
- Validating against the store's own orders is the only real proof the numbers are right.
Start a conversation
Need something like this?
Share a few details about your website and what you want to measure or build. I'll come back with how I'd approach it.
Prefer email? hello@talktohariom.in