Meta Pixel Setup for WooCommerce

Meta Pixel (formerly Facebook Pixel) enables tracking for Facebook and Instagram ads on WooCommerce stores. This guide covers installation methods, eCommerce event setup, and WooCommerce-specific considerations.

What is Meta Pixel?

Meta Pixel is a JavaScript snippet that tracks customer actions on your WooCommerce store:

• Track conversions - Measure purchases from Facebook/Instagram ads
• Build audiences - Create remarketing lists based on behavior
• Optimize ads - Improve ad delivery to likely buyers
• Measure ROI - Attribute revenue to specific campaigns

Prerequisites

1. Create Meta Pixel

   • Go to Meta Events Manager
   • Create a new Pixel
   • Copy your Pixel ID (format: 15-16 digit number)

2. Verify Domain (Required for iOS 14.5+)

   • In Events Manager, go to Settings → Domains
   • Add your WooCommerce domain
   • Verify ownership via DNS or HTML file

Method 1: Official Facebook for WooCommerce Plugin

Best for: Beginners, automatic event tracking, product catalog sync

Installation

1. Install the Plugin

   • Navigate to Plugins → Add New
   • Search for "Facebook for WooCommerce"
   • Install and activate the official plugin by Facebook

2. Connect to Facebook

   • Go to Marketing → Facebook
   • Click Get Started
   • Authenticate with your Facebook account
   • Select your Business Manager

3. Set Up Pixel

   Choose Your Pixel:
   - Create new Pixel, or
   - Select existing Pixel
   
   Enable features:
   ✓ Enable Pixel tracking
   ✓ Enable Advanced Matching (recommended)
   ✓ Track standard events automatically
   

4. Configure Product Catalog

   Product Catalog Sync:
   ✓ Enable product sync
   ✓ Sync all products (or select categories)
   ✓ Update frequency: Daily
   

5. Enable Conversions API (Recommended)

   Conversions API:
   ✓ Enable server-side tracking
   - Improves data accuracy
   - Bypasses ad blockers
   - Better iOS 14.5+ tracking
   

Automatic Events Tracked

The plugin automatically tracks:

• PageView - All pages
• ViewContent - Product pages
• AddToCart - Add to cart clicks
• InitiateCheckout - Checkout page
• Purchase - Order completion

Custom Configuration

// Customize Facebook for WooCommerce pixel settings
add_filter('facebook_for_woocommerce_integration_pixel_enabled', '__return_true');

// Exclude specific user roles from tracking
add_filter('facebook_for_woocommerce_pixel_render', 'exclude_roles_from_pixel', 10, 1);
function exclude_roles_from_pixel($render) {
    if (current_user_can('manage_woocommerce')) {
        return false; // Don't track shop managers
    }
    return $render;
}

// Add custom data to events
add_filter('facebook_for_woocommerce_pixel_event_params', 'custom_pixel_params', 10, 3);
function custom_pixel_params($params, $event_name, $product) {
    // Add customer lifetime value for logged-in users
    if (is_user_logged_in() && $event_name === 'Purchase') {
        $customer = new WC_Customer(get_current_user_id());
        $params['customer_ltv'] = $customer->get_total_spent();
    }
    return $params;
}

Method 2: PixelYourSite Plugin

Best for: Multi-platform tracking (Meta + GA4 + TikTok), advanced features

Installation

1. Install Plugin

   • Navigate to Plugins → Add New
   • Search for "PixelYourSite"
   • Install and activate (free or Pro version)

2. Add Meta Pixel ID

   • Go to PixelYourSite → Meta (Facebook) Pixel
   • Enter your Pixel ID
   • Enable Track WooCommerce events

3. Configure WooCommerce Tracking

   WooCommerce Events:
   ✓ ViewContent (Product pages)
   ✓ AddToCart (Add to cart)
   ✓ InitiateCheckout (Checkout page)
   ✓ Purchase (Thank you page)
   
   Advanced:
   ✓ Enable Facebook Pixel
   ✓ Enable Advanced Matching
   ✓ Track on WooCommerce standard events
   ✓ Fire Purchase event only once
   

