Track All WooCommerce Events with Google Tag Manager (GA4)

Here’s a complete list of Google Analytics 4 (GA4) ecommerce events with examples of how you can implement custom dataLayer pushes in WooCommerce using Google Tag Manager (GTM).

FULL LIST OF GA4 ECOMMERCE EVENTS

Event Name	Description
view_item_list	Viewing a product list (e.g., category page)
select_item	Selecting a product from a list
view_item	Viewing a product detail
add_to_cart	Adding a product to cart
remove_from_cart	Removing a product from cart
view_cart	Viewing the cart page
begin_checkout	Starting checkout
add_shipping_info	Selecting shipping
add_payment_info	Selecting payment method
purchase	Completing a purchase
refund	Processing a refund

HOW TO IMPLEMENT EACH EVENT IN WOOCOMMERCE

1. view_item_list (e.g., category page)

add_action('woocommerce_before_shop_loop', function() {
    // You can collect items via global product loop
    ?>
    <script>
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: "view_item_list",
        ecommerce: {
          item_list_id: "category_id",
          item_list_name: "Category Name",
          items: [
            // Populate product items dynamically
          ]
        }
      });
    </script>
    <?php
});

2. select_item (when user clicks a product in list)

// On click of product link (JS or GTM click trigger)
window.dataLayer.push({
  event: "select_item",
  ecommerce: {
    item_list_name: "Category Name",
    items: [{
      item_name: "Product Name",
      item_id: "12345",
      price: 19.99
    }]
  }
});

3. view_item (Product detail page)

add_action('woocommerce_before_single_product', function() {
    global $product;
    ?>
    <script>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: "view_item",
      ecommerce: {
        items: [{
          item_name: "<?php echo esc_js($product->get_name()); ?>",
          item_id: "<?php echo esc_js($product->get_sku()); ?>",
          price: <?php echo esc_js($product->get_price()); ?>
        }]
      }
    });
    </script>
    <?php
});

4. add_to_cart (AJAX)

jQuery(document.body).on('added_to_cart', function(event, fragments, cart_hash, $button) {
    var productId = $button.data('product_id');
    var productName = $button.data('product_name');
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: "add_to_cart",
      ecommerce: {
        items: [{
          item_name: productName,
          item_id: productId,
          quantity: 1
        }]
      }
    });
});

5. remove_from_cart

jQuery(document).on('click', '.remove', function() {
    var productId = jQuery(this).data('product_id'); // Use custom data if needed
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: "remove_from_cart",
      ecommerce: {
        items: [{
          item_id: productId,
          quantity: 1
        }]
      }
    });
});

6. view_cart (cart page)

add_action('woocommerce_before_cart', function() {
    $items = [];
    foreach (WC()->cart->get_cart() as $cart_item) {
        $product = $cart_item['data'];
        $items[] = [
            'item_name' => $product->get_name(),
            'item_id' => $product->get_sku(),
            'price' => $product->get_price(),
            'quantity' => $cart_item['quantity']
        ];
    }

    ?>
    <script>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: "view_cart",
      ecommerce: {
        items: <?php echo json_encode($items); ?>
      }
    });
    </script>
    <?php
});

7. begin_checkout (checkout page)

add_action('woocommerce_before_checkout_form', function() {
    $items = [];
    foreach (WC()->cart->get_cart() as $cart_item) {
        $product = $cart_item['data'];
        $items[] = [
            'item_name' => $product->get_name(),
            'item_id' => $product->get_sku(),
            'price' => $product->get_price(),
            'quantity' => $cart_item['quantity']
        ];
    }

    ?>
    <script>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: "begin_checkout",
      ecommerce: {
        items: <?php echo json_encode($items); ?>
      }
    });
    </script>
    <?php
});

8. add_shipping_info

add_action('woocommerce_review_order_before_payment', function() {
    ?>
    <script>
    jQuery(document).on('change', 'input[name^="shipping_method"]', function() {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            event: "add_shipping_info",
            ecommerce: {
                shipping_tier: jQuery(this).val()
            }
        });
    });
    </script>
    <?php
});

9. add_payment_info

add_action('woocommerce_review_order_before_submit', function() {
    ?>
    <script>
    jQuery(document).on('change', 'input[name="payment_method"]', function() {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            event: "add_payment_info",
            ecommerce: {
                payment_type: jQuery(this).val()
            }
        });
    });
    </script>
    <?php
});

10. purchase (order confirmation)

add_action('wp_footer', 'custom_gtm_datalayer_purchase', 100);
function custom_gtm_datalayer_purchase() {
    if (!is_order_received_page()) return;
    $order_id = get_query_var('order-received');
    $order = wc_get_order($order_id);
    if (!$order) return;

    $items = [];
    foreach ($order->get_items() as $item) {
        $product = $item->get_product();
        $items[] = [
            'item_name' => $item->get_name(),
            'item_id' => $product->get_sku(),
            'price' => $order->get_line_total($item, true, true) / $item->get_quantity(),
            'quantity' => $item->get_quantity(),
        ];
    }

    ?>
    <script>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        event: 'purchase',
        ecommerce: {
            transaction_id: '<?php echo $order->get_order_number(); ?>',
            value: <?php echo $order->get_total(); ?>,
            currency: '<?php echo $order->get_currency(); ?>',
            items: <?php echo json_encode($items); ?>
        }
    });
    </script>
    <?php
}

Testing

Use GTM Preview mode

Use Google Analytics DebugView (GA4)

Use Chrome Developer Tools → Console → dataLayer

If have any problem in integration to help contact us