GTM - Ecommerce Purchase Journey Activity

Promotion (promoView and promoClick) and product (impressions, productClick, detail, addToCart, removeFromCart) events, we can now proceed to the payment steps.

The payment process begins upon viewing the cart and clicking the “Complete Payment” button/link. During this process, steps such as payment method (credit card, bank transfer, in-store payment, etc.), shipping address, billing address, shipping method (delivery, pickup from branch, download, etc.), and payment completion (Step1, Step2, …, Step5) take place, and the process concludes upon successful payment (confirmation/thank you page).

Enhanced Ecommerce “checkout” Event

The checkout event covers the entire journey from cart display (including promotional content, product list, payment method, and address details) up to the point of payment completion (funnel), and naturally includes all product interactions (such as removing items from cart) reflected in Google Analytics > Conversions > E-commerce > Sales Performance and Payment Behavior reports, providing a comprehensive data layer within these reports.

Detail layer details for UA are as follows:

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

// UA
  dataLayer.push({
    'event': 'checkout',
    'ecommerce': {
    'currencyCode': '[currency]', // Currency (e.g. TRY, USD, EUR) / Type: string (optional)
      'checkout': {
        'actionField': {'step': 1, 'option': 'Visa'},
        '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)
        'quantity': '[product-quantity]' // Product Quantity / Type: numeric (optional)
       }]
     }
   }
  });

Now let’s see how this content is handled in GA4.

// GA4
  dataLayer.push({
    'event': 'begin_checkout',
    '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-belonged-to]', // Name of the list the product belongs to / Type: string (optional)
      'item_list_id': '[unique-list-id-product-belonged-to]', // Unique list ID the product belongs to / Type: numeric (optional)
      'index': '[position-of-product-in-list]', // Position of the product in the list / Type: numeric (optional)
      'quantity': '[product-quantity]' // Quantity of products added to cart / Type: numeric (optional)
      }]
    }
  });

Under normal circumstances, payment and shipping information are collected from visitors on separate pages (e.g. /payment and /shipping). However, today, to enhance the shopping experience (checkout funnel), accordion sections, tabs, and collaborative frameworks (such as payment methods, wallets, etc.) allow these elements to be managed on a single page.

Therefore, when using the checkout data layer, you must also account for these transitions. Let’s demonstrate an example for both UA and GA4 that includes cart content:

// UA
  dataLayer.push({
    'event': 'checkout',
    'ecommerce': {
      'checkout': {
        'products': [{
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
       }]
     }
   }
  });

// GA4
  dataLayer.push({
    'event': 'begin_checkout',
    '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'
      }]
    }
  });

The code generated for UA includes the checkout event. For GA4, the event is defined as begin_checkout. For the funnel to be correctly constructed in UA, the fields (steps) should be managed together with Google Analytics > Account > Property > View > E-commerce Settings > E-commerce Setup > Conversion Funnel Steps. You can also refer to my article titled Google Analytics Goals and Funnel Operations for more details on this configuration.

If we only have product information in the cart and no additional details, there is no need to define an option. Remember that you can add up to five steps in the conversion funnel, and you must manage the conversion process within this limit. In GA4, option definitions are not required.

// UA
dataLayer.push({
  'event': 'checkout',
  'ecommerce': {
    'checkout': {
      'actionField': {
        'step': 1
      },
      'products': [{
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1
      }]
    }
  }
});

If we wish to start with selecting the payment method, we can pass the preferred payment option.

// UA
dataLayer.push({
  'ecommerce': {
    'checkout': {
      'actionField': {
        'step': 1,
        'option': 'Visa'
      }
    }
  }
});

For step 2, we’ll send the shipping details, expand the product content with promoView, and link our data layer to the ‘checkout’ event.

// UA
dataLayer.push({
  'event': 'checkout',
  'ecommerce': {
    'checkout': {
      'actionField': {
        'step': 2,
        'option': 'FedEx'
      },
      'products': [{
        'id': '7w9e0',
        'name': 'Newage T-Shirt',
        'price': '31.00',
        'brand': 'Masons',
        'category': 'T-Shirts',
        'variant': 'blue',
        'dimension1': 'M',
        'dimension2': 'pre-order',
        'dimension3': 'guest',
        'quantity': 1
      }]
    },
    'promoView': {
      'promotions': [{
        'id': 'bts',
        'name': 'Back To School',
        'creative': 'checkout',
        'position': 'right sidebar'
      }]
    }
  }
});

With these steps, we can measure at which stage of the checkout process users abandon the cart and proceed to the payment steps, optimize the conversion path, and re-engage users by offering various incentives and retargeting campaigns through email and messaging to complete the payment process.

For additional details and related events regarding 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 ↩