4. Advanced Matching Setup

   Advanced Matching (Improves attribution):
   ✓ Email
   ✓ Phone
   ✓ First Name
   ✓ Last Name
   ✓ City
   ✓ State
   ✓ Zip Code
   ✓ Country
   

PixelYourSite Advantages

• Tracks multiple pixels (Meta, GA4, Pinterest, TikTok)
• Dynamic ads support
• Custom audiences builder
• Server-side tracking (Pro version)
• Detailed event configuration

Method 3: Manual Meta Pixel Installation

Best for: Developers, full control, custom implementation

Step 1: Add Base Pixel Code

// Add Meta Pixel to WooCommerce
add_action('wp_head', 'add_meta_pixel', 1);
function add_meta_pixel() {
    // Don't track admins
    if (current_user_can('manage_woocommerce')) {
        return;
    }

    $pixel_id = 'YOUR_PIXEL_ID'; // Replace with your Pixel ID
    ?>
    <!-- Meta Pixel Code -->
    <script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');

    fbq('init', '<?php echo $pixel_id; ?>');
    fbq('track', 'PageView');
    </script>
    <noscript>
        <img height="1" width="1" style="display:none"
        src="https://www.facebook.com/tr?id=<?php echo $pixel_id; ?>&ev=PageView&noscript=1"/>
    </noscript>
    <!-- End Meta Pixel Code -->
    <?php
}

Step 2: Advanced Matching

// Add Advanced Matching for better attribution
add_action('wp_head', 'meta_pixel_advanced_matching', 2);
function meta_pixel_advanced_matching() {
    if (current_user_can('manage_woocommerce')) {
        return;
    }

    $user_data = array();

    // Get data from logged-in user
    if (is_user_logged_in()) {
        $user = wp_get_current_user();
        $user_data = array(
            'em' => hash('sha256', strtolower(trim($user->user_email))),
            'fn' => hash('sha256', strtolower(trim($user->first_name))),
            'ln' => hash('sha256', strtolower(trim($user->last_name)))
        );
    }
    // Get data from checkout page
    elseif (is_checkout() && !is_wc_endpoint_url('order-received')) {
        // Data will be available after customer fills form
        // Implement via JavaScript on checkout page
    }

    if (!empty($user_data)) {
        ?>
        <script>
            fbq('init', 'YOUR_PIXEL_ID', <?php echo json_encode($user_data); ?>);
        </script>
        <?php
    }
}

Step 3: Track ViewContent (Product Pages)

// Track product page views
add_action('woocommerce_after_single_product', 'meta_pixel_view_content');
function meta_pixel_view_content() {
    global $product;
    if (!$product) return;

    $product_data = array(
        'content_ids' => array($product->get_sku() ? $product->get_sku() : $product->get_id()),
        'content_type' => 'product',
        'content_name' => $product->get_name(),
        'value' => (float) $product->get_price(),
        'currency' => get_woocommerce_currency()
    );
    ?>
    <script>
        fbq('track', 'ViewContent', <?php echo json_encode($product_data); ?>);
    </script>
    <?php
}

Step 4: Track AddToCart (AJAX Compatible)

