How to instrument ecommerce for both Web and App + Web properties

This article compares ecommerce tag for a Universal Analytics Web property with an equivalent tag for an App + Web property. To dual-tag (i.e. populate Web and App + Web properties at the same time), include both the tags for your Web property and your App + Web 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 Web 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 Web 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 Web property, you do not need to add another tag. Your existing ecommerce instrumentation will still work for your App + Web property. To tag your site for both Universal Analytics and App + Web, add the App + Web 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 App + Web ID
</script>

Equivalent ecommerce instrumentation for App + Web

Here is the translation of the above for App + Web for gtag.js and for Google Tag Manager

Equivalent App + Web transaction in gtag.js

The analytics.js tags (both standard ecommerce and Enhanced Ecommerce) above map to the following gtag.js instrumentation for an App + Web 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 App + Web ecommerce developer guide for gtag.js.

If you use Google Tag Manager

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

  1. Click Tags > New.
  2. Click Tag Configuration.
  3. Select Google Analytics: App + Web 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 App + Web ecommerce developer guide for Google Tag Manager.