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

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.
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.event('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.event('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.event('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.event('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.event('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.

Prerequisites

Tracking E-commerce Events

1. View Product (view_item)

2. Add to Cart (add_to_cart)

3. Begin Checkout (begin_checkout)

4. Purchase (purchase)

Important Considerations

On this page

1. View Product (`view_item`)

2. Add to Cart (`add_to_cart`)

3. Begin Checkout (`begin_checkout`)

4. Purchase (`purchase`)