// Track add to cart (AJAX compatible)
add_action('wp_footer', 'meta_pixel_add_to_cart');
function meta_pixel_add_to_cart() {
    ?>
    <script>
        // AJAX add to cart (shop pages)
        jQuery(document.body).on('added_to_cart', function(event, fragments, cart_hash, $button) {
            var product = $button.closest('.product');
            var productId = $button.data('product_id');
            var productName = product.find('.woocommerce-loop-product__title').text() || 'Unknown';
            var priceText = product.find('.price .amount').first().text();
            var price = parseFloat(priceText.replace(/[^0-9.-]+/g, ''));
            var quantity = $button.data('quantity') || 1;

            fbq('track', 'AddToCart', {
                content_ids: [productId],
                content_type: 'product',
                content_name: productName,
                value: price * quantity,
                currency: '<?php echo get_woocommerce_currency(); ?>'
            });
        });

        // Standard add to cart (product pages)
        <?php if (is_product()) : global $product; ?>
        jQuery('form.cart').on('submit', function() {
            var quantity = parseInt(jQuery('input.qty').val()) || 1;

            fbq('track', 'AddToCart', {
                content_ids: ['<?php echo $product->get_sku() ? $product->get_sku() : $product->get_id(); ?>'],
                content_type: 'product',
                content_name: '<?php echo esc_js($product->get_name()); ?>',
                value: <?php echo (float) $product->get_price(); ?> * quantity,
                currency: '<?php echo get_woocommerce_currency(); ?>'
            });
        });
        <?php endif; ?>
    </script>
    <?php
}

Step 5: Track InitiateCheckout

// Track checkout initiation
add_action('woocommerce_before_checkout_form', 'meta_pixel_initiate_checkout');
function meta_pixel_initiate_checkout() {
    static $tracked = false;
    if ($tracked) return;
    $tracked = true;

    $cart = WC()->cart;
    $content_ids = array();
    $contents = array();

    foreach ($cart->get_cart() as $cart_item) {
        $product = $cart_item['data'];
        $content_ids[] = $product->get_sku() ? $product->get_sku() : $product->get_id();
        $contents[] = array(
            'id' => $product->get_sku() ? $product->get_sku() : $product->get_id(),
            'quantity' => $cart_item['quantity']
        );
    }
    ?>
    <script>
        fbq('track', 'InitiateCheckout', {
            content_ids: <?php echo json_encode($content_ids); ?>,
            contents: <?php echo json_encode($contents); ?>,
            content_type: 'product',
            value: <?php echo $cart->get_total('raw'); ?>,
            currency: '<?php echo get_woocommerce_currency(); ?>',
            num_items: <?php echo $cart->get_cart_contents_count(); ?>
        });
    </script>
    <?php
}

Step 6: Track Purchase

// Track purchase on thank you page
add_action('woocommerce_thankyou', 'meta_pixel_purchase', 10, 1);
function meta_pixel_purchase($order_id) {
    if (!$order_id) return;

    // Prevent duplicate tracking
    if (get_post_meta($order_id, '_meta_pixel_purchase_tracked', true)) {
        return;
    }

    $order = wc_get_order($order_id);
    $content_ids = array();
    $contents = array();

    foreach ($order->get_items() as $item) {
        $product = $item->get_product();
        $product_id = $product->get_sku() ? $product->get_sku() : $product->get_id();

        $content_ids[] = $product_id;
        $contents[] = array(
            'id' => $product_id,
            'quantity' => $item->get_quantity()
        );
    }
    ?>
    <script>
        fbq('track', 'Purchase', {
            content_ids: <?php echo json_encode($content_ids); ?>,
            contents: <?php echo json_encode($contents); ?>,
            content_type: 'product',
            value: <?php echo $order->get_total(); ?>,
            currency: '<?php echo $order->get_currency(); ?>',
            num_items: <?php echo $order->get_item_count(); ?>
        });
    </script>
    <?php

    update_post_meta($order_id, '_meta_pixel_purchase_tracked', true);
}

WooCommerce-Specific Considerations

Variable Products

Track variation selection:

add_action('woocommerce_after_add_to_cart_button', 'meta_pixel_variation_tracking');
function meta_pixel_variation_tracking() {
    global $product;
    if (!$product->is_type('variable')) return;
    ?>
    <script>
        jQuery('.variations_form').on('found_variation', function(event, variation) {
            fbq('track', 'ViewContent', {
                content_ids: [variation.sku || variation.variation_id],
                content_type: 'product_variant',
                value: variation.display_price,
                currency: '<?php echo get_woocommerce_currency(); ?>'
            });
        });
    </script>
    <?php
}

