GTM - E-commerce Product Page View Event

Google Analytics is the most important data layer among the event types (ec:action) that sends information to the E-commerce > Product Performance reports, specifically the detail event, which represents a user clicking on a listed product (productClick) and then viewing the product page containing product details, and is directly associated with the productClick event.

Enhanced Ecommerce “detail” Event

The detail event can provide data about a product viewed through a PageView (hitType: pageview, ec:action: detail, event: gtm.js), including the _id_, _name_, _price_, _brand_, _category_, and _position_ (linked to a list) fields, and uses Product Name (name) as the primary dimension, similar to other product events.

The detailed specifications for the detail event are as follows:

UA:

window.dataLayer = window.dataLayer || [];

// UA
dataLayer.push({
  'ecommerce': {
    'currencyCode': '[currency-unit]', // Currency Unit (e.g. TRY, USD, EUR) / Type: string (optional)
    'detail': {
      'products': [{
        'id': '[unique-product-id]', // Unique Product ID / Type: string (required)
        'name': '[product-name]', // Product Name / Type: string (required)
        'price': '[product-price]', // Product Price / Type: numeric (required)
        'brand': '[product-brand]', // Product Brand / Type: string (optional)
        'category': '[product-category]', // Product Category / Type: string (optional)
        'variant': '[product-attribute]', // Product Attribute (e.g. color, pattern, etc.) / Type: string (optional)
        'position': '[product-list-position]' // Position in the product list / Type: numeric (optional)
      }]
    }
  }
});

GA4:

// GA4
dataLayer.push({
  'event': 'view_item',
  'ecommerce': {
    'items': [{
      'item_name': '[product-name]', // Product Name / Type: string (required / mandatory)
      'item_id': '[unique-product-id]', // Unique Product ID / Type: string (required / mandatory)
      'price': '[product-price]', // Product Price / Type: numeric
      'item_brand': '[product-brand]', // Product Brand / Type: string (optional)
      'item_category': '[product-category]', // Product Category / Type: string (optional)
      'item_category_2': '[product-category-2]', // Product Category (Sub-category) / Type: string (optional)
      'item_category_3': '[product-category-3]', // Product Category (Sub-category) / Type: string (optional)
      'item_category_4': '[product-category-4]', // Product Category (Sub-category) / Type: string (optional)
      'item_variant': '[product-attribute]', // Product Attribute (e.g. color, pattern, etc.) / Type: string (optional)
      'item_list_name': '[name-of-list-product-is-in]', // Name of the list product is in / Type: string (optional)
      'item_list_id': '[unique-list-id-product-is-in]', // Unique list ID product is in / Type: numeric (optional)
      'index': '[position-in-list]', // Position in the list / Type: numeric (optional)
      'quantity': '[quantity-added-to-cart]' // Quantity added to cart / Type: numeric (optional)
    }]
  }
});

Therefore, let’s create a product detail page that matches the detail content.

// UA
dataLayer.push({
  'ecommerce': {
    'detail': {
      'actionField': {'list': 'featured product'},
      'products': [{
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
   }
});

// GA4
dataLayer.push({
  'event': 'view_item',
  'ecommerce': {
    'items': [{
      'item_name': 'Donut Friday Scented T-Shirt',
      'item_id': '67890',
      'price': '33.75',
      'item_brand': 'Google',
      'item_category': 'Apparel',
      'item_category_2': 'Mens',
      'item_category_3': 'Shirts',
      'item_category_4': 'Tshirts',
      'item_variant': 'Black',
      'item_list_name': 'Search Results',
      'item_list_id': 'SR123',
      'index': 1,
      'quantity': '1'
    }]
  }
});

I mentioned earlier that this example is fired together with a pageView at the beginning of the page. Therefore, let’s use two different events together and also include a promotional image located on the product page. In the example, I’ve also expanded the product details with a list, product size, stock status, and user status.

// UA
dataLayer.push({
  'ecommerce': {
    'detail': {
      'actionField': {'list': 'featured product'},
      'products': [{
        'id': "9bdd2",
        'name': 'Compton T-Shirt',
        'price': '44.00',
        'brand': 'Compton',
        'category': 'T-Shirts',
        'position': 0,
        'dimension1': 'large',
        'dimension2': 'in stock',
        'dimension3': 'guest'
      }]
    },
    'promoView': {
      'promotions': [{
        'id': 'h2018',
        'name': 'halloween2018',
        'creative': 'product banner',
        'position': 'left sidebar'
      }]
    }
  }
});

// GA4
dataLayer.push({
  'event': 'view_item',
  'ecommerce': {
    'items': [{
      'item_name': 'Donut Friday Scented T-Shirt',
      'item_id': '67890',
      'price': '33.75',
      'item_brand': 'Google',
      'item_category': 'Apparel',
      'item_category_2': 'Mens',
      'item_category_3': 'Shirts',
      'item_category_4': 'Tshirts',
      'item_variant': 'Black',
      'item_list_name': 'Search Results',
      'item_list_id': 'SR123',
      'index': 1,
      'quantity': '1',
      'promotion_id': 'abc123',
      'promotion_name': 'summer_promo',
      'creative_name': 'instore_suummer',
      'creative_slot': '1',
      'location_id': 'hero_banner'
    }]
  }
});

Certainly, we can include fields such as the Add to Cart button on the product detail page and the cart page itself. Starting from the cart page, the checkout process begins, so I’ll address the checkout process under separate events. However, I recommend that you track and evaluate elements such as product details, size/measurements, product ratings and reviews through your tracking events and analyze them in e-commerce reports. This way, you’ll be able to identify, address, and improve any positive or negative factors affecting the checkout process, thereby providing a better shopping experience for potential customers.

For additional details and related events related to enhanced e-commerce, please refer to Enhanced Ecommerce, Google Analytics Goals and Funnel Operations, Google Tag Manager dataLayer and E-Commerce Events, Google Analytics E-Commerce Reports and Event Setups, and the Google Analytics / GTM UA¹ and GA4² help pages.

*[GTM]: Google Tag Manager
*[UA]: Universal Analytics
*[GA4]: Google Analytics 4

Footnotes

1. Enhanced Ecommerce (UA) Developer Guide ↩
2. Ecommerce (GA4) Developer Guide ↩