WooCommerce变体SKU追踪方法

在WooCommerce网站中，精准追踪变体产品SKU对于提升营销效果至关重要。本文针对默认情况下WooCommerce仅返回主产品SKU的问题，提出一种解决方案，即通过JavaScript动态获取用户选择的变体属性值，并将其与主产品SKU组合，形成唯一的变体标识符。该方法详细阐述了如何识别变体选择器，利用innerText或text()等方法获取选定值，并将其集成到Glami等营销像素的数据层中。通过本文的指导，电商运营者可以实现更精准的加购事件追踪，优化广告投放，提升营销ROI。此外，文章还强调了选择器识别的准确性、多变体属性的处理、变体价格的动态更新以及充分的测试验证等注意事项，确保数据追踪的准确性和可靠性。

1. 背景与挑战

在电子商务网站中集成营销像素（如Glami Pixel、Facebook Pixel、Google Analytics等）是数据追踪和广告优化的关键。对于标准产品，获取其SKU并将其发送到数据层通常很简单。然而，当涉及到WooCommerce的变体产品时，挑战随之而来。默认情况下，通过PHP获取产品SKU（$product->get_sku()）通常只会返回主产品的SKU，而不是用户当前选择的特定变体（例如，不同尺寸、颜色）的SKU。

例如，一个T恤有S、M、L三种尺寸，每种尺寸都有自己的独立SKU。当用户选择M码并点击“添加到购物车”时，营销像素需要获取M码的SKU，而不是T恤的主SKU。如果无法动态获取选定的变体SKU，营销数据将不准确，影响后续的广告归因和再营销效果。

2. 核心问题分析

提供的代码片段显示，在AddToCart事件中，item_ids字段使用了get_sku(); ?>。这段PHP代码在页面加载时执行一次，获取的是主产品的SKU，并且不会随着用户在前端选择不同变体而动态更新。因此，我们需要一种方法，在用户点击“添加到购物车”按钮时，能够实时捕获到当前选定的变体属性值。

3. 解决方案：动态获取变体属性

解决此问题的关键在于利用前端JavaScript来识别并获取用户选择的变体属性值。这通常涉及到以下步骤：

1. 识别变体选择器元素：在WooCommerce产品页面上，变体选择器（通常是下拉菜单或按钮组）在用户选择不同变体时，其关联的HTML元素会更新显示当前选定的值。我们需要找到这个显示当前选择值的HTML元素。
2. 获取选定值：使用JavaScript（或jQuery）获取该元素的文本内容（innerText或text()）。
3. 组合SKU：将获取到的变体属性值与主产品SKU结合，形成一个能唯一标识当前变体的字符串。

3.1 代码实现

以下是针对原始代码的修改，以实现动态获取选定变体SKU并将其集成到Glami像素数据层：

function pixel_tracker() {
    if( is_wc_endpoint_url('order-received') ) return;
    if( is_product() ){
?>

    <!-- Glami piXel -->
        <script>
        (function(f, a, s, h, i, o, n) {f['GlamiTrackerObject'] = i;
        f[i]=f[i]||function(){(f[i].q=f[i].q||[]).push(arguments)};o=a.createElement(s),
        n=a.getElementsByTagName(s)[0];o.async=1;o.src=h;n.parentNode.insertBefore(o,n)
        })(window, document, 'script', '//www.glami.sk/js/compiled/pt.js', 'glami');

        glami('create', 'AADAD885F5F5FF4D', 'sk');
        glami('track', 'PageView');

<?php 
        /*Product view */

        /*prida iba do produktov*/
        if( is_product() ){
        global $post;
        $product = wc_get_product( $post->ID );


?>  
        /*View content type product*/

        glami('track', 'ViewContent', {
        content_type: 'product',
        item_ids: ['<?php echo $product->get_sku(); ?>'],
        product_names: ['<?php echo $product->get_name(); ?>'] 
        });

        /*Add to cart*/ 

        jQuery( document ).ready(function() {
            jQuery(".single_add_to_cart_button").click(function(){
                // 动态获取当前选定的变体属性值
                // 注意：'select2-pa_velkost-container' 是示例ID，您需要根据实际网站HTML结构进行调整
                var selectedVariationAttribute = document.getElementById("select2-pa_velkost-container") ? document.getElementById("select2-pa_velkost-container").innerText : '';
                var combinedSku = '<?php echo $product->get_sku(); ?>';
                if (selectedVariationAttribute) {
                    combinedSku += '_' + selectedVariationAttribute; // 将主SKU与变体属性值组合
                }

                glami('track', 'AddToCart', {
                    item_ids: [combinedSku], // 使用组合后的SKU
                    product_names: ['<?php echo $product->get_name(); ?>'],
                    value: <?php echo $product->get_price(); ?>, // 注意：变体产品价格可能动态变化，此处也可能需要动态获取
                    currency: 'EUR'
                    });
                });
            });

<?php
        }


?>

        </script>
    <!-- End Glami piXel -->

<?php
}
}
add_action('wp_head', 'pixel_tracker');

