Ecommerce Tracking

There are two main types of of ecommerce implementation methods:

Standard ecommerce reports in Google Analytics allow you to analyze purchase activity on your site or app. You can see product and transaction information, average order value, ecommerce conversion rate, time to purchase, and other data.

Enhanced ecommerce adds functionality by allowing you to see when customers have added items to their shopping carts, when they have started the checkout process, and when they have completed a purchase. You can also use Enhanced Ecommerce to identify segments of customers who are falling out of the shopping funnel.

Both methods of ecommerce tracking can be implemented with Google Tag Manager:

Standard Ecommerce

To set up a standard Google Analytics ecommerce tag:

  1. Add a tag of type Universal Analytics; track type of Transaction.
  2. Begin configuring your tag with the required fields, such as Tracking ID.
  3. Specify when the tag should be triggered.

All the transaction information should be passed via the data layer, with the variable names shown below:

Transaction Data

Variable Name Description Type
transactionId (Required) Unique transaction identifier string
transactionAffiliation (Optional) Partner or store string
transactionTotal (Required) Total value of the transaction numeric
transactionShipping (Optional) Shipping charge for the transaction numeric
transactionTax (Optional) Tax amount for the transaction numeric
transactionProducts (Optional) List of items purchased in the transaction array of product objects

Product Data

Variable Name Description Type
name (Required) Product name string
sku (Required) Product SKU string
category (Optional) Product category string
price (Required) Unit price numeric
quantity (Required) Number of items numeric

Here's an example of how the data layer code might be implemented in JavaScript:


<script>
window.dataLayer = window.dataLayer || []
dataLayer.push({
   'transactionId': '1234',
   'transactionAffiliation': 'Acme Clothing',
   'transactionTotal': 38.26,
   'transactionTax': 1.29,
   'transactionShipping': 5,
   'transactionProducts': [{
       'sku': 'DD44',
       'name': 'T-Shirt',
       'category': 'Apparel',
       'price': 11.99,
       'quantity': 1
   },{
       'sku': 'AA1243544',
       'name': 'Socks',
       'category': 'Apparel',
       'price': 9.99,
       'quantity': 2
   }]
});
</script>
	

Place this code above the Google Tag Manager container snippet so that the data layer is ready when Google Tag Manager fires the Google Analytics tag asynchronously.

If for some reason you can’t place the ecommerce data above the Google Tag Manager container snippet, you can alternatively either:

  • Have the tag triggered based on a custom event farther down the page (e.g. by combining the data and the event push as described in the developer documentation), or
  • Have the tag triggered once the page (DOM) is fully loaded, with the built-in trigger type “DOM Ready”:

Additional information

Enhanced Ecommerce

There are two methods for implementing Enhanced Ecommerce using Google Tag Manager:

  • Data Layer: The preferred method; push the ecommerce data onto the data layer from your code.
  • Custom JavaScript: Create a variable of type Custom JavaScript in Google Tag Manager. This variable should return an object with the information that you would otherwise push onto the data layer.

Important: There are several specific types of information that are available to work with when implementing Enhanced Ecommerce. Please refer to the developer documentation for a complete list of data types that are supported.

Using the Data Layer

  1. In your code, push the ecommerce information onto a data layer object called "ecommerce". Refer to the developer documentation for details on implementing a data layer.
  2. Add a tag of type Universal Analytics; track type of Page View or Event.
  3. On the tag, select the Enable Enhanced Ecommerce Features checkbox under More Settings. Checking the box displays new fields.
  4. Select Use data layer.

Using a Variable

  1. Create a new variable of type Custom JavaScript and give it a name in the Variable Name field. This variable must return an object containing the ecommerce object, similar to the code example below:
    
    function() {
     var ecommerceData = {
       'ecommerce' : {
         currencyCode : 'EUR',
         // add additional parameters as needed...
       }
     };
     return ecommerceData;
    }
    			

    In this variable, use the same syntax that would be used to push this data onto the data layer. Refer to the developer documentation for more information.
  2. Add a tag of type Universal Analytics; track type of Page View or Event.
  3. On the tag, select the Enable Enhanced Ecommerce Features checkbox under More Settings. Checking the box displays new fields.
  4. Add the name of the custom JavaScript variable that you created to the Read data from variable field.

Additional information

Was this article helpful?