GA4 ecommerce tracking for Shopify and WooCommerce

Google's ecommerce guide gives each step of the shopping path its own recommended event. Use the names exactly as written. For a typical store, these eight cover the path from a collection page to a finished order:

Google's guide has a few more, for stores that need them:

Google's recommended events reference lists the parameters for each event. These are the ones it marks as required:

Inside items, each product needs an ID or a name:

A few optional parameters are worth knowing:

gtag('event', 'purchase', {
  transaction_id: 'ORDER-1001',
  value: 58.00,
  currency: 'USD',
  tax: 4.64,
  shipping: 5.00,
  items: [
    {
      item_id: 'SHIRT-BLUE-M',
      item_name: 'Linen shirt',
      price: 29.00,
      quantity: 2,
    },
  ],
});

Shopify's GA4 page tells you to install the Google & YouTube sales channel and then follow Google's setup guide. You need a GA4 property with a web data stream first, and Shopify notes that creating one needs the editor role on the Google Analytics account.

1. 1

   Install the app

   Sign in to Shopify and install the Google & YouTube app.

2. 2

   Start the GA4 setup

   On the app's Overview page, find the "Just want to set up Google Analytics 4" section and click Get started.

3. 3

   Connect your property

   Pick your GA4 property, click Connect, then Confirm. Google says this route is strongly preferred over adding the tag by hand in the app's settings.

You don't write event code. Google's Shopify event reference lists what the app sends: all eight events in the diagram, plus page_view and search. Of the extra events, it sends only remove_from_cart.

The app's purchase event carries the required parameters, plus tax, shipping and coupon. It also sends shopify_event_name, which you can use to build filters in GA4.

If you'd rather send GA4 events yourself, for example through Google Tag Manager, Shopify's route is a custom pixel. Custom pixels run in a lax sandbox, and Shopify says not all pixel functionality works there. Shopify also says adding and using custom pixels is unsupported, so troubleshooting is on you.

1. 1

   Clear out existing pixels

   Shopify says to remove or modify any existing pixels before you add a custom one, so customer events aren't counted twice. If the Google & YouTube app already sends GA4 events, a custom pixel would be a second sender.

2. 2

   Add the pixel

   In Shopify admin, go to Settings → Customer events and add a custom pixel. Paste your code and save.

3. 3

   Connect it

   Click Connect pixel. It doesn't track anything until it's connected.

Map Shopify events to GA4 events

Your code subscribes to Shopify's customer events and sends them on under GA4 names. Shopify's Google Tag Manager tutorial maps them like this:

In the same tutorial, the purchase parameters come from these checkout fields:

WooCommerce's own extension for GA4 is Google Analytics for WooCommerce. Its documentation covers the setup:

1. 1

   Install the extension

   Install and activate Google Analytics for WooCommerce.

2. 2

   Add your Measurement ID

   Go to WooCommerce → Settings → Integration → Google Analytics and enter the ID that starts with G-.

3. 3

   Turn on the tracking options you need

   They include purchase transactions, add to cart and remove from cart events, product impressions and clicks on listing pages, product detail views, and checkout process initiated.

Remove any other Google Analytics plugin or code. The extension's FAQ says duplicate Google Analytics code causes a conflict in tracking.

On consent, the extension sets a default state that denies all parameters for visitors in the EEA. It has no cookie banner of its own but works with the WP Consent API. Your banner plugin has to update consent after a visitor agrees, or data won't reach Google Analytics.

1. 1

   Look at Realtime

   Open Reports → Realtime, which shows activity from the last 30 minutes. The Event count by event name card tells you whether events are arriving at all.

2. 2

   Turn on debug mode

   Use Google Tag Assistant (tagassistant.google.com) or Tag Manager's preview mode, or add debug_mode: true to the gtag config command. To turn it off later, remove the parameter: setting it to false doesn't turn debug mode off.

3. 3

   Open DebugView

   Go to Admin → Data display → DebugView. The Seconds stream shows events from the last 60 seconds, and the Debug device selector lets you pick your own device.

4. 4

   Walk the shopping path

   Go through a product page, add to cart, the cart and checkout. Each event should appear once, in order.

5. 5

   Read the parameters

   Click an event to see its parameters, and compare them with the required parameters.

Each platform has one more catch when you test:

Pixel Audit runs the same walk-through from our servers. It opens your store, goes through home, product, cart and checkout, and reports which GA4 events fired and with what parameters, along with seven other tags. It doesn't place an order, so it can't see purchase or Measurement Protocol events.