本文详细介绍了在WooCommerce网站上，当用户将变体商品添加到购物车时，如何将当前选定的变体SKU（或其唯一标识符）准确地传递到跟踪像素的数据层。通过修改现有的跟踪代码，动态捕获页面上表示选定变体属性的HTML元素内容，并将其与主产品SKU结合，从而确保数据分析的精确性，避免只记录主产品SKU的问题。
1. 问题背景：变体商品SKU追踪的挑战
在电子商务网站中，为了进行精准的用户行为分析和广告效果评估，通常会集成各种跟踪像素（如Glami Pixel、Facebook Pixel、Google Analytics等）。当用户将商品添加到购物车时，将商品的相关信息（如SKU、名称、价格等）发送到数据层是常见的做法。
然而，对于WooCommerce中的变体商品（Variable Products），直接使用 php echo $product->get_sku(); ?> 获取到的往往是主产品的SKU，而不是用户当前选定的具体变体（例如，不同尺寸或颜色的同一T恤）。这导致在数据分析时，无法区分用户添加了哪个具体变体的商品，从而影响数据洞察的准确性。
原始代码示例中，AddToCart 事件的 item_ids 字段直接使用了 $product->get_sku()：
glami('track', 'AddToCart', { item_ids: ['get_sku(); ?>'], // 这里需要获取当前选定的变体SKU product_names: ['get_name(); ?>'], value: get_price(); ?>, currency: 'EUR'});
这正是导致追踪不准确的原因。我们需要一种机制来动态地捕获用户选择的变体属性，并将其纳入 item_ids。
2. 解决方案：动态获取选定变体属性
解决此问题的核心在于，当用户点击“添加到购物车”按钮时，通过JavaScript/jQuery获取页面上已选变体属性的值。这通常涉及到检查产品页面上显示已选变体属性的HTML元素。
2.1 识别目标HTML元素
在大多数WooCommerce变体产品页面上，当用户选择一个变体属性（如尺寸、颜色）后，该选择会反映在页面上的某个HTML元素中。这个元素通常是一个 、
例如，在某些主题或使用了特定插件（如Select2）的网站上，选定的变体属性值可能会显示在一个具有特定ID的元素中，例如 select2-pa_velkost-container（其中 pa_velkost 可能代表“属性-尺寸”）。
操作步骤：
打开你的产品页面。使用浏览器开发者工具（通常按 F12 键）。检查或选择一个变体属性（例如，选择一个尺寸）。使用开发者工具的“检查元素”功能，点击页面上显示已选尺寸的文本。在开发者工具中，找到该元素的ID或类名。例如，如果它是一个 标签，并且其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 = '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: ['get_name(); ?>'], value: get_price(); ?>, currency: 'EUR' }); });});// ... 其他代码 ...
完整修改后的 pixel_tracker 函数示例：
function pixel_tracker() { if( is_wc_endpoint_url('order-received') ) return; if( is_product() ){?> (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');ID );?> /*View content type product*/ glami('track', 'ViewContent', { content_type: 'product', item_ids: ['get_sku(); ?>'], product_names: ['get_name(); ?>'] }); /*Add to cart*/ jQuery( document ).ready(function() { jQuery(".single_add_to_cart_button").click(function(){ // 获取主产品SKU var mainProductSku = '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: ['get_name(); ?>'], value: get_price(); ?>, currency: 'EUR' }); }); }); <?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中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1320061.html
微信扫一扫 
支付宝扫一扫 
