Install Meta Pixel on Ecwid (Step-by-Step)

How to install Facebook/Meta Pixel on Ecwid using built-in integration, custom code, or Google Tag Manager.

Ecwid supports Meta Pixel (Facebook Pixel) installation through multiple methods, each with different capabilities and requirements.

Method Comparison

Method	Difficulty	Ecommerce Tracking	Customization	Recommended For
Built-in Integration	Easy	Full	Low	Quick setup, Venture+ plans
Custom Code Injection	Medium	Full	High	Most stores (recommended)
Google Tag Manager	Medium	Full	High	Enterprise, multiple pixels
Facebook Sales Channel	Easy	Limited	None	Facebook Shop integration only

Understanding Meta Pixel on Ecwid

Architecture Considerations

Ecwid is an embedded widget, which affects Meta Pixel implementation:

Host Page: Your website where Ecwid is embedded
Ecwid Widget: The shopping functionality
Pixel Scope: Must track both host and widget interactions

Important Notes

Dual Pixel Scenario:

Host platform may have its own Meta Pixel
Ecwid widget needs separate tracking
Both can coexist with same Pixel ID

Conversions API:

Server-side tracking for better attribution
Requires additional setup via Ecwid webhooks
Recommended for iOS 14.5+ tracking

Method 1: Built-in Ecwid Integration (Easiest)

Ecwid provides native Meta Pixel integration for Venture plans and higher.

Requirements

Ecwid Venture plan or higher ($35/month)
Meta Pixel ID (16-digit number)
Facebook Business Manager account

Setup Steps

Get Your Meta Pixel ID

a. Go to Meta Events Manager

b. Select your pixel (or create new one)

c. Copy the Pixel ID (16-digit number like 1234567890123456)
Add to Ecwid Control Panel

a. Log in to my.ecwid.com

b. Go to Settings → General → Tracking & Analytics

c. Find Facebook Pixel section

d. Enter your Pixel ID

e. Toggle Track ecommerce events to ON

f. Click Save
Test with Meta Pixel Helper

a. Install Meta Pixel Helper browser extension

b. Visit your store

c. Pixel Helper should show green icon

d. Click icon to verify pixel is firing
Verify in Events Manager

a. Go to Meta Events Manager

b. Click Test Events

c. Enter your store URL

d. Perform actions (view product, add to cart)

e. Events should appear in real-time

What Gets Tracked (Built-in Integration)

Standard Events:

✓ PageView - All page views within widget
✓ ViewContent - Product detail pages
✓ AddToCart - Items added to cart
✓ InitiateCheckout - Checkout started
✓ Purchase - Order completed

Event Parameters:

✓ content_ids - Product IDs
✓ content_name - Product names
✓ content_type - 'product'
✓ value - Price/order total
✓ currency - Store currency

Limitations of Built-in Integration

Requires Ecwid Venture plan ($35/month minimum)
Cannot add custom events
Cannot customize event parameters
No Advanced Matching (hashed customer data)
No control over consent management
Limited debugging capabilities

Method 2: Custom Code Injection (Recommended)

Add Meta Pixel directly using Ecwid's custom code feature.

Requirements

Any Ecwid plan (including Free)
Meta Pixel ID
Basic JavaScript knowledge

Setup Steps

Get Meta Pixel ID

Follow steps from Method 1 to get your Pixel ID from Meta Events Manager.
Access Custom Code Section

a. Ecwid Control Panel → Settings → General → Tracking & Analytics

b. Scroll to Custom JavaScript Code section

c. Click Add custom code (or edit existing)

Add Meta Pixel Base Code

<!-- 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', '1234567890123456'); // Replace with your Pixel ID
fbq('track', 'PageView');
</script>

<noscript>
  <img height="1" width="1" style="display:none"
       src="https://www.facebook.com/tr?id=1234567890123456&ev=PageView&noscript=1"/>
</noscript>

Replace 1234567890123456 with your actual Pixel ID.

Add Ecwid Event Tracking

Add below the base code:

