QuickBooksHelpIntuit

Set Up the Mailchimp Site Tracking Pixel for WooCommerce

by Intuit• Updated 4 days ago

Add the Mailchimp Site Tracking Pixel to WooCommerce to understand how your customers' behave. This knowledge powers useful segmentation and marketing automation flows in Mailchimp. Site tracking captures events like page views, product views, add-to-cart actions, and purchases. This data informs your marketing to send the right message at the right time.

In this article, you’ll learn how to add the Mailchimp Site Tracking Pixel to WooCommerce and configure event tracking.

Before you start

Here are some things to know before you begin this process.

This is an advanced feature and is recommended for users familiar with JavaScript, PHP, and WordPress plugin development. Contact your developer, or hire a Mailchimp Expert if you need help.
To learn more about Mailchimp Site Tracking Pixel, check out our article here.
You’ll need to have a connected WooCommerce account. To learn how to connect your account, check out Connect or Disconnect Mailchimp for WooCommerce.
Be sure you or your developer is familiar with Mailchimp Site Tracking Pixel Integration Guidance.

Enable site tracking

To enable the Mailchimp Site Tracking Pixel for WooCommerce, follow these steps.

In Mailchimp, go to Integrations, then select Manage.
Select your connected WooCommerce store.
Click Settings.
Under the Site tracking section, make sure the feature is turned on.

The Mailchimp Site Tracking Pixel snippet is installed through the Mailchimp for WooCommerce plugin when Site Tracking is enabled. Verify by viewing your site's source code, then searching for mailchimp or mc.js in the <head> section.

Integrate with WooCommerce Events

The integration follows a "Hook-and-Track" pattern that uses the WordPress plugin architecture. The base Mailchimp Site Tracking Pixel snippet is managed via the plugin, which means this implementation focuses on instrumentation of specific behavioral events using PHP and JavaScript.

The Mechanism

Backend Listening: Use add_action() in your theme's functions.php or a custom plugin to listen for specific WooCommerce events
Contextual Data Gathering: Access global WooCommerce objects (like $product or $order) to retrieve metadata
Frontend Execution: Inject a JavaScript block that calls the Pixel SDK's track() method at the moment the hook fires

Event mapping reference

WooCommerce Hook	Pixel SDK Event	Intent Captured
woocommerce_after_single_product	PRODUCT_VIEWED	Fires when a customer views a specific product detail page
woocommerce_add_to_cart	PRODUCT_ADDED_TO_CART	Tracks when an item is added to the shopping basket
woocommerce_before_checkout_form	CHECKOUT_STARTED	Marks the transition from browsing to the formal checkout process
woocommerce_thankyou	PURCHASED	The ultimate conversion event, fired on the order confirmation page

Implementation pattern

Example: Track Product View

<?php
// Add to your theme's functions.php or custom plugin
add_action('wp_footer', 'mailchimp_pixel_track_product_view');

function mailchimp_pixel_track_product_view() {
    if (is_product()) {
        global $product;
        ?>
        <script>
        if (window.$mcSite && window.$mcSite.pixel) {
            window.$mcSite.pixel.api.track('PRODUCT_VIEWED', {
                product: {
                    id: '<?php echo esc_js($product->get_id()); ?>',
                    productId: '<?php echo esc_js($product->get_id()); ?>',
                    title: '<?php echo esc_js($product->get_name()); ?>',
                    price: <?php echo $product->get_price(); ?>,
                    currency: '<?php echo get_woocommerce_currency(); ?>',
                    sku: '<?php echo esc_js($product->get_sku()); ?>',
                    productUrl: '<?php echo esc_url(get_permalink($product->get_id())); ?>'
                }
            });
        }
        </script>
        <?php
    }
}

Example: Track Add to Cart (AJAX-Compatible)

// Add via theme's custom JS or WooCommerce hooks
jQuery(document.body).on('added_to_cart', function(event, fragments, cart_hash, $button) {
    var productId = $button.data('product_id');
    var quantity = $button.data('quantity') || 1;

    if (window.$mcSite && window.$mcSite.pixel) {
        window.$mcSite.pixel.api.track('PRODUCT_ADDED_TO_CART', {
            cartId: cart_hash,
            product: {
                item: {
                    id: productId.toString(),
                    productId: productId.toString(),
                    title: $button.data('product_name') || 'Product'
                },
                quantity: quantity
            }
        });
    }
});

Example: Track Purchase

<?php
// Hook into the order confirmation page
add_action('woocommerce_thankyou', 'mailchimp_pixel_track_purchase');

function mailchimp_pixel_track_purchase($order_id) {
    if (!$order_id) return;

    $order = wc_get_order($order_id);
    if (!$order) return;

    $line_items = array();
    foreach ($order->get_items() as $item) {
        $product = $item->get_product();
        $line_items[] = array(
            'item' => array(
                'id' => $product->get_id(),
                'productId' => $product->get_id(),
                'title' => $product->get_name(),
                'price' => floatval($product->get_price()),
                'sku' => $product->get_sku()
            ),
            'quantity' => $item->get_quantity(),
            'price' => floatval($item->get_total())
        );
    }
    ?>
    <script>
    if (window.$mcSite && window.$mcSite.pixel) {
        window.$mcSite.pixel.api.track('PURCHASED', {
            order: {
                id: '<?php echo esc_js($order->get_order_number()); ?>',
                lineItems: <?php echo json_encode($line_items); ?>,
                totalPrice: <?php echo $order->get_total(); ?>,
                currency: '<?php echo $order->get_currency(); ?>',
                customerId: '<?php echo $order->get_customer_id(); ?>'
            }
        });
    }
    </script>
    <?php
}

Implementation considerations

AJAX Support
Some hooks (like add_to_cart) may fire via AJAX. Ensure your implementation accounts for both standard page reloads and asynchronous actions.
Verification
Use the browser's Network tab to confirm that hits are being sent to the Mailchimp Site Tracking Pixel ingestion endpoint.
Performance
Avoid injecting heavy scripts on every page load. Use conditional checks (is_product(), is_checkout(), etc.) to target specific pages.

Custom code support

Our Mailchimp Support team isn't trained for in-depth custom code troubleshooting. If you need a developer to help you set up the Mailchimp Site Tracking Pixel, check out our great Experts Directory. This lists third-party Mailchimp experts who can be hired to help out.

Mailchimp