Skip to Content
šŸš€ We just launched! Please star us on Github!
DocumentationGuidesWooCommerce

WooCommerce

This guide explains how to integrate Rybbit with your WooCommerce store (running on WordPress) to track e-commerce events like product views, add to carts, and purchases, in addition to standard page view analytics.

Prerequisites

  1. Rybbit Installed on WordPress: Ensure you have already installed the Rybbit tracking script on your WordPress site using one of the methods described in our WordPress integration guide. This guide focuses on adding e-commerce event tracking.
  2. Access to functions.php or Custom Plugin: Youā€™ll need to add PHP snippets. The recommended way is via your child themeā€™s functions.php file or a custom plugin to avoid changes being overwritten by theme updates.

Tracking E-commerce Events

WooCommerce provides various action hooks that allow you to trigger JavaScript when specific e-commerce events occur. Weā€™ll use these to send data to Rybbit.

āš ļø

The following PHP code snippets should be added to your child themeā€™s functions.php file or a custom site-specific plugin. Modifying your parent themeā€™s functions.php directly is not recommended as changes will be lost upon theme updates.

1. View Product (view_item)

Track when a user views a single product page.

// Add to your child theme's functions.php or a custom plugin
add_action( 'woocommerce_after_single_product_summary', 'rybbit_track_view_product', 10 );
function rybbit_track_view_product() {
    if ( ! is_product() ) { // Ensure it's a single product page
        return;
    }
 
    global $product;
    if ( ! $product instanceof WC_Product ) {
        return;
    }
 
    $product_data = array(
        'item_id'    => $product->get_sku() ? $product->get_sku() : $product->get_id(),
        'item_name'  => $product->get_name(),
        'price'      => (float) $product->get_price(),
        'currency'   => get_woocommerce_currency(),
    );
    ?>
    <script type="text/javascript">
        if (typeof window.rybbit !== 'undefined') {
            window.rybbit.trackEvent('view_item', <?php echo json_encode($product_data); ?>);
        }
    </script>
    <?php
}

2. Add to Cart (add_to_cart)

Track when a user adds a product to their cart. This example uses a JavaScript approach triggered after the ā€œAdd to Cartā€ button on single product pages. For AJAX add-to-carts (e.g., on archive pages), a JavaScript event listener on $(document.body).on('added_to_cart', ...) might be more robust.

// Add to your child theme's functions.php or a custom plugin
add_action( 'woocommerce_after_add_to_cart_button', 'rybbit_track_add_to_cart_script' );
function rybbit_track_add_to_cart_script() {
    global $product;
    if ( ! $product instanceof WC_Product ) {
        return;
    }
 
    $product_data = array(
        'item_id'    => $product->get_sku() ? $product->get_sku() : $product->get_id(),
        'item_name'  => $product->get_name(),
        'price'      => (float) $product->get_price(),
        'currency'   => get_woocommerce_currency(),
        // Quantity is typically 1 here, but can be dynamic if your theme supports it before this hook
    );
    ?>
    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form.cart');
        if (form) {
            form.addEventListener('submit', function() {
                // Attempt to get quantity, default to 1
                let quantity = 1;
                const quantityInput = form.querySelector('input.qty');
                if (quantityInput && quantityInput.value) {
                    quantity = parseInt(quantityInput.value, 10);
                }
 
                if (typeof window.rybbit !== 'undefined') {
                    const eventData = <?php echo json_encode($product_data); ?>;
                    eventData.quantity = quantity > 0 ? quantity : 1;
                    window.rybbit.trackEvent('add_to_cart', eventData);
                }
            });
        }
    });
    </script>
    <?php
}
 
// For AJAX add to cart events (e.g., on shop/category pages)
add_action( 'wp_footer', 'rybbit_ajax_add_to_cart_tracker' );
function rybbit_ajax_add_to_cart_tracker() {
    if ( is_admin() ) return;
    ?>
    <script type="text/javascript">
        jQuery(document.body).on('added_to_cart', function(event, fragments, cart_hash, $button) {
            if (typeof window.rybbit !== 'undefined' && $button && $button.length) {
                const productId = $button.data('product_id');
                const quantity = $button.data('quantity') || 1; // Or $button.closest('.product').find('input.qty').val()
                // Note: Getting full product details here via AJAX might be needed for price, name, SKU
                // This example sends basic info. For more details, you might need another AJAX call or pass data via $button.data attributes
                window.rybbit.trackEvent('add_to_cart', {
                    item_id: productId,
                    quantity: quantity,
                    source: 'ajax_add_to_cart'
                    // Consider adding more product details if readily available or via a separate AJAX call
                });
            }
        });
    </script>
    <?php
}

