E-commerce Stack

How to Set Up GA4 Ecommerce Events (purchase, add_to_cart, etc.)

by
How to Set Up GA4 Ecommerce Events (purchase, add_to_cart, etc.)

GA4 ecommerce events are the foundation of online store analytics. Without properly configured purchase, add_to_cart, and begin_checkout, you see traffic but not money: which campaign drives revenue, where in checkout shoppers drop off, which product generates the most abandoned carts.

GA4 uses an event-based model instead of Universal Analytics sessions. Every shopper action is a separate event with parameters. You can implement them via GTM, hardcode, or platform plugins. Below — the full event list, dataLayer structure, code examples, and a validation checklist.

Table of Contents

Which GA4 Ecommerce Events to Implement

GA4 has a standardized set of e-commerce events. Use these exact names — otherwise GA4 won’t recognize them as e-commerce and data won’t appear in the Monetization reports.

EventWhen It FiresRequired Parameters
view_itemProduct page viewitems[] (item_id, item_name, price)
add_to_cartAdd to cart clickitems[], value, currency
remove_from_cartRemove from cartitems[], value, currency
view_cartCart page viewitems[], value, currency
begin_checkoutCheckout initiateditems[], value, currency
EventWhen It FiresRequired Parameters
add_shipping_infoShipping method selecteditems[], shipping_tier
add_payment_infoPayment method selecteditems[], payment_type
purchaseSuccessful paymenttransaction_id, value, currency, items[]
refundRefund processedtransaction_id, value, items[]
view_item_listCategory/catalog viewitems[], item_list_name

The minimum for basic analytics: view_item, add_to_cart, begin_checkout, purchase. This gives you a conversion funnel and revenue attribution. Add the rest in phase two — they enrich the analysis, but without the core four, reports will be empty. For basic GA4 setup, see our GA4 setup guide.

DataLayer Structure for GA4 Ecommerce Events

The dataLayer is a JavaScript object through which your site passes data to GTM, and GTM passes it to GA4. The structure must match Google’s specification — otherwise GA4 ignores the parameters silently.

dataLayer for add_to_cart

This event fires when a user clicks “Add to Cart.” Important: clear the ecommerce object before each push to prevent data from the previous event bleeding into the current one.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
    currency: "USD",
    value: 349.99,
    items: [{
      item_id: "SKU-12345",
      item_name: "Sony WH-1000XM5 Headphones",
      item_category: "Electronics",
      item_brand: "Sony",
      price: 349.99,
      quantity: 1
    }]
  }
});

dataLayer for purchase

Purchase is the most critical event. Without it, GA4 records zero revenue. The transaction_id parameter must be unique per order — this prevents duplicate transactions when the thank-you page is refreshed.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "purchase",
  ecommerce: {
    transaction_id: "ORD-2026-78432",
    value: 699.98,
    tax: 58.33,
    shipping: 0,
    currency: "USD",
    coupon: "SPRING10",
    items: [{
      item_id: "SKU-12345",
      item_name: "Sony WH-1000XM5 Headphones",
      item_category: "Electronics",
      item_brand: "Sony",
      price: 349.99,
      quantity: 2,
      coupon: "SPRING10"
    }]
  }
});

dataLayer for begin_checkout, add_shipping_info, add_payment_info

These three events form the checkout funnel. They reveal exactly where users drop off: at the shipping step, payment step, or earlier. The structure mirrors add_to_cart with additional parameters.

// begin_checkout
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "begin_checkout",
  ecommerce: {
    currency: "USD",
    value: 699.98,
    items: [/* items array */]
  }
});

// add_shipping_info
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "add_shipping_info",
  ecommerce: {
    currency: "USD",
    value: 699.98,
    shipping_tier: "Standard Shipping",
    items: [/* items array */]
  }
});

// add_payment_info
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "add_payment_info",
  ecommerce: {
    currency: "USD",
    value: 699.98,
    payment_type: "Stripe",
    items: [/* items array */]
  }
});

For processing payment gateway callbacks, use webhook integration — it’s more reliable than a client-side trigger on the thank-you page.

Setting Up GA4 Ecommerce Events via Google Tag Manager

GTM is the standard tool for sending dataLayer events to GA4. Each ecommerce event needs: a trigger (Custom Event), a tag (GA4 Event), and parameters (ecommerce items).

Step-by-Step GTM Configuration

  • Step 1: Create a Custom Event trigger. Trigger Type → Custom Event → Event name: add_to_cart (exact name from your dataLayer.push). Repeat for purchase, begin_checkout, view_item, and other events.
  • Step 2: Create a GA4 Event tag. Tag Type → Google Analytics: GA4 Event → Event Name: {{Event}} (dynamically pulls the event name from the trigger). Under More Settings → Ecommerce → enable “Send Ecommerce data” and select Data Layer.
  • Step 3: One tag for all e-commerce events. Instead of 10 separate tags, create one with a dynamic event name. Trigger: a Trigger Group containing all e-commerce Custom Event triggers. This simplifies maintenance and reduces error risk.
  • Step 4: Test in GTM Preview. Enable Preview Mode, complete a full test purchase. Verify that each event appears in Tag Assistant with correct parameters. Pay special attention to items[] — if the array is empty, GA4 won’t record the transaction.

