Google Analytics 4 Event Tracking

This document details the custom Google Analytics 4 (GA4) events implemented in the Globber theme. These events are tracked via the dataLayer and handled by Google Tag Manager.

Overview

The tracking implementation is located in src/js/google-analytics-tracking.js. It listens for specific user interactions and WooCommerce hooks to push event data to the dataLayer.

Events

view_item_list

Triggered when a user views a list of products (e.g., Shop page, Category page, Search results). This event aggregates all product impressions on the page.

• Trigger: wp_footer hook on pages with product lists.
• Data Layer Push:

{
  event: 'view_item_list',
  ecommerce: {
    items: [
      {
        item_id: 'SKU123',
        item_name: 'Product A',
        item_list_name: 'Shop', // or 'Category Name', 'Search Results'
        index: 1,
        // ... other item properties
      },
      {
        item_id: 'SKU456',
        item_name: 'Product B',
        item_list_name: 'Shop',
        index: 2,
        // ...
      }
    ]
  }
}

select_item

Triggered when a user clicks on a product link within a product loop or card (e.g., on a category page or related products section).

• Trigger: Click on .product-card__link or .woocommerce-LoopProduct-link.
• Data Layer Push:

{
  event: 'select_item',
  ecommerce: {
    currency: 'USD',
    items: [
      {
        item_id: 'SKU123',
        item_name: 'Product Name',
        quantity: 1
      }
    ]
  }
}

view_item

Triggered when a user views a single product page.

• Trigger: Page load on Single Product templates.
• Data Layer Push:

{
  event: 'view_item',
  ecommerce: {
    currency: 'USD',
    value: 129.99,
    items: [
      {
        item_id: 'SKU123',
        item_name: 'Product Name',
        item_brand: 'Globber',
        item_category: 'Scooters',
        price: 129.99,
        quantity: 1
      }
    ]
  }
}

add_to_wishlist

Triggered when a user adds an item to their wishlist. This relies on the "Wishlist for WooCommerce" plugin events.

• Trigger: alg_wc_wl_toggle_wl_item event (when adding, not removing).
• Data Layer Push:

{
  event: 'add_to_wishlist',
  ecommerce: {
    currency: 'USD',
    items: [
      {
        item_id: 'SKU123',
        item_name: 'Product Name',
        item_variant: 'Blue', // If available
        price: 129.99
      }
    ]
  }
}

add_to_cart

Triggered when a user adds a product to their cart. This supports both simple and variable products.

• Trigger: added_to_cart jQuery event (WooCommerce).
• Data Layer Push:

{
  event: 'add_to_cart',
  ecommerce: {
    currency: 'USD', // Dynamic currency code
    value: 129.99,   // Total value (price * quantity)
    items: [
      {
        item_id: 'SKU123',       // Product SKU or ID
        item_name: 'Product Name',
        item_brand: 'Globber',
        item_category: 'Scooters',
        item_variant: 'Red / Large', // If variable product
        price: 129.99,
        quantity: 1,
        affiliation: 'globber.com'
      }
    ]
  }
}

view_cart

Triggered when the main cart page loads.

• Trigger: window.load event on pages with the woocommerce-cart body class.
• Data Layer Push:

{
  event: 'view_cart',
  ecommerce: {
    currency: 'USD',
    value: 250.00, // Total cart value
    items: [
      // Array of all items in the cart
      {
        item_id: 'SKU123',
        item_name: 'Product A',
        price: 100.00,
        quantity: 1
      },
      // ...
    ]
  }
}

remove_from_cart

Triggered when a user removes an item from the cart, either via the mini-cart or the main cart page.

• Trigger: Click on .remove_from_cart_button.
• Data Layer Push:

{
  event: 'remove_from_cart',
  ecommerce: {
    currency: 'USD',
    value: 129.99, // Value of removed items
    items: [
      {
        item_id: 'SKU123',
        item_name: 'Product Name',
        price: 129.99,
        quantity: 1
      }
    ]
  }
}

begin_checkout

Triggered when a user clicks the checkout button to proceed from the cart or mini-cart to the checkout page.

• Trigger: Click on .checkout-button.
• Data Layer Push:

{
  event: 'begin_checkout',
  ecommerce: {
    currency: 'USD',
    value: 250.00, // Total cart value
    items: [
      // Array of all items currently in the cart
      {
        item_id: 'SKU123',
        item_name: 'Product A',
        price: 100.00,
        quantity: 1
        // ... other item properties
      },
      {
        item_id: 'SKU456',
        item_name: 'Product B',
        price: 150.00,
        quantity: 1
      }
    ]
  }
}

purchase

Triggered when a user successfully completes an order.

• Trigger: wp_head hook on the Order Received (Thank You) page.
• Data Layer Push:

{
  event: 'purchase',
  ecommerce: {
    transaction_id: '12345',
    affiliation: 'Globber',
    value: 250.00, // Total revenue
    tax: 20.00,
    shipping: 10.00,
    currency: 'USD',
    coupon: 'SUMMER2025', // If applied
    items: [
      {
        item_id: 'SKU123',
        item_name: 'Product A',
        price: 100.00,
        quantity: 1,
        coupon: '' // Item-level coupon if applicable
      },
      // ... other purchased items
    ]
  }
}