本文详细介绍了在WooCommerce网站上，当用户将变体商品添加到购物车时，如何将当前选定的变体SKU（或其唯一标识符）准确地传递到跟踪像素的数据层。通过修改现有的跟踪代码，动态捕获页面上表示选定变体属性的HTML元素内容，并将其与主产品SKU结合，从而确保数据分析的精确性，避免只记录主产品SKU的问题。
1. 问题背景：变体商品SKU追踪的挑战
在电子商务网站中，为了进行精准的用户行为分析和广告效果评估，通常会集成各种跟踪像素（如Glami Pixel、Facebook Pixel、Google Analytics等）。当用户将商品添加到购物车时，将商品的相关信息（如SKU、名称、价格等）发送到数据层是常见的做法。
然而，对于WooCommerce中的变体商品（Variable Products），直接使用 zuojiankuohaophpcn?php echo $product->get_sku(); ?> 获取到的往往是主产品的SKU，而不是用户当前选定的具体变体（例如，不同尺寸或颜色的同一T恤）。这导致在数据分析时，无法区分用户添加了哪个具体变体的商品，从而影响数据洞察的准确性。
原始代码示例中，AddToCart 事件的 item_ids 字段直接使用了 $product->get_sku()：
glami('track', 'AddToCart', {
item_ids: ['<?php echo $product->get_sku(); ?>'], // 这里需要获取当前选定的变体SKU
product_names: ['<?php echo $product->get_name(); ?>'],
value: <?php echo $product->get_price(); ?>,
currency: 'EUR'
});
这正是导致追踪不准确的原因。我们需要一种机制来动态地捕获用户选择的变体属性，并将其纳入 item_ids。
2. 解决方案：动态获取选定变体属性
解决此问题的核心在于，当用户点击“添加到购物车”按钮时，通过JavaScript/jQuery获取页面上已选变体属性的值。这通常涉及到检查产品页面上显示已选变体属性的HTML元素。
2.1 识别目标HTML元素
在大多数WooCommerce变体产品页面上，当用户选择一个变体属性（如尺寸、颜色）后，该选择会反映在页面上的某个HTML元素中。这个元素通常是一个 <span>、<label> 或其他容器，其 innerText 或 value 属性包含了选定的值。
例如，在某些主题或使用了特定插件（如Select2）的网站上，选定的变体属性值可能会显示在一个具有特定ID的元素中，例如 select2-pa_velkost-container（其中 pa_velkost 可能代表“属性-尺寸”）。
操作步骤：
- 打开你的产品页面。
- 使用浏览器开发者工具（通常按 F12 键）。
- 检查或选择一个变体属性（例如，选择一个尺寸）。
- 使用开发者工具的“检查元素”功能，点击页面上显示已选尺寸的文本。
- 在开发者工具中，找到该元素的ID或类名。例如，如果它是一个 <span> 标签，并且其ID为 select2-pa_velkost-container，那么我们就可以通过 document.getElementById(“select2-pa_velkost-container”).innerText 来获取其文本内容。
2.2 修改跟踪代码
一旦确定了显示选定变体属性的HTML元素ID，就可以修改 AddToCart 事件的 item_ids 字段。我们将主产品SKU与动态获取的变体属性值结合，形成一个唯一的标识符。
更新后的代码片段：
// ... 其他 Glami Pixel 初始化代码 ...
jQuery( document ).ready(function() {
jQuery(".single_add_to_cart_button").click(function(){
// 获取主产品SKU
var mainProductSku = '<?php echo $product->get_sku(); ?>';
// 尝试获取选定变体属性的文本，注意这里的ID是示例，需根据实际情况修改
var selectedVariationAttribute = '';
var variationElement = document.getElementById("select2-pa_velkost-container");
if (variationElement) {
selectedVariationAttribute = variationElement.innerText.trim();
}
// 构建唯一的 item_id。如果获取到变体属性，则组合；否则只用主SKU。
var itemIdToTrack = mainProductSku;
if (selectedVariationAttribute) {
itemIdToTrack = mainProductSku + '_' + selectedVariationAttribute;
}
glami('track', 'AddToCart', {
item_ids: [itemIdToTrack], // 使用组合后的唯一ID
product_names: ['<?php echo $product->get_name(); ?>'],
value: <?php echo $product->get_price(); ?>,
currency: 'EUR'
});
});
});
// ... 其他代码 ...
完整修改后的 pixel_tracker 函数示例：
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(){
// 获取主产品SKU
var mainProductSku = '<?php echo $product->get_sku(); ?>';
// 尝试获取选定变体属性的文本
// 注意：这里的ID "select2-pa_velkost-container" 是一个示例，
// 您需要根据您的网站实际情况，通过浏览器开发者工具查找显示已选变体属性的元素的正确ID或类名。
var selectedVariationAttribute = '';
var variationElement = document.getElementById("select2-pa_velkost-container");
if (variationElement) {
selectedVariationAttribute = variationElement.innerText.trim();
}
// 构建唯一的 item_id。如果获取到变体属性，则组合；否则只用主SKU。
var itemIdToTrack = mainProductSku;
if (selectedVariationAttribute) {
itemIdToTrack = mainProductSku + '_' + selectedVariationAttribute;
}
glami('track', 'AddToCart', {
item_ids: [itemIdToTrack], // 使用组合后的唯一ID
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. 注意事项与进阶考量
- 元素ID的准确性： 示例中使用的 select2-pa_velkost-container 是一个特定的ID，它可能在您的网站上不存在或不同。务必使用浏览器开发者工具检查您网站上实际显示选中变体属性的HTML元素的ID或类名。 如果没有ID，可以尝试使用类名 (document.querySelector(‘.your-class-name’).innerText) 或其他更具体的选择器。
- 组合式SKU的含义： 主SKU_选定属性值 这种组合方式创建了一个对当前选定变体而言唯一的标识符。例如，如果主SKU是 TSHIRT001，用户选择了“42”码，那么追踪的 item_id 将是 TSHIRT001_42。这对于数据分析目的通常是有效的，因为它能区分不同的变体。
-
获取实际变体SKU的替代方案： 如果您确实需要WooCommerce后台为每个变体单独设置的精确SKU（例如 TSHIRT001-S、TSHIRT001-M），那么上述基于 innerText 的方法可能不够。更精确的方案通常需要：
- 监听WooCommerce的变体选择事件，例如 woocommerce_variation_has_changed。
- 在事件触发时，从页面上的变体数据（通常存储在隐藏字段或JavaScript变量中）中提取当前选定变体的完整数据，包括其SKU。
- 这种方法会更复杂，需要对WooCommerce前端JS事件有更深入的理解。但对于大多数简单的追踪需求，本文提供的 innerText 方案已足够。
- 多种变体属性： 如果您的产品有多个变体属性（例如，尺寸和颜色），您可能需要调整逻辑以捕获所有相关属性，并将它们组合成一个更详细的 item_id（例如 主SKU_尺寸_颜色）。这需要识别并获取所有相关属性元素的文本。
- 数据层结构： 确保您发送到数据层的数据结构符合您所使用的跟踪像素（如Glami、GA4、GTM）的要求。item_ids 通常期望一个数组，即使只有一个ID。
4. 总结
通过上述修改，您可以确保在WooCommerce网站上，当用户将变体商品添加到购物车时，跟踪像素能够准确地捕获到当前选定的变体信息，而不是笼统的主产品SKU。这极大地提升了数据分析的粒度，为更精准的营销和业务决策提供了坚实的数据基础。始终记住，在实施任何代码修改之前，请务必在开发或测试环境中进行充分测试。
以上就是WooCommerce变体商品加入购物车时准确获取选定变体SKU到数据层的详细内容，更多请关注php中文网其它相关文章！