For tracking events without GTM or as a supplement to client-side — consider server-side tracking. It sends events directly from your backend to GA4’s Measurement Protocol, bypassing ad blockers.

Implementation for WooCommerce and Shopify

WooCommerce

Three approaches for WooCommerce: plugin, custom code, or GTM + dataLayer. Plugins like GTM4WP (free) and Analyzify (paid) generate dataLayer objects automatically for all e-commerce events. GTM4WP covers 90% of needs and works correctly with standard WooCommerce hooks.

Custom approach: use woocommerce_add_to_cart, woocommerce_thankyou, and woocommerce_before_checkout_form hooks to inject dataLayer.push() at the right points. Full control, but requires maintenance on WooCommerce updates. For choosing between platforms, see our Shopify vs WooCommerce comparison.

Shopify

Shopify has a built-in GA4 integration through the Google & YouTube channel. It automatically sends view_item, add_to_cart, begin_checkout, and purchase. The catch: Shopify doesn’t give full checkout control (Shopify Plus only), so add_shipping_info and add_payment_info require Shopify Pixels or the Customer Events API.

For custom events in Shopify, use the Web Pixels API (Shopify Pixels): a sandboxed environment with access to checkout events that works without GTM. Alternatives — Elevar or Littledata as middleware between Shopify and GA4.

5 Common Mistakes with GA4 Ecommerce Events

These mistakes appear in 70%+ of stores. Each one distorts data and makes reports unreliable.

  • Duplicate purchase on thank-you page refresh. Fix: check transaction_id via cookie or sessionStorage. If the transaction was already sent, skip the push. GA4 also de-duplicates by transaction_id, but with up to a 24-hour delay.
  • Missing ecommerce: null before push. Without clearing, the previous ecommerce object stays in dataLayer, and the next event picks up its items[]. Result — a purchase with items the customer browsed, not bought.
  • Currency mismatch. Value in local currency, currency field set to “USD.” GA4 converts at its internal rate, and the revenue report shows fantasy numbers. Always pass the currency that matches the actual price currency.
  • Empty items[] in purchase. If the items array is empty, GA4 records the transaction with $0 revenue. The Monetization report shows a transaction, but Item Revenue shows zeros.
  • Purchase trigger firing before payment gateway redirect. If payment happens on Stripe, PayPal, or another external page, the user returns to your Thank You page via redirect. The purchase event must fire on this page, not before the redirect. For reliability, use webhook logging as a backup trigger.

Validation Checklist

Run through this list after every tracking change. A single error in the purchase event corrupts an entire month of revenue data.

  • GTM Preview Mode shows all 4 core events (view_item, add_to_cart, begin_checkout, purchase) during a test order.
  • Each event contains a non-empty items[] with item_id, item_name, price, quantity.
  • purchase has a unique transaction_id, value > 0, and currency matching the store’s currency.
  • GA4 DebugView (Admin → DebugView) shows events in real time with correct parameters.
  • After 24–48 hours, data appears in Monetization → Ecommerce purchases and Monetization → Checkout journey.
  • Revenue in GA4 matches revenue in the store’s backend (±5% variance is acceptable due to ad blockers).
  • Purchase event doesn’t duplicate on Thank You page refresh (verify via Realtime → Event count).
  • Every dataLayer.push is preceded by dataLayer.push({ ecommerce: null }).

For high-traffic stores (1,000+ transactions/mo), we also recommend adding Meta CAPI for parallel conversion tracking in Facebook Ads. And for monitoring events without GTM, check out alternative event tracking tools.

If your site runs behind a CDN, make sure caching doesn’t interfere with dataLayer. More on proper caching in our Cloudflare setup guide. And tracking script load speed directly impacts Core Web Vitals.

FAQ

Do I need GTM for GA4 ecommerce events?

Not required, but recommended. GTM lets you modify tracking without a code deploy. Alternatives: gtag.js (hardcode), Shopify’s built-in integration, or plugins like GTM4WP for WooCommerce. For a server-side approach, use GA4’s Measurement Protocol.

Why doesn’t GA4 show revenue in Monetization reports?

Three common causes: the purchase event is missing value or currency; items[] is empty; or the event isn’t passing through the GA4 tag (check GTM Preview). Also, data takes 24–48 hours to appear — DebugView shows events instantly, but Monetization reports lag behind.

How do I verify that the purchase event works correctly?

Three tools: GTM Preview Mode (shows dataLayer in real time), GA4 DebugView (Admin → DebugView, requires debug_mode=true), and the Google Analytics Debugger Chrome extension. Place a test order and confirm that transaction_id, value, and items[] are populated correctly.

How do I prevent duplicate transactions in GA4?

Use a unique transaction_id for every order. GA4 automatically de-duplicates transactions with the same transaction_id within 24 hours. As extra protection, store the sent transaction_id in sessionStorage and check it before pushing again on the Thank You page.

Does GA4 track ecommerce data when ad blockers are active?

No. Client-side GA4 tracking is blocked by ad blockers in 15–30% of users. The solution: server-side tracking via Measurement Protocol or server-side GTM. This sends events from your server, bypassing browser-based blockers entirely.

E-commerce