<script>
// Wait for Ecwid to load
Ecwid.OnAPILoaded.add(function() {

  // Track ViewContent (product views)
  Ecwid.OnPageLoad.add(function(page) {
    if (page.type === 'PRODUCT') {
      Ecwid.getProduct(page.productId, function(product) {
        fbq('track', 'ViewContent', {
          content_ids: [product.id.toString()],
          content_name: product.name,
          content_type: 'product',
          value: product.defaultDisplayedPrice,
          currency: product.currency || 'USD'
        });
      });
    }
  });

  // Track AddToCart
  var previousCart = null;
  Ecwid.OnCartChanged.add(function(cart) {
    if (previousCart && cart.items.length > previousCart.items.length) {
      var newItem = cart.items[cart.items.length - 1];

      fbq('track', 'AddToCart', {
        content_ids: [newItem.product.id.toString()],
        content_name: newItem.product.name,
        content_type: 'product',
        value: newItem.price * newItem.quantity,
        currency: cart.currency || 'USD'
      });
    }
    previousCart = JSON.parse(JSON.stringify(cart));
  });

  // Track InitiateCheckout
  var checkoutStarted = false;
  Ecwid.OnPageLoad.add(function(page) {
    if (page.type === 'CHECKOUT_ADDRESS' && !checkoutStarted) {
      checkoutStarted = true;

      Ecwid.Cart.get(function(cart) {
        fbq('track', 'InitiateCheckout', {
          content_ids: cart.items.map(function(item) {
            return item.product.id.toString();
          }),
          contents: cart.items.map(function(item) {
            return {
              id: item.product.id.toString(),
              quantity: item.quantity
            };
          }),
          content_type: 'product',
          value: cart.total,
          currency: cart.currency || 'USD',
          num_items: cart.items.length
        });
      });
    }

    if (page.type !== 'CHECKOUT_ADDRESS') {
      checkoutStarted = false;
    }
  });

  // Track Purchase
  Ecwid.OnOrderPlaced.add(function(order) {
    fbq('track', 'Purchase', {
      content_ids: order.items.map(function(item) {
        return item.product.id.toString();
      }),
      contents: order.items.map(function(item) {
        return {
          id: item.product.id.toString(),
          quantity: item.quantity,
          item_price: item.price
        };
      }),
      content_type: 'product',
      value: order.total,
      currency: order.currency || 'USD',
      num_items: order.items.length
    });
  });

});
</script>

Save and Test

a. Click Save

b. Visit your store with Meta Pixel Helper extension

c. Verify events fire correctly

Advanced Matching (Recommended)

Enable Advanced Matching to improve attribution for logged-in customers:

// Initialize with Advanced Matching
Ecwid.OnAPILoaded.add(function() {

  Ecwid.getCustomerInfo(function(customer) {
    if (customer && customer.email) {
      // Re-initialize with customer data
      fbq('init', '1234567890123456', {
        em: customer.email.toLowerCase().trim(), // Auto-hashed by Meta
        fn: customer.firstName ? customer.firstName.toLowerCase().trim() : undefined,
        ln: customer.lastName ? customer.lastName.toLowerCase().trim() : undefined,
        ph: customer.phone ? customer.phone.replace(/[^0-9]/g, '') : undefined
      });
    }
  });

});

Privacy Note: Meta automatically hashes this data before sending. Ensure your privacy policy covers this usage.

Method 3: Google Tag Manager

Install Meta Pixel via GTM for better management.

Setup Steps

Install GTM on Ecwid

See GTM Setup for GTM installation.

Create Meta Pixel Base Tag

In GTM:

a. Tags → New

b. Tag Configuration → Custom HTML

c. Paste Meta Pixel base 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', '1234567890123456');
fbq('track', 'PageView');
</script>

d. Triggering: All Pages

e. Save as "Meta Pixel - Base Code"

Create Event Tags

For each Ecwid event, create a Custom HTML tag:

Example: ViewContent Tag

<script>
fbq('track', 'ViewContent', {
  content_ids: ['{{DLV - Product ID}}'],
  content_name: '{{DLV - Product Name}}',
  content_type: 'product',
  value: {{DLV - Product Price}},
  currency: '{{DLV - Currency}}'
});
</script>

Use GTM variables to pull data from Ecwid data layer.

Configure Triggers

Create triggers for Ecwid events (see GTM Data Layer).
Publish Container

Submit → Publish

GTM Benefits

Easier to manage multiple pixels
Version control for changes
Built-in testing with Preview mode
Consent management integration
Works with host platform GTM

Host Platform Considerations

WordPress

If WordPress has Meta Pixel plugin:

Plugin tracks WordPress pages
Must separately add Ecwid pixel for store events
Use same Pixel ID for both

Recommended:

Install GTM via plugin
Configure Ecwid events in GTM

Wix

Wix has built-in Meta Pixel integration:

Tracks Wix pages only
Does NOT track Ecwid widget
Must add Ecwid custom code separately

Squarespace

Squarespace supports code injection:

Add Meta Pixel to Squarespace settings for pages
Add Ecwid custom code for store events
Use same Pixel ID

Custom HTML Sites

Full control:

Add Meta Pixel to site <head>
Add Ecwid tracking via custom code
Single pixel ID tracks everything

Conversions API Setup (Advanced)

For improved tracking accuracy, especially post-iOS 14.5.

Why Conversions API?

Server-side tracking: Not blocked by browsers/ad blockers
Better attribution: Direct connection to Meta
Required for iOS: Bypass iOS tracking limitations
Deduplication: Works alongside browser pixel