WooCommerce Subscriptions

// Track subscription purchases
add_action('woocommerce_subscription_status_active', 'meta_pixel_subscription', 10, 1);
function meta_pixel_subscription($subscription) {
    if ($subscription->get_date('date_created') !== $subscription->get_date('last_order_date_created')) {
        return; // Only track new subscriptions
    }
    ?>
    <script>
        fbq('track', 'Subscribe', {
            value: <?php echo $subscription->get_total(); ?>,
            currency: '<?php echo $subscription->get_currency(); ?>',
            predicted_ltv: <?php echo $subscription->get_total() * 12; ?>
        });
    </script>
    <?php
}

Meta Conversions API (Server-Side Tracking)

For better iOS 14.5+ tracking and ad blocker bypass:

// Send server-side events to Meta Conversions API
function send_meta_conversion_api($event_name, $event_data, $user_data = array()) {
    $pixel_id = 'YOUR_PIXEL_ID';
    $access_token = 'YOUR_ACCESS_TOKEN'; // From Events Manager

    $api_url = "https://graph.facebook.com/v18.0/{$pixel_id}/events";

    $event = array(
        'event_name' => $event_name,
        'event_time' => time(),
        'action_source' => 'website',
        'event_source_url' => home_url($_SERVER['REQUEST_URI']),
        'user_data' => $user_data,
        'custom_data' => $event_data
    );

    $body = array(
        'data' => array($event),
        'access_token' => $access_token
    );

    wp_remote_post($api_url, array(
        'body' => json_encode($body),
        'headers' => array('Content-Type' => 'application/json')
    ));
}

// Use for purchase events
add_action('woocommerce_thankyou', 'meta_capi_purchase', 10, 1);
function meta_capi_purchase($order_id) {
    $order = wc_get_order($order_id);

    $user_data = array(
        'em' => array(hash('sha256', $order->get_billing_email())),
        'ph' => array(hash('sha256', $order->get_billing_phone())),
        'fn' => array(hash('sha256', $order->get_billing_first_name())),
        'ln' => array(hash('sha256', $order->get_billing_last_name())),
        'ct' => array(hash('sha256', $order->get_billing_city())),
        'st' => array(hash('sha256', $order->get_billing_state())),
        'zp' => array(hash('sha256', $order->get_billing_postcode())),
        'country' => array(hash('sha256', $order->get_billing_country()))
    );

    $event_data = array(
        'value' => (float) $order->get_total(),
        'currency' => $order->get_currency()
    );

    send_meta_conversion_api('Purchase', $event_data, $user_data);
}

Testing and Validation

1. Meta Pixel Helper

1. Install Meta Pixel Helper Chrome extension
2. Visit your WooCommerce store
3. Click extension icon
4. Verify pixel fires and events tracked

2. Events Manager Test Events

1. Go to Meta Events Manager
2. Click Test Events
3. Enter your website URL
4. Perform actions (view product, add to cart, purchase)
5. Verify events appear in real-time

3. Check Event Parameters

Look for:

• content_ids - Product IDs present
• value - Correct prices
• currency - Matches store currency
• content_type - Set to 'product'

Common Issues

Pixel Not Firing

Cause: JavaScript errors, ad blockers, pixel not installed Solution: Check console, use Pixel Helper, verify pixel code

Events Fire Twice

Cause: Multiple pixel implementations (plugin + manual) Solution: Choose one method

Wrong Purchase Values

Cause: Incorrect order total calculation Solution: Verify $order->get_total() returns correct value

iOS 14.5+ Tracking Limited

Cause: App Tracking Transparency restrictions Solution: Implement Conversions API (server-side tracking)

Next Steps

• Meta Pixel Event Tracking - Advanced event customization
• Troubleshoot Tracking - Debug pixel issues
• GA4 Setup - Add Google Analytics alongside Meta Pixel

Related Resources

• Meta Pixel Documentation
• Conversions API Guide
• WooCommerce Hooks