GA4 ecommerce (gtag.js): Send Universal Analytics and GA4 events

This guide describes how to maintain separate gtag.js Universal Analytics and Google Analytics 4 ecommerce implementations.

Visit the Developer migration center for additional upgrade guides and resources.

Outcome

The outcome of following this guide is that you will implement Google Analytics 4 ecommerce events for a new GA4 property and keep your existing Universal Analytics ecommerce implementation unchanged. You will send separate ecommerce events to both the Universal Analytics and Google Analytics 4 property.

Note that when you implement ecommerce for both UA and GA4, your Google Analytics 4 property will use your GA4 ecommerce implementation.

Before you begin

  1. Use the ecommerce migration helper tool to confirm that the following describes your current implementation:

    • You are using a Universal Analytics property
    • Your site uses the gtag.js library to send ecommerce events

  2. Review the upgrade options for ecommerce implementations to learn about the trade-offs of each option. Confirm that you want to follow this guide and have two analytics implementations: one for your Universal Analytics property and one for your Google Analytics 4 property.

Trade-offs and considerations

Review and consider the information below to fully understand the implications of having two ecommerce implementations, one for your Universal Analytics property and one for your Google Analytics 4 property.

Pros Cons
  • Allows you to see ecommerce data in both your GA4 and Universal Analytics reports.
  • No change to the way your ecommerce data is collected or reported in your Universal Analytics property.
  • Using GA4 events and parameters ensures complete GA4 ecommerce reports.
  • Requires you to implement GA4 ecommerce events.
  • Your website sends two sets of events: one for Universal Analytics and one for GA4. This may impact performance.

Implementation

1. Create and configure a new GA4 property

Complete the following steps to create and configure your new Google Analytics 4 property:

  1. Create a new Google Analytics 4 property.
    • Use the GA4 Setup Assistant to automatically create a new GA4 property and copy the following settings from your Universal Analytics property: property name, website URL, timezone, and currency settings. However, uncheck the Enable data collection using your existing tags option to disable the connected site tag feature. Alternatively, if you don't want to copy any settings from your Universal Analytics property, create a Google Analytics 4 property without the GA4 Setup Assistant.
  2. Find the tag ID for the Google Analytics 4 property. You will use this in the next step to configure your GA4 property.
  3. Add the GA4 property
    • To ensure that Universal Analytics events are only sent to your UA property and that Google Analytics 4 events are only sent to your GA4 property, use the Route data functionality provided by gtag.js.
    • Add the Google Analytics 4 property to your existing gtag.js snippet. Use the config command and groups parameter with the Tag ID so that events can be routed to your GA4 property separately from your Universal Analytics property.

The following is an example gtag.js snippet that has configured a Universal Analytics property and Google Analytics 4 property that is assigned to the GA4 group.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXX-Y');  // Universal Analytics property
  gtag('config', 'TAG_ID', { 'groups': 'GA4' });  // Google Analytics 4 property
</script>

2. Implement GA4 ecommerce events and route to your GA4 property

Once you have created and configured your new Google Analytics 4 property, you are ready to implement GA4 ecommerce events. To assist with making your GA4 implementation comparable to your Universal Analytics implementation, use the following resources:

The following example shows separate Universal Analytics and Google Analytics 4 ecommerce purchase events being sent to their respective properties using the send_to parameter for the GA4 events:

// Universal Analytics.
// The original UA implementation remains unchanged.
gtag('event', 'purchase', {
  "transaction_id": "24.031608523954162",
  "affiliation": "Google online store",
  "currency": "USD",
  "shipping": 7.50,
  "tax": 1.80,
  "value": 33.30,
  "items": [
    {
      "id": "P12345",
      "name": "Android Warhol T-Shirt",
      "brand": "Google",
      "category": "Apparel/T-Shirts",
      "variant": "Black",
      "list_name": "Search Results",
      "list_position": 1,
      "quantity": 2,
      "price": 12.00
    }
  ]
});


// The new Google Analytics 4 ecommerce implementation.
// Uses `send_to` to route data to the GA4 group defined in the tag config.
gtag('event', 'purchase', {
  "send_to": "GA4",
  "transaction_id": "24.031608523954162",
  "affiliation": "Google online store",
  "currency": "USD",
  "shipping": 7.50,
  "tax": 1.80,
  "value": 33.30,
  "items": [
    {
      "item_id": "P12345",
      "item_name": "Android Warhol T-Shirt",
      "item_brand": "Google",
      "item_category": "Apparel/T-Shirts",
      "item_variant": "Black",
      "quantity": 2,
      "price": 12.00
    }
  ],
});