WooCommerce获取加购商品详情并触发Google Analytics加购事件

• 你使用的woocommerce_add_to_cart是服务端触发的钩子，执行时不会直接将脚本注入前端页面，尤其是站点开启ajax加购时，服务端输出的脚本不会被前端接收执行
• 原代码中直接输出数组类型的$variation、$cart_item_data会触发PHP数组转字符串的警告，导致JS语法异常，进一步阻止代码运行

将以下代码替换你之前写入functions.php的代码，即可同时兼容ajax加购、普通跳转加购两种场景，正常在控制台输出加购商品数据，同时自动触发Google Analytics的加购事件：

// 服务端记录非ajax场景的加购数据到临时会话
add_action('woocommerce_add_to_cart', 'save_add_to_cart_data_to_session', 10, 6);
function save_add_to_cart_data_to_session($cart_item_key, $product_id, $quantity, $variation_id, $variation, $cart_item_data) {
    if (!wp_doing_ajax()) {
        WC()->session->set('custom_add_to_cart_data', [
            'product_id' => $product_id,
            'quantity' => $quantity,
            'variation_id' => $variation_id,
            'variation' => $variation,
            'cart_item_data' => $cart_item_data
        ]);
    }
}

// 前端输出加购事件处理脚本
add_action('wp_footer', 'render_add_to_cart_gtag_script');
function render_add_to_cart_gtag_script() {
    // 处理非ajax加购场景的事件触发
    $add_cart_data = WC()->session->get('custom_add_to_cart_data');
    if ($add_cart_data) {
        // 清除会话数据避免重复触发
        WC()->session->__unset('custom_add_to_cart_data');
        // 转义输出防止语法错误
        $product_id = esc_js($add_cart_data['product_id']);
        $quantity = esc_js($add_cart_data['quantity']);
        $variation_id = esc_js($add_cart_data['variation_id']);
        $variation = wp_json_encode($add_cart_data['variation']);
        $cart_item_data = wp_json_encode($add_cart_data['cart_item_data']);
        ?>
        <script>
            // 调试输出
            console.log("Product ID <?php echo $product_id; ?>");
            console.log("Quantity <?php echo $quantity; ?>");
            console.log("Variation ID <?php echo $variation_id; ?>");
            console.log("Variation", <?php echo $variation; ?>);
            console.log("Cart Data", <?php echo $cart_item_data; ?>);
            
            // 触发GA加购事件
            gtag('event', 'add_to_cart', {
                "items": [
                    {
                        "id": "<?php echo $product_id; ?>"
                    }
                ]
            });
        </script>
        <?php
    }
    ?>
    <!-- 处理ajax加购场景的事件触发 -->
    <script>
    jQuery(document).on('added_to_cart', function(e, fragments, cart_hash, button) {
        const productId = button.data('product_id');
        const quantity = button.data('quantity') || 1;
        // 调试输出
        console.log("Product ID " + productId);
        console.log("Quantity " + quantity);
        // 其他商品属性可从button的data属性中自行提取
        
        // 触发GA加购事件
        gtag('event', 'add_to_cart', {
            "items": [
                {
                    "id": productId
                }
            ]
        });
    });
    </script>
    <?php
}

如果需要传入更多商品属性（如SKU、商品名称、价格等）到GA事件中，可以通过wc_get_product($product_id)获取产品对象后读取对应字段，填入gtag的items数组即可。

内容的提问来源于stack exchange，提问作者Sunny Alhat