Wix Meta Pixel Integration | Blue Frog Docs

Wix Meta Pixel Integration

Integrate Meta Pixel with Wix for Facebook and Instagram advertising.

Wix Meta Pixel Integration

Complete guide to setting up Meta Pixel (Facebook Pixel) on your Wix site for conversion tracking and audience building.

Getting Started

Meta Pixel Setup Guide

Step-by-step instructions for installing Meta Pixel on Wix.

Event Tracking

Configure standard and custom events for comprehensive tracking.

Why Meta Pixel for Wix?

Meta Pixel enables powerful advertising capabilities:

  • Conversion Tracking: Measure ad effectiveness
  • Custom Audiences: Retarget site visitors
  • Lookalike Audiences: Find similar customers
  • Dynamic Ads: Show personalized product ads
  • Attribution: Understand customer journey

Installation Methods

Wix provides built-in Meta Pixel integration through Settings:

  1. Access Marketing Integrations

    • Open your Wix dashboard
    • Navigate to Settings > Marketing Integrations
    • Find Facebook & Instagram section
  2. Connect Your Pixel

    • Click Connect to Facebook
    • Log in to your Facebook Business account
    • Select your Meta Pixel ID from dropdown
    • Click Connect
  3. Configure Tracking Settings

Advantages:

  • Automatic standard event tracking
  • Built-in e-commerce integration
  • No code required
  • Automatic updates

Limitations:

  • Limited custom event options
  • Cannot modify base pixel code
  • Dependent on Wix's implementation

Method 2: Custom Code Injection

For advanced implementations requiring custom events:

  1. Get Your Pixel Code

    • Go to Meta Events Manager
    • Select your pixel
    • Click Settings > Install Pixel
    • Copy the base code
  2. Add to Wix Site

    • In Wix Editor, go to Settings > Custom Code
    • Click + Add Custom Code
    • Paste Meta Pixel base code
    • Name it "Meta Pixel Base Code"
    • Set to load in Head
    • Apply to All Pages
<!-- 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', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none"
       src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"/>
</noscript>
<!-- End Meta Pixel Code -->
  1. Verify Installation
    • Install Meta Pixel Helper extension
    • Visit your site
    • Check for pixel firing confirmation

Method 3: Google Tag Manager

For centralized tag management:

  1. Set up GTM container (see GTM integration guide)
  2. Create Meta Pixel tag in GTM
  3. Configure triggers for events
  4. Publish container

Benefits:

  • Centralized tracking management
  • Version control
  • Multiple pixel support
  • Advanced trigger configurations

Standard Events Implementation

Automatic Events (Native Integration)

When using Wix's native integration, these events fire automatically:

Event Automatic Trigger Data Included
PageView Every page load Page URL, referrer
ViewContent Product/blog pages Content name, content type
AddToCart Add to cart button Product ID, value, currency
InitiateCheckout Checkout start Cart value, num_items
Purchase Order confirmation Transaction ID, value, currency

Manual Event Configuration

For custom tracking beyond automatic events:

Lead Event (Form Submissions)

// Track Wix Form submissions
$w.onReady(function () {
  $w('#contactForm').onWixFormSubmit((event) => {
    fbq('track', 'Lead', {
      content_name: 'Contact Form',
      content_category: 'Form Submission',
      value: 0,
      currency: 'USD'
    });
  });
});

Search Event

// Track site searches
$w.onReady(function () {
  $w('#searchBox').onChange((event) => {
    const searchQuery = event.target.value;
    if (searchQuery.length > 2) {
      fbq('track', 'Search', {
        search_string: searchQuery,
        content_category: 'Site Search'
      });
    }
  });
});

ViewContent Event (Custom)

// Track specific content views
$w.onReady(function () {
  // Get page data
  const pageTitle = $w('#pageTitle').text;
  const pageCategory = 'Blog'; // or dynamic

  fbq('track', 'ViewContent', {
    content_name: pageTitle,
    content_category: pageCategory,
    content_type: 'article'
  });
});

E-commerce Tracking (Wix Stores)

Product Catalog Integration

Meta Pixel automatically tracks Wix Stores events when using native integration:

Product View Tracking

// Fires automatically on product pages
// Event: ViewContent
// Parameters:
{
  content_ids: ['product-123'],
  content_type: 'product',
  content_name: 'Product Name',
  value: 29.99,
  currency: 'USD'
}

Add to Cart Enhanced Tracking

// Custom enhanced tracking for cart additions
$w.onReady(function () {
  $w('#productPage').onProductAdded((event) => {
    const product = event.product;

    fbq('track', 'AddToCart', {
      content_ids: [product.id],
      content_name: product.name,
      content_type: 'product',
      value: product.price,
      currency: product.currency
    });
  });
});

Purchase Event with Order Details

// Enhanced purchase tracking on thank-you page
$w.onReady(function () {
  if ($w('#thankYouPage').isVisible) {
    // Get order data from Wix Stores API
    wixPay.getOrderInfo().then((order) => {
      fbq('track', 'Purchase', {
        content_ids: order.items.map(item => item.id),
        content_type: 'product',
        value: order.total,
        currency: order.currency,
        num_items: order.items.length,
        transaction_id: order.id
      });
    });
  }
});

