Get product current selected variation SKU value into pixel datalayer when added to cart-CodePudding

I'm adding a tracking pixel to my website for add to cart event. When I use variation products I need to get product variation sku instead of the main product sku. I have tried so many options to achieve this but I did not get it at all. I always got the non dynamic value and I got the main product SKU without variation atribute.

Is there any option how can I track the add to cart sku from the product page and receive the selected variation SKU into my datalayer?

Code: Search for //HERE I NEED TO GET CURRENT SELECTED VARIATION SKU to see where I'm trying to get the variation SKU.

Full code is bellow

 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(){
                glami('track', 'AddToCart', {
                    item_ids: ['<?php echo $product->get_sku(); ?>'], //HERE I NEED TO GET CURRENT SELECTED VARIATION 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');

Thanks in advance.

CodePudding user response：

It seems that you need to change this line

item_ids: ['<?php echo $product->get_name(); ?>'],

to this:

item_ids: ['<?php echo $product->get_sku(); ?>_'   document.getElementById("select2-pa_velkost-container").innerText],

Explanation: The chosen value is always the innerText of the element with the above-mentioned id. I have tested the code just after loading the page, it yielded "42" and then changed the value and ran the test code, it yielded 46. According to my understanding this is what you need.

DISCLAIMER: Since you are using jQuery, you can do something like

item_ids: ['<?php echo $product->get_sku(); ?>_'   document.getElementById("select2-pa_velkost-container").innerText],

as well.