מדידת add_to_cart ב-WooCommerce (ולמה אין פתרון אחד לכולם)

// DevTools -> Console
jQuery(document.body).on('added_to_cart', function () {
  console.log('event fired');
});

/**
 * 1) Attach product data to the AJAX add-to-cart buttons in product loops
 *    (shop / category), so the browser can read it when the item is added.
 *    We attach the data to the button itself so that, on the added_to_cart
 *    event, we can read it WITHOUT making another AJAX request.
 */
add_filter( 'woocommerce_loop_add_to_cart_args', 'doffice_ga4_atc_button_data', 10, 2 );

function doffice_ga4_atc_button_data( $args, $product ) {
    $categories = wp_get_post_terms( $product->get_id(), 'product_cat', array( 'fields' => 'names' ) );

    $args['attributes']['data-ga4-id']       = $product->get_sku() ? $product->get_sku() : $product->get_id();
    $args['attributes']['data-ga4-name']     = $product->get_name();
    // The price the customer SAW at click time. Usually the right value for
    // add_to_cart. If the price changes only AFTER adding (coupons, dynamic
    // pricing, currency switchers), read the final price from the cart instead.
    $args['attributes']['data-ga4-price']    = wc_get_price_to_display( $product );
    $args['attributes']['data-ga4-category'] = ! empty( $categories ) ? $categories[0] : '';

    return $args;
}

/**
 * 2) When WooCommerce confirms the AJAX add (jQuery "added_to_cart" event),
 *    push a GA4 "add_to_cart" event to the dataLayer.
 */
add_action( 'wp_enqueue_scripts', 'doffice_ga4_atc_script' );

function doffice_ga4_atc_script() {
    if ( is_admin() || ! function_exists( 'WC' ) ) {
        return;
    }

    wp_register_script( 'doffice-ga4-atc', '', array( 'jquery' ), null, true );
    wp_enqueue_script( 'doffice-ga4-atc' );
    // Despite the name, wp_localize_script() is used here to pass data from PHP
    // to JavaScript (the store currency), NOT for translation.
    wp_localize_script( 'doffice-ga4-atc', 'dofficeGA4', array(
        'currency' => get_woocommerce_currency(),
    ) );

    $js = <<<'JS'
window.dataLayer = window.dataLayer || [];
jQuery(function ($) {
  // Fires after a SUCCESSFUL AJAX add-to-cart from a product loop button.
  $(document.body).on('added_to_cart', function (e, fragments, cart_hash, $button) {
    if (!$button || !$button.data('ga4-name')) return;
    var qty   = parseInt($button.data('quantity'), 10) || 1;
    var price = parseFloat($button.data('ga4-price')) || 0;
    window.dataLayer.push({ ecommerce: null });
    window.dataLayer.push({
      event: 'add_to_cart',
      ecommerce: {
        currency: dofficeGA4.currency,
        // add_to_cart represents the value of THIS action,
        // NOT the current total cart value.
        value: Math.round(price * qty * 100) / 100,
        items: [{
          item_id: String($button.data('ga4-id')),
          item_name: $button.data('ga4-name'),
          item_category: $button.data('ga4-category') || '',
          price: price,
          quantity: qty
        }]
      }
    });
  });
});
JS;

    wp_add_inline_script( 'doffice-ga4-atc', $js );
}

window.dataLayer.filter(e => e.event === "add_to_cart")

// Expected after adding a product from the shop / category page:
[
  {
    event: "add_to_cart",
    ecommerce: {
      currency: "ILS",
      value: 349.90,
      items: [
        { item_id: "SKU-1", item_name: "...", item_category: "...", price: 349.90, quantity: 1 }
      ]
    }
  }
]