3.2 原理说明

在上述修改中，关键在于这一行： var selectedVariationAttribute = document.getElementById("select2-pa_velkost-container") ? document.getElementById("select2-pa_velkost-container").innerText : '';

• document.getElementById("select2-pa_velkost-container")：这会尝试通过ID查找页面上特定的HTML元素。在WooCommerce中，当使用Select2等库美化下拉菜单时，实际选中的值可能显示在一个具有特定ID的或
  元素中。
• .innerText：获取该元素内部显示的文本内容，这通常就是用户当前选定的变体属性值（例如，“42”或“46”）。
• combinedSku += '_' + selectedVariationAttribute;：我们将主产品的SKU与获取到的变体属性值通过下划线连接起来。这样就形成了一个相对唯一的标识符，用于追踪特定变体的加购事件。

重要提示：select2-pa_velkost-container这个ID是示例中使用的，它高度依赖于您的网站主题、插件以及WooCommerce的渲染方式。您需要使用浏览器的开发者工具（F12）检查您的产品页面，找到显示当前选定变体属性值的准确HTML元素的ID或类名。

4. 注意事项与最佳实践

• 准确识别选择器：这是最关键的一步。在您的WooCommerce产品页面上，右键点击变体下拉菜单或已选中的变体文本，选择“检查元素”来查找其唯一的ID或类名。如果ID不可用，可以尝试使用类名（document.querySelector('.your-class-name').innerText）或更复杂的CSS选择器。
• 多变体属性处理：如果您的产品有多个变体属性（例如，尺寸和颜色），并且您需要将所有这些属性组合到SKU中，您可能需要获取多个元素的innerText，并以一致的方式进行组合（例如，主SKU_尺寸值_颜色值）。
• 变体价格动态更新：示例代码中的value: get_price(); ?>同样是PHP在页面加载时获取的，对于变体产品，价格会根据选择的变体而动态变化。为了获取准确的变体价格，您可能需要监听WooCommerce的变体选择事件（例如found_variation），并在JavaScript中动态获取当前变体的价格。
• jQuery的利用：由于代码中已经引入了jQuery，您可以使用更简洁和健壮的jQuery选择器来获取元素。例如：

  var selectedVariationAttribute = jQuery("#select2-pa_velkost-container").text();
  // 或者，如果选择器是下拉菜单本身，且您想获取其当前选中的值
  // var selectedVariationAttribute = jQuery("select[name='attribute_pa_velkost'] option:selected").val(); 

  选择哪种方式取决于您的HTML结构以及哪个元素实际包含了您需要的值。

• 测试与验证：在部署任何追踪代码之前，务必进行彻底测试。在产品页面上选择不同的变体，然后点击“添加到购物车”，使用浏览器的开发者工具检查网络请求（特别是发送到Glami或您的像素端点的请求），确保item_ids参数中包含了正确的、动态生成的变体SKU。
• 数据层规范：虽然本教程侧重于item_ids，但建议遵循数据层规范（如Google Analytics 4的事件参数），确保所有相关信息（如item_name、price、quantity等）都准确无误地发送。

5. 总结

通过在“添加到购物车”事件中动态捕获用户选定的变体属性值，并将其与主产品SKU结合，我们可以确保营销像素接收到最准确的产品标识符。这不仅解决了变体产品追踪的难题，也为后续的营销数据分析、广告投放优化以及个性化用户体验奠定了坚实的基础。记住，关键在于理解您的网站HTML结构，并利用前端JavaScript的力量来实时获取用户交互数据。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。