3. Begin Checkout (begin_checkout)

Track when a user proceeds to the checkout page.

// Add to your child theme's functions.php or a custom plugin
add_action( 'woocommerce_before_checkout_form', 'rybbit_track_begin_checkout', 5 );
function rybbit_track_begin_checkout() {
    if ( is_admin() || ! is_checkout() ) return;
 
    $cart = WC()->cart;
    if ( ! $cart ) return;
 
    $items = [];
    foreach ( $cart->get_cart() as $cart_item_key => $cart_item ) {
        $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
        $items[] = array(
            'item_id'    => $_product->get_sku() ? $_product->get_sku() : $_product->get_id(),
            'item_name'  => $_product->get_name(),
            'price'      => (float) $_product->get_price(),
            'quantity'   => (int) $cart_item['quantity'],
        );
    }
 
    $checkout_data = array(
        'currency'   => get_woocommerce_currency(),
        'value'      => (float) $cart->get_total( 'edit' ), // Get total without formatting
        'items'      => $items,
    );
    ?>
    <script type="text/javascript">
        if (typeof window.rybbit !== 'undefined') {
            window.rybbit.trackEvent('begin_checkout', <?php echo json_encode($checkout_data); ?>);
        }
    </script>
    <?php
}

4. Purchase (purchase)

Track when a purchase is completed (on the ā€œThank Youā€ page).

// Add to your child theme's functions.php or a custom plugin
add_action( 'woocommerce_thankyou', 'rybbit_track_purchase', 10, 1 );
function rybbit_track_purchase( $order_id ) {
    if ( ! $order_id ) {
        return;
    }
    $order = wc_get_order( $order_id );
    if ( ! $order ) {
        return;
    }
 
    $items = [];
    foreach ( $order->get_items() as $item_id => $item ) {
        $product = $item->get_product();
        $items[] = array(
            'item_id'    => $product ? ($product->get_sku() ? $product->get_sku() : $product->get_id()) : $item->get_product_id(),
            'item_name'  => $item->get_name(),
            'price'      => (float) $order->get_line_subtotal( $item, false, false ), // Price for the line item
            'quantity'   => (int) $item->get_quantity(),
        );
    }
 
    $purchase_data = array(
        'transaction_id' => $order->get_order_number(),
        'value'          => (float) $order->get_total(),
        'tax'            => (float) $order->get_total_tax(),
        'shipping'       => (float) $order->get_shipping_total(),
        'currency'       => $order->get_currency(),
        'items'          => $items,
    );
    ?>
    <script type="text/javascript">
        if (typeof window.rybbit !== 'undefined') {
            window.rybbit.trackEvent('purchase', <?php echo json_encode($purchase_data); ?>);
        }
    </script>
    <?php
}

Important Considerations

  • Script Loading Order: Ensure the main Rybbit tracking script (added via the WordPress integration guide) is loaded before these event-specific scripts attempt to call window.rybbit. Placing the main script in the <head> usually ensures this.
  • Data Accuracy: The product data (SKU, name, price) retrieved in these examples depends on your WooCommerce setup and product configuration. Test thoroughly.
  • AJAX Operations: For themes or plugins that use AJAX heavily (e.g., AJAX add to cart, mini-cart updates), you might need more sophisticated JavaScript event listeners rather than relying solely on PHP action hooks that fire on page load. The AJAX add-to-cart example provides a starting point.
  • Performance: While these snippets are generally lightweight, outputting many inline scripts can have a minor impact. For very high-traffic sites, consider consolidating JavaScript or using more advanced techniques if performance becomes a concern.
  • Plugin Conflicts: Test for conflicts if you are using other analytics or tracking plugins.

By implementing these tracking snippets, you can gain valuable insights into your WooCommerce storeā€™s performance using Rybbit.

Last updated on
WixWordPress
Rybbit
Copyright 2025 Ā© Rybbit.
Privacy PolicyContact