GA4 Ecommerce Tracking on Yola | OpsBlu Docs

GA4 Ecommerce Tracking on Yola

How to implement GA4 ecommerce tracking on Yola. Covers product views, add-to-cart, checkout steps, purchase events, and data layer implementation.

For general GA4 ecommerce concepts, see Google Analytics Ecommerce

GA4 Ecommerce Events

GA4 ecommerce tracking captures the full shopping funnel on your Yola store. Implement these events by pushing them to the data layer, then forward to GA4 via GTM.

Product View

dataLayer.push({ ecommerce: null });  // Clear previous data
dataLayer.push({
  'event': 'view_item',
  'ecommerce': {
    'currency': 'USD',
    'value': 29.99,
    'items': [{
      'item_id': 'SKU-123',
      'item_name': 'Product Name',
      'item_category': 'Category',
      'price': 29.99,
      'quantity': 1
    }]
  }
});

Add to Cart

dataLayer.push({ ecommerce: null });
dataLayer.push({
  'event': 'add_to_cart',
  'ecommerce': {
    'currency': 'USD',
    'value': 29.99,
    'items': [{
      'item_id': 'SKU-123',
      'item_name': 'Product Name',
      'price': 29.99,
      'quantity': 1
    }]
  }
});

Purchase

dataLayer.push({ ecommerce: null });
dataLayer.push({
  'event': 'purchase',
  'ecommerce': {
    'transaction_id': 'ORDER-456',
    'value': 59.98,
    'tax': 5.00,
    'shipping': 4.99,
    'currency': 'USD',
    'items': [{
      'item_id': 'SKU-123',
      'item_name': 'Product Name',
      'price': 29.99,
      'quantity': 2
    }]
  }
});

Important: Always push { ecommerce: null } before each ecommerce event to prevent stale data from a previous event leaking into the next one.

Full Ecommerce Event Reference

Event Funnel Stage When to Fire
view_item_list Discovery Category/search results page
select_item Discovery Click on a product in a list
view_item Consideration Product detail page
add_to_cart Intent Add to cart action
remove_from_cart Intent Remove from cart action
view_cart Intent Cart page view
begin_checkout Conversion Checkout page load
add_shipping_info Conversion Shipping step completed
add_payment_info Conversion Payment step completed
purchase Conversion Order confirmation
refund Post-purchase Order refunded

GTM Configuration

In GTM, create a GA4 Event tag for each ecommerce event:

  1. Tag Type: Google Analytics: GA4 Event
  2. Event Name: Use the built-in {{Event}} variable (it automatically reads the event key from data layer pushes)
  3. Ecommerce: Check Send Ecommerce data → Data source: Data Layer
  4. Trigger: Custom Event matching each event name (view_item, add_to_cart, purchase, etc.)

Next Steps

返回顶部