Dynamic Product Ads Setup

Enable catalog sales optimization:

  1. Create Product Catalog in Meta Commerce Manager
  2. Connect Wix Stores to Meta catalog
  3. Set up product feed sync
  4. Configure event parameters for catalog matching
// Enhanced product parameters for DPA
fbq('track', 'ViewContent', {
  content_ids: ['wix-product-123'],
  content_category: 'Electronics > Smartphones',
  content_name: 'iPhone 15 Pro',
  content_type: 'product',
  value: 999.00,
  currency: 'USD',
  // Additional DPA parameters
  availability: 'in stock',
  condition: 'new',
  brand: 'Apple'
});

Advanced Matching

Improve event matching quality by sending customer information:

// Initialize with advanced matching
fbq('init', 'YOUR_PIXEL_ID', {
  em: 'hashed_email@example.com', // SHA-256 hashed
  ph: 'hashed_phone', // SHA-256 hashed
  fn: 'hashed_firstname',
  ln: 'hashed_lastname',
  ct: 'hashed_city',
  st: 'hashed_state',
  zp: 'hashed_zipcode',
  country: 'hashed_country'
});

Wix Members Integration

For Wix sites with member login:

import wixUsers from 'wix-users';

$w.onReady(function () {
  if (wixUsers.currentUser.loggedIn) {
    wixUsers.currentUser.getEmail()
      .then((email) => {
        // Hash email for privacy
        const hashedEmail = hashEmail(email);

        fbq('init', 'YOUR_PIXEL_ID', {
          em: hashedEmail
        });
      });
  }
});

function hashEmail(email) {
  // Implement SHA-256 hashing
  // Use crypto library or external service
  return sha256(email.toLowerCase().trim());
}

Conversions API (CAPI) Setup

Send server-side events for improved reliability and iOS 14+ attribution:

Prerequisites

  • Meta Pixel installed and working
  • Access to Meta Events Manager
  • Server endpoint or middleware capability

Configuration Steps

  1. Generate Access Token

    • Go to Meta Events Manager
    • Select your pixel
    • Click Settings > Conversions API
    • Generate access token
  2. Wix Velo Backend Implementation

// Backend file: http-functions.js
import { fetch } from 'wix-fetch';

export async function post_sendConversion(request) {
  const data = await request.body.json();

  const eventData = {
    data: [{
      event_name: data.event_name,
      event_time: Math.floor(Date.now() / 1000),
      action_source: 'website',
      event_source_url: data.event_source_url,
      user_data: {
        em: data.user_email_hash,
        ph: data.user_phone_hash,
        client_ip_address: request.ip,
        client_user_agent: request.headers['user-agent'],
        fbc: data.fbc, // Click ID
        fbp: data.fbp  // Browser ID
      },
      custom_data: data.custom_data
    }],
    access_token: 'YOUR_ACCESS_TOKEN'
  };

  const response = await fetch(
    `https://graph.facebook.com/v18.0/YOUR_PIXEL_ID/events`,
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(eventData)
    }
  );

  return response.json();
}
  1. Frontend Integration
// Send events to both pixel and CAPI
import { sendConversion } from 'backend/http-functions';

function trackPurchase(orderData) {
  // Browser pixel event
  fbq('track', 'Purchase', {
    value: orderData.total,
    currency: orderData.currency,
    transaction_id: orderData.id
  });

  // Server-side CAPI event
  sendConversion({
    event_name: 'Purchase',
    event_source_url: window.location.href,
    user_email_hash: orderData.emailHash,
    fbc: getCookie('_fbc'),
    fbp: getCookie('_fbp'),
    custom_data: {
      value: orderData.total,
      currency: orderData.currency,
      transaction_id: orderData.id
    }
  });
}

Event Deduplication

Prevent double-counting events sent via both pixel and CAPI:

// Browser-side with event_id
const eventId = generateUniqueId();

fbq('track', 'Purchase', {
  value: 99.99,
  currency: 'USD'
}, {
  eventID: eventId
});

// Send same event_id to CAPI
sendConversion({
  event_name: 'Purchase',
  event_id: eventId, // Must match
  custom_data: {
    value: 99.99,
    currency: 'USD'
  }
});

Troubleshooting

Pixel Not Firing

Check Installation:

// Test if pixel is loaded
if (typeof fbq !== 'undefined') {
  console.log('Meta Pixel loaded successfully');
} else {
  console.error('Meta Pixel not loaded');
}

Common Issues:

  • Ad blockers preventing pixel load
  • Custom code not applied to all pages
  • Incorrect pixel ID
  • Script loading order issues

Solutions:

  1. Test with ad blockers disabled
  2. Verify custom code placement (head vs. body)
  3. Check pixel ID in Events Manager
  4. Ensure fbq is defined before calling track events

Events Not Appearing in Events Manager

Debugging Steps:

  1. Check Browser Console
