How to Install Meta Pixel on Duda | OpsBlu Docs

How to Install Meta Pixel on Duda

Add the Meta Pixel (Facebook Pixel) to Duda using the head HTML injection setting. Covers base code placement, standard events, and dynamic remarketing.

For general Meta Pixel concepts, see the Meta Ads overview.

Prerequisites

  • Meta Business Suite or Ads Manager account
  • Meta Pixel ID (15-16 digit number)
  • Duda site editing access

Installation Methods

Duda has built-in Meta Pixel support:

  1. Open your site in Duda editor
  2. Go to Site Settings (gear icon)
  3. Navigate to Site Settings > Facebook Pixel
  4. Enter your Pixel ID
  5. Click Save
  6. Publish your site

Benefits:

  • Automatic PageView tracking
  • Duda-optimized loading
  • Works with ecommerce events

Method 2: Head HTML Injection

For custom configurations:

  1. Go to Site Settings > Head HTML
  2. Paste the Meta Pixel 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', '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. Replace YOUR_PIXEL_ID with your actual Pixel ID
  2. Publish your site

Method 3: Via Google Tag Manager

If using GTM:

  1. Install GTM: GTM Setup for Duda
  2. Create Custom HTML tag with Meta Pixel code
  3. Set trigger to All Pages
  4. Publish GTM container

Standard Events

PageView (Automatic)

Included in base code - fires on all pages.

ViewContent (Product Pages)

Using Duda's dmAPI:

<script>
document.addEventListener('DOMContentLoaded', function() {
  if (window.dmAPI && window.dmAPI.getProductInfo) {
    var product = window.dmAPI.getProductInfo();
    if (product) {
      fbq('track', 'ViewContent', {
        content_name: product.name,
        content_ids: [product.id],
        content_type: 'product',
        value: product.price,
        currency: product.currency || 'USD'
      });
    }
  }
});
</script>

AddToCart

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.add-to-cart-button').forEach(function(btn) {
    btn.addEventListener('click', function() {
      if (window.dmAPI && window.dmAPI.getProductInfo) {
        var product = window.dmAPI.getProductInfo();
        if (product) {
          fbq('track', 'AddToCart', {
            content_name: product.name,
            content_ids: [product.id],
            content_type: 'product',
            value: product.price,
            currency: product.currency || 'USD'
          });
        }
      }
    });
  });
});
</script>

Lead (Form Submissions)

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('form').forEach(function(form) {
    form.addEventListener('submit', function() {
      fbq('track', 'Lead', {
        content_name: form.id || 'contact_form'
      });
    });
  });
});
</script>

Purchase

For order confirmation page:

<script>
// Get order data from URL parameters or Duda order API
fbq('track', 'Purchase', {
  value: ORDER_VALUE,
  currency: 'USD',
  content_type: 'product'
});
</script>

Verification

Meta Pixel Helper

  1. Install Meta Pixel Helper extension
  2. Visit your live Duda site
  3. Click extension icon to verify pixel status

Events Manager

  1. Go to Events Manager
  2. Select your Pixel
  3. Check Test Events tab
  4. Browse your site and verify events appear

Conversion API (CAPI)

Server-side tracking sends events directly from your server to Meta, bypassing ad blockers and improving match rates after iOS 14+ privacy changes.

Duda does not offer native CAPI support. Use one of these approaches:

Option 1: Server-Side GTM via Stape.io

  1. Set up a Stape.io server-side GTM container
  2. Configure the Meta CAPI tag in your server container
  3. Forward browser-side pixel events to your server endpoint
  4. Stape handles deduplication between browser and server events

Option 2: Duda Webhooks + Custom Server

  1. In Duda, enable ecommerce webhooks for order.created events
  2. Build a small server endpoint (Node.js, Python, etc.) that receives the webhook
  3. Forward the purchase data to Meta's Conversions API with the required parameters (event_name, event_time, user_data, custom_data)
  4. Include event_id matching your browser-side Purchase event for deduplication

For GDPR/CCPA compliance:

<script>
// Initialize without firing PageView
fbq('init', 'YOUR_PIXEL_ID');

// Only fire after consent
function firePixelWithConsent() {
  fbq('track', 'PageView');
}

// Call firePixelWithConsent() when user grants consent
</script>

Or use GTM Consent Mode with Meta Pixel tag.

Troubleshooting

Pixel Not Firing

  1. Check Pixel Helper extension
  2. Verify Pixel ID is correct
  3. Confirm site is published
  4. Clear Duda CDN cache
  5. Test in incognito mode

Events Missing

  1. Check event code syntax
  2. Verify dmAPI is available (ecommerce sites only)
  3. Adjust DOM selectors for your theme
  4. Test in browser console

Duplicate Events

  1. Check for multiple pixel implementations
  2. Remove manual code if using native integration
  3. Verify GTM isn't firing duplicate tags

Best Practices

  1. Use native integration when possible for reliability
  2. Implement CAPI for better accuracy
  3. Verify domain in Business Manager
  4. Set up Aggregated Event Measurement for iOS 14+
  5. Test all events before running ads

Next Steps

返回顶部