1. 背景与挑战
在电子商务网站中集成营销像素（如Glami Pixel、Facebook Pixel、Google Analytics等）是数据追踪和广告优化的关键。对于标准产品，获取其SKU并将其发送到数据层通常很简单。然而，当涉及到WooCommerce的变体产品时，挑战随之而来。默认情况下，通过PHP获取产品SKU（$product-youjiankuohaophpcnget_sku()）通常只会返回主产品的SKU，而不是用户当前选择的特定变体（例如，不同尺寸、颜色）的SKU。
例如，一个T恤有S、M、L三种尺寸，每种尺寸都有自己的独立SKU。当用户选择M码并点击“添加到购物车”时，营销像素需要获取M码的SKU，而不是T恤的主SKU。如果无法动态获取选定的变体SKU，营销数据将不准确，影响后续的广告归因和再营销效果。
2. 核心问题分析
提供的代码片段显示，在AddToCart事件中，item_ids字段使用了<?php echo $product->get_sku(); ?>。这段PHP代码在页面加载时执行一次，获取的是主产品的SKU，并且不会随着用户在前端选择不同变体而动态更新。因此，我们需要一种方法，在用户点击“添加到购物车”按钮时，能够实时捕获到当前选定的变体属性值。
3. 解决方案：动态获取变体属性
解决此问题的关键在于利用前端JavaScript来识别并获取用户选择的变体属性值。这通常涉及到以下步骤：
- 识别变体选择器元素：在WooCommerce产品页面上，变体选择器（通常是下拉菜单或按钮组）在用户选择不同变体时，其关联的HTML元素会更新显示当前选定的值。我们需要找到这个显示当前选择值的HTML元素。
- 获取选定值：使用JavaScript（或jQuery）获取该元素的文本内容（innerText或text()）。
- 组合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的<span>或<div>元素中。
- .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: <?php echo $product->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的力量来实时获取用户交互数据。