// Enable debug mode
fbq('track', 'PageView', {}, { debug: true });
  1. Use Meta Pixel Helper

    • Install Chrome extension
    • Look for green icon (pixel active)
    • Click to see events firing
  2. Test Events Tool

    • Go to Events Manager > Test Events
    • Enter your test browser ID
    • Perform actions on site
    • Verify events appear in real-time

Low Event Match Quality

Event Match Quality (EMQ) affects ad performance. Target score above 6.0/10.

Improvement Strategies:

  1. Implement Advanced Matching
// Add customer information parameters
fbq('init', 'PIXEL_ID', {
  em: hashedEmail,
  ph: hashedPhone,
  fn: hashedFirstName,
  ln: hashedLastName
});
  1. Use Conversions API

    • Server events have higher match quality
    • Less affected by browser restrictions
  2. Include fbp and fbc Parameters

// These cookies improve attribution
const fbp = getCookie('_fbp');
const fbc = getCookie('_fbc');

Wix-Specific Issues

Issue: Events Firing Multiple Times

  • Cause: Wix's SPA architecture can trigger events multiple times
  • Solution: Implement debouncing
let eventFired = false;

$w.onReady(function () {
  if (!eventFired) {
    fbq('track', 'ViewContent');
    eventFired = true;
  }
});

Issue: Cart Events Not Tracking

  • Verify Wix Stores integration is enabled
  • Check that e-commerce tracking is turned on in settings
  • Test cart actions in incognito mode

Issue: Custom Events Not Firing

  • Ensure Velo/Corvid is enabled for site
  • Verify event code is in proper file (page code vs. site code)
  • Check for JavaScript errors in console

Privacy and Compliance

GDPR Compliance

Obtain consent before loading Meta Pixel:

// Wait for consent before initializing
if (hasUserConsent()) {
  loadMetaPixel();
}

function loadMetaPixel() {
  !function(f,b,e,v,n,t,s) {
    // Pixel base code here
  }(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');

  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
}

Limited Data Use (LDU)

For California users (CCPA compliance):

fbq('dataProcessingOptions', ['LDU'], 1, 1000);
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');

Integrate with Wix's cookie consent banner:

// Check Wix consent status
if (typeof wixPrivacy !== 'undefined') {
  wixPrivacy.onConsentChanged((event) => {
    if (event.category === 'analytics' && event.granted) {
      loadMetaPixel();
    }
  });
}

Performance Optimization

Lazy Loading Pixel

Improve page speed by delaying pixel load:

// Load pixel after page interactive
window.addEventListener('load', function() {
  setTimeout(function() {
    // Load Meta Pixel code here
  }, 2000);
});

Conditional Loading

Load pixel only on relevant pages:

$w.onReady(function () {
  const currentPage = $w('#currentPage').id;

  // Only load on product and checkout pages
  if (currentPage === 'productPage' || currentPage === 'checkoutPage') {
    loadMetaPixel();
  }
});

Testing and Validation

Pre-Launch Checklist

  • Pixel ID correctly configured
  • PageView event firing on all pages
  • E-commerce events tracking for Wix Stores
  • Custom events implemented as needed
  • Advanced matching enabled
  • Meta Pixel Helper shows no errors
  • Test Events showing data in Events Manager
  • Privacy compliance implemented
  • Documentation created for team

Event Testing Script

// Comprehensive pixel test
function testMetaPixel() {
  console.log('=== Meta Pixel Test ===');

  // Check if loaded
  if (typeof fbq === 'undefined') {
    console.error('❌ Pixel not loaded');
    return;
  }
  console.log('✓ Pixel loaded');

  // Test standard events
  const events = ['PageView', 'ViewContent', 'AddToCart'];
  events.forEach(event => {
    try {
      fbq('trackSingle', 'YOUR_PIXEL_ID', event, {
        test_event_code: 'TEST12345'
      });
      console.log(`✓ ${event} fired`);
    } catch (e) {
      console.error(`❌ ${event} failed:`, e);
    }
  });
}

// Run test
testMetaPixel();

Best Practices

Event Naming Conventions

Use consistent naming for custom events:

// Good: Descriptive and consistent
fbq('trackCustom', 'SubscribeNewsletter');
fbq('trackCustom', 'DownloadGuide');
fbq('trackCustom', 'WatchVideo');

// Avoid: Vague or inconsistent
fbq('trackCustom', 'event1');
fbq('trackCustom', 'click_button');

Parameter Standardization

Always include value and currency when applicable:

// Complete event data
fbq('track', 'Lead', {
  content_name: 'Newsletter Signup',
  content_category: 'Email Marketing',
  value: 5.00, // Estimated lead value
  currency: 'USD'
});

Documentation

Maintain pixel implementation documentation:

/**
 * Meta Pixel Event Tracking
 *
 * Standard Events:
 * - PageView: Auto-fired on all pages
 * - ViewContent: Product and blog pages
 * - AddToCart: Wix Stores cart additions
 * - Purchase: Order confirmation page
 *
 * Custom Events:
 * - SubscribeNewsletter: Email form submission
 * - DownloadGuide: Resource download clicks
 * - BookDemo: Demo request form
 *
 * CAPI Integration: Enabled for Purchase events
 * Advanced Matching: Enabled with email hashing
 */
// SYS.FOOTER