Implementation Steps

Set Up Webhook

a. Ecwid Control Panel → Settings → General → Webhooks

b. Create webhook for order.created event

c. Point to your server endpoint

Server Endpoint

Your server receives order data and sends to Meta:

// Node.js example
const crypto = require('crypto');
const axios = require('axios');

app.post('/ecwid-webhook', async (req, res) => {
  const order = req.body;

  // Hash customer email
  const hashedEmail = crypto
    .createHash('sha256')
    .update(order.email.toLowerCase().trim())
    .digest('hex');

  // Send to Meta Conversions API
  await axios.post(
    `https://graph.facebook.com/v18.0/${PIXEL_ID}/events`,
    {
      data: [{
        event_name: 'Purchase',
        event_time: Math.floor(Date.now() / 1000),
        event_source_url: order.refererUrl,
        user_data: {
          em: [hashedEmail],
          fn: [hashData(order.billingPerson.firstName)],
          ln: [hashData(order.billingPerson.lastName)],
          ph: [hashData(order.billingPerson.phone)]
        },
        custom_data: {
          value: order.total,
          currency: order.currency,
          content_ids: order.items.map(i => i.product.id),
          contents: order.items.map(i => ({
            id: i.product.id,
            quantity: i.quantity,
            item_price: i.price
          })),
          content_type: 'product',
          num_items: order.items.length
        }
      }],
      access_token: ACCESS_TOKEN
    }
  );

  res.sendStatus(200);
});

Event Deduplication

Use event_id to prevent duplicate tracking:

// In browser pixel
fbq('track', 'Purchase', {...}, {
  eventID: 'order-' + orderNumber
});

// In Conversions API
{
  event_name: 'Purchase',
  event_id: 'order-' + orderNumber, // Same ID
  // ... rest of data
}

Plan Limitations

Feature	Free	Venture	Business	Unlimited
Built-in Meta Pixel		✓	✓	✓
Custom Code	✓	✓	✓	✓
GTM Support	✓	✓	✓	✓
Webhooks (CAPI)	✓	✓	✓	✓

Recommendation: Use custom code (free) or GTM instead of upgrading just for built-in integration.

Verification & Testing

1. Meta Pixel Helper

Install browser extension and verify:

✓ Green icon (pixel loaded)
✓ No errors or warnings
✓ Events fire on correct pages
✓ Parameters populated correctly

2. Events Manager Test Events

Go to Meta Events Manager
Click Test Events
Enter your store URL
Perform actions
See events appear within seconds

3. Browser Console

// Check if Meta Pixel loaded
console.log(window.fbq);

// Check pixel ID
console.log(window._fbq);

Troubleshooting

Pixel Not Loading

Check:

Correct Pixel ID (16 digits)
Code in correct location (Custom JavaScript Code section)
No JavaScript errors in console
Ad blocker disabled for testing

Fix:

Verify Pixel ID in Events Manager
Check browser console for errors
Test in incognito mode

Events Not Firing

See Events Not Firing Troubleshooting.

Quick checks:

Ecwid API loaded (check typeof Ecwid !== 'undefined')
Event listeners properly wrapped in Ecwid.OnAPILoaded.add()
Meta Pixel Helper shows events
Events Manager Test Events shows activity

Duplicate Events

Cause: Multiple pixel implementations.

Check:

Ecwid built-in integration
Custom code in Ecwid
GTM tags
Host platform pixel
App/plugin adding pixel

Fix: Choose ONE method, remove others.

Missing Event Parameters

Cause: Data not populated correctly.

Fix:

// Always provide all parameters
fbq('track', 'AddToCart', {
  content_ids: ['123'],        // Required: array
  content_type: 'product',     // Required
  value: 29.99,                // Number, no $
  currency: 'USD'              // ISO code
});

Privacy & Compliance

GDPR/CCPA Compliance

Implement consent management:

// Default: Do not load pixel
var pixelLoaded = false;

// When user consents
function loadMetaPixel() {
  if (pixelLoaded) return;
  pixelLoaded = true;

  // Load pixel code here
  !function(f,b,e,v,n,t,s){...}(...);
  fbq('init', '1234567890123456');
  fbq('track', 'PageView');
}

// Call when consent given
document.getElementById('accept-cookies').addEventListener('click', function() {
  loadMetaPixel();
});

Limited Data Use (California)

For California users:

fbq('dataProcessingOptions', ['LDU'], 1, 1000); // California state code

Next Steps

Meta Pixel Event Tracking - Configure custom events
GTM Setup - Install Google Tag Manager
Events Not Firing - Debug tracking issues

For general Meta Pixel concepts, see Meta Pixel Guide.

Nach oben