Woocommerce: How to fire script after product added to cart via Ajax event

Question

I am trying to integrate webengage to the website and trying to trigger "Added to cart" event along with the product data like(name, variation, price, quantity etc..)

Without ajax, when page refreshes after adding to cart, i am able to trigger the script as below `

<?php
add_action('wp_footer', 'single_added_to_cart_event');
function single_added_to_cart_event()
{
    if( isset($_POST['add-to-cart']) && isset($_POST['quantity']) ) :

    // Get added to cart product ID (or variation ID) and quantity (if needed)
    $id_to_check   = isset($_POST['variation_id']) ? esc_attr($_POST['variation_id']) : esc_attr($_POST['add-to-cart']);
    $product_id   = isset($_POST['variation_id']) ? esc_attr($_POST['variation_id']) : esc_attr($_POST['add-to-cart']);
    $variation_id  = isset($_POST['variation_id']) ? esc_attr($_POST['variation_id']) : 0;
    $quantity      = esc_attr($_POST['quantity']);
    $found_in_cart = false; // Initializing
    
    global $woocommerce;
    global $post;
    $term_names_array = wp_get_post_terms($product_id, 'product_cat', array('fields' => 'names'));
$term_names_string = count($term_names_array) > 0 ? implode(', ', $term_names_array) : '';



    // Check cart items to be sure that the product has been added to cart (and get product data)
    foreach( WC()->cart->get_cart() as $item ) {
        $product = $item['data']; // The WC_Product Object
        if( $product->get_id() == $id_to_check ) {
            $product_name = $product->get_name(); // Product name
            $sku          = $product->get_sku(); // Product sku
            $type         = $product->get_type(); // Product sku
            $price        = wc_get_price_to_display($product); // Product price for display
            $stock_qty    = $product->get_stock_quantity(); // Product sku
            $stock_status = $product->get_stock_status(); // Product sku
            $attributes   = $variation_id > 0 ? json_encode($product->get_attributes()) : "''";

            $found_in_cart = true;
            break; // Stop the loop
        }
    }


    if( $found_in_cart ) :

    // The displayed message (example)
    if ( $variation_id > 0 ) {
        $message = sprintf( __('Product "%s" has been added to cart. \r\nProduct type: %s \r\nProduct price: %s \r\nProduct_id: %s \r\nVariation_id: %s \r\nQuantity: %s'),
            $product_name, $type, $price, $product_id, $variation_id, $quantity );
    } else {
        $message = sprintf( __('Product "%s" has been added to cart. \r\nProduct type: %s \r\nProduct price: %s \r\nProduct_id: %s \r\nQuantity: %s'),
            $product_name, $type, $price, $product_id, $quantity );
    }

    // JS code goes here below
    ?>
    <script>
    webengage.track("Added To Cart", {
    "Product ID" : <?php echo $product_id; ?>,
    "Price"      : <?php echo $price; ?>,
    "Quantity"   : <?php echo $quantity; ?>,
    "SKU Code": "<?php echo $sku; ?>",
    "Product Name" : "<?php echo $product_name; ?>",
    "Currency"   : "INR",
    
    });
</script>
<?php
    endif; endif;
}

So, the site is using Ajax add to cart now. I need to fire a script whenever the product is added to cart without the page reloading. And if user navigates to another product and adds to cart, only that product needs to be added to the script event dynamically and an event should be triggered to webenage along with the product details added to cart.

Note: I have mostly variation products, so the title we push to webengaeg needs to come along with the variation name choosen.

Any help is much appreciated. Thanks!

I tried without ajax and with ajax, i am not able to trigger product data added to cart.