How to instrument ecommerce for both Universal Analytics and Google Analytics 4 properties

This article compares an ecommerce tag for a Universal Analytics (UA) property with an equivalent tag for a Google Analytics 4 (GA4) property. To dual-tag (i.e. populate UA and GA4 properties at the same time), include both the tags for your UA property and your GA4 property.

The basic page tag is required in order for ecommerce tags to function.

Review your existing instrumentation

Review your existing ecommerce instrumentation setup which is probably based on one of these three scenarios:

  • analytics.js with standard ecommerce
  • analytics.js with Enhanced Ecommerce
  • gtag.js with standard or Enhanced Ecommerce

If you use analytics.js with standard ecommerce

The following analytics.js tag shows a hardcoded illustration of a standard (non-Enhanced Ecommerce) transaction. If you use analytics.js and non-Enhanced Ecommerce in your UA property, an existing transaction will look similar to the code below.

// Start Google Analytics analytics.js ecommerce transaction
ga('ecommerce:addTransaction', {
  'id': '1234',    // Note: In gtag.js below, ‘id’ maps to “transaction_id”
  'affiliation': 'Google online store',
  'revenue': '23.07',
  'shipping': '0',
  'tax': '1.24'
});
ga('ecommerce:addItem', {
  'id': '1234',    // Note: In gtag.js below, “items”:[{“id”}] is the item SKU, not the transaction ID
  'name': 'Android Warhol T-Shirt',
  'sku': 'P12345', // In gtag.js below, ‘sku’ maps to “items”:[{“id”}]
  'category': 'Apparel/T-Shirts',
  'price': '2.0',
  'quantity': '2'
});
ga('ecommerce:addItem', {
  'id': '1234',
  'name': 'Flame challenge TShirt',
  'sku': 'P67890',
  'category': 'Apparel/T-Shirts',
  'price': '3.0',
  'quantity': '1'
});
ga('ecommerce:send');

If you use analytics.js with Enhanced Ecommerce

The following analytics.js tag shows a hardcoded illustration of an Enhanced Ecommerce transaction. If you use analytics.js and Enhanced Ecommerce for your UA property, an existing transaction will look similar to the code below.

   ga('create', 'UA-XXXXX-Y', 'auto');
   ga('require', 'ec');
   ga('ec:addProduct', {
     'id': 'P12345',                   // SKU
     'name': 'Android Warhol T-Shirt',
     'category': 'Apparel/T-Shirts',
     'quantity': 2,
     'price': 2,
   });
    ga('ec:addProduct', {
      'id': 'P67890',                  // SKU
      'name': 'Flame Challenge TShirt',
      'category': 'Apparel/T-Shirts',
      'quantity': 1,
      'price': 3,
    });
     ga('ec:setAction', 'purchase', {
       'id': 'T12345',                  // Transaction id
      'affiliation': 'Google Store - Online',
      'revenue': 23.07,
       'tax': 1.24,
       'shipping': '0',
     });
     ga('send', 'pageview');

If you use gtag.js

If you use gtag.js for your UA property, you do not need to add another tag. Your existing ecommerce instrumentation will still work for your GA4 property. To tag your site for both UA and GA4, add the GA4 property to your existing gtag.js configuration:

<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');
  gtag('config', 'G-XXXXX'); // Added Google Analytics 4 ID
</script>

Equivalent ecommerce instrumentation for Google Analytics 4

Here is the translation of the above for GA4 for gtag.js and for Google Tag Manager

Equivalent Google Analytics 4 transaction in gtag.js

The analytics.js tags (both standard ecommerce and Enhanced Ecommerce) above map to the following gtag.js instrumentation for a GA4 property.

 gtag('event', 'purchase', {
  "transaction_id": "1234",
  "affiliation": "Google online store",
  "value": 23.07,
  "currency": "USD",
  "shipping": 0,
   "tax": 1.24,
  "items": [
    {
      "id": "P12345", // Note that this is the SKU, not the transaction ID
      "name": "Android Warhol T-Shirt",
      "category": "Apparel/T-Shirts",
      "quantity": 2,
      "price": '2.0'
    },
    {
      "id": "P67890", // Note that this is the SKU, not the transaction ID
      "name": "Flame challenge TShirt",
      "category": "Apparel/T-Shirts",
      "quantity": 1,
      "price": '3.0'
    }
  ]
});

To learn more about ecommerce instrumentation, read the GA4 ecommerce developer guide for gtag.js.

If you use Google Tag Manager

If you use Google Tag Manager for your UA property, add a Google Analytics GA4 Event tag and configure it to send ecommerce event data.

  1. Click Tags > New.
  2. Click Tag Configuration.
  3. Select Google Analytics: GA4 Event.
  4. For Configuration Tag, select the appropriate Configuration Tag.
  5. For Event Name, enter purchase.
  6. Expand the Event Parameters section and add parameter names and values for each parameter listed in the previous gtag.js example. In most cases you will want to use a Tag Manager variable to populate the values.
  7. Click Triggering and select appropriate events that would trigger your ecommerce event.
  8. Save the tag configuration and publish your container.

To learn more about ecommerce instrumentation, read the GA4 ecommerce developer guide for Google Tag Manager.