GA4 ecommerce (analytics.js - Standard ecommerce): Send GA4 ecommerce events

This guide describes how to migrate an existing Standard ecommerce implementation for analytics.js Universal Analytics to use Google Analytics 4 ecommerce events.

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

Outcome

The outcome of following this guide is that your new Google Analytics 4 implementation will send GA4 ecommerce events to a new GA4 property and an existing Universal Analytics property. The existing Universal Analytics property will receive GA4 ecommerce data but reports will be unchanged.

This are two phases of migration:

Before you begin

  1. Confirm that the following describes your current implementation:

    • You are using a Universal Analytics property.
      • If your property has a Tracking ID then it's Universal Analytics.
    • Your site uses the analytics.js library to send ecommerce events.

  2. Review the migration options for ecommerce implementations to learn about the trade-offs of each option. Confirm that you do indeed want to follow this guide to use Google Analytics 4 ecommerce events for your existing Universal Analytics implementation.

  3. Review the Event compatibility reference to learn how the GA4 purchase event is translated when sent to a UA property.

Trade-offs and considerations

Review and consider the information below to fully understand the implications of using Google Analytics 4 ecommerce events with your Universal Analytics ecommerce implementation.

Pros Cons
  • View ecommerce data in both GA4 and Universal Analytics reports.
  • Migrating to the GA4 purchase event will provide complete UA ecommerce reports.
  • Additional work to migrate from analytics.js to gtag.js. It's recommended you migrate all custom measurement from analytics.js to gtag.js (e.g. events, pageviews, timing, etc).

Implementation

1. Migrate UA measurement from analytics.js to gtag.js

To send GA4 ecommerce events requires you to migrate from analytics.js to gtag.js, including any custom measurement.

Generally, the steps to complete the migration will include the following:

  1. Remove the analytics.js snippet.
  2. Install the Google tag (gtag.js) and configure with the Tracking ID of your UA property.
  3. Migrate your custom measurement code from analytics.js to gtag.js. The sections below describe how to migrate a standard ecommerce transaction. See Measurement migration for general help on migrating other measurement scenarios.

Before: analytics.js tag

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');    // Universal Analytics property.
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

After: Google tag (gtag.js)

<!-- 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.
</script>

2. Update your ecommerce implementation to send GA4 events

Update your existing ecommerce implementation to migrate from using Universal Analytics ecommerce events to Google Analytics 4 events. Once you've completed this step, your Universal Analytics property will be receiving a GA4 purchase event. Review the Trade-offs and considerations to understand the implications of this update.

The example below illustrates how to migrate an analytics.js standard ecommerce transaction event to an equivalent GA4 ecommerce purchase event, which is compatible with Universal Analytics.

Before: UA standard ecommerce transaction (analytics.js)

The following example shows an analytics.js standard ecommerce implementation for a transaction with 2 items:

// Add the transaction.
ga('ecommerce:addTransaction', {
  id: '1234',     // Transaction ID.
  affiliation: 'Google Store',
  revenue: '29.97',
  shipping: '5.25',
  tax: '2.42'
});

// Add the items belonging to the transaction.
ga('ecommerce:addItem', {
  id: '1234',     // Transaction ID.
  name: 'Android Warhol T-Shirt',
  sku: 'P12345',  // Item ID.
  category: 'Apparel/T-Shirts',
  price: '12.99',
  quantity: '2'
});
ga('ecommerce:addItem', {
  id: '1234',     // Transaction ID.
  name: 'Flame challenge T-Shirt',
  sku: 'P67890',  // Item ID.
  category: 'Apparel/T-Shirts',
  price: '3.99',
  quantity: '1'
});
ga('ecommerce:send');

After: GA4 ecommerce purchase (gtag.js)

When migrating an analytics.js transaction event to a GA4 purchase event, the key differences are:

  • GA4 has a single purchase event that includes all details and items related to the transaction. analytics.js executes multiple ga() ecommerce commands to capture the same information.
  • GA4 has a single transaction_id field for the entire event. analytics.js requires the Transaction ID to be included with each item.
  • GA4 has multiple item category fields. analytics.js uses a single category field with a / delimiter to describe hierarchies. However, GA4 events with multiple item category fields will work for your UA property because of Category parameter translation.
 gtag('event', 'purchase', {
   currency: 'USD',
   transaction_id: '1234',    // Transaction ID.
   value: 29.97,
   affiliation: 'Google Store',
   shipping: 5.25,
   tax: 2.42,
   items: [
    {
      item_id: 'P12345',     // Item ID.
      item_name: 'Android Warhol T-Shirt',
      item_category: 'Apparel',
      item_category2: 'T-Shirts',
      price: 12.99,
      quantity: 2
    },
    {
      item_id: 'P67890',    // Item ID.
      item_name: 'Flame challenge T-Shirt',
      item_category: 'Apparel',
      item_category2: 'T-Shirts',
      price: 3.99,
      quantity: 1
    }
  ]
});

3. Create and configure a new GA4 property

Once you've updated your ecommerce implementation to send GA4 ecommerce events, complete either of the following options to start sending data to a new Google Analytics 4 property.

Option 1: Use the GA4 Setup Assistant and enable connected site tags

The GA4 Setup Assistant will automatically create a new GA4 property and copy the following settings from your Universal Analytics property: property name, website URL, timezone, and currency settings. It can also enable the connected site tag feature to reuse your existing Universal Analytics gtag.js implementation to load your new GA4 property.

Follow the steps described in GA4 Setup Assistant to create and configure a new Google Analytics 4 property. Ensure you check the Enable data collection using your existing tags option to use the connected site tag feature.

Option 2: Update your gtag.js snippet

  1. Create a new Google Analytics 4 property.
    • Use the GA4 Setup Assistant to add a Google Analytics 4 property. However, uncheck the Enable data collection using your existing tags option when prompted during setup. Alternatively, create a Google Analytics 4 property without the GA4 Setup Assistant. The advantage of using the assistant is that it will copy some basic settings from your Universal Analytics property.
  2. Find the tag ID for the Google Analytics 4 property.
  3. Add the Google Analytics 4 property to your existing gtag.js snippet using the config command with the tag ID.

The following is an example gtag.js snippet that has configured a Universal Analytics and Google Analytics 4 property.

<!-- 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');  // Google Analytics 4 property.
</script>

4. (Optional) Measure additional ecommerce events

To take full advantage of GA4 ecommerce reporting, implement additional GA4 ecommerce events. To learn more see Google Analytics 4 Ecommerce.

If you use the default gtag.js snippet configuration, GA4 events will be sent to both your UA and GA4 properties. GA4 events sent to your UA property will be translated as defined in the Event compatibility reference. If you prefer a different behavior, you can use the Group and route data functionality of gtag.js to control which events are sent to your UA and GA4 property. For example, you can send the purchase event to both your UA and GA4 property, but only send other GA4 ecommerce events to your GA4 property.