How to Install Meta Pixel on Weebly | OpsBlu Docs

How to Install Meta Pixel on Weebly

Add the Meta Pixel (Facebook Pixel) to Weebly using the SEO header code area. Covers base code installation, standard events, and custom audience setup.

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)
  • Weebly paid plan (Personal, Professional, or Performance)

Installation Methods

  1. Go to Weebly Editor > Settings > SEO
  2. In Header Code, paste the 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', '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. Click Save
  3. Publish your site

Method 2: Via Google Tag Manager

If using GTM (recommended for flexibility):

  1. In GTM, create a new Custom HTML tag
  2. Paste the Meta Pixel code
  3. Set trigger to All Pages
  4. Save and publish GTM container

Method 3: Weebly App Center

Some third-party apps offer Meta Pixel integration:

  • Search App Center for "Facebook Pixel" or "Meta Pixel"
  • Note: App quality varies, verify installation works

Standard Events

PageView (Automatic)

The base code tracks PageView automatically on all pages.

ViewContent (Product Pages)

For Performance plan stores:

<!-- Add after base Meta Pixel code -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  var productTitle = document.querySelector('.wsite-com-product-title');
  var productPrice = document.querySelector('.wsite-com-product-price');

  if (productTitle && productPrice) {
    fbq('track', 'ViewContent', {
      content_name: productTitle.textContent.trim(),
      value: parseFloat(productPrice.textContent.replace(/[^0-9.]/g, '')),
      currency: 'USD'
    });
  }
});
</script>

AddToCart

Track add to cart clicks:

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.wsite-com-add-to-cart').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var productTitle = document.querySelector('.wsite-com-product-title');
      var productPrice = document.querySelector('.wsite-com-product-price');

      if (productTitle && productPrice) {
        fbq('track', 'AddToCart', {
          content_name: productTitle.textContent.trim(),
          value: parseFloat(productPrice.textContent.replace(/[^0-9.]/g, '')),
          currency: 'USD'
        });
      }
    });
  });
});
</script>

Lead (Contact Forms)

Track form submissions:

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.wsite-form').forEach(function(form) {
    form.addEventListener('submit', function() {
      fbq('track', 'Lead', {
        content_name: 'Contact Form'
      });
    });
  });
});
</script>

Purchase (Confirmation Page)

For order confirmation tracking, add to your thank you page:

<script>
fbq('track', 'Purchase', {
  value: ORDER_VALUE,
  currency: 'USD'
});
</script>

Note: Dynamic order values require custom implementation or Square's checkout integration.

Verification

Meta Pixel Helper

  1. Install Meta Pixel Helper Chrome extension
  2. Visit your Weebly site
  3. Check the extension icon for pixel status

Events Manager

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

Diagnostics

In Events Manager:

  1. Go to Diagnostics tab
  2. Check for any errors or warnings
  3. Address issues as needed

Conversion API (CAPI)

For server-side tracking (improved accuracy):

Option 1: Third-Party Integration

  • Use services like Stape.io or AddingWell
  • Configure server-side GTM
  • Requires technical setup

Option 2: Square Integration

  • Square (Weebly's parent company) does not currently offer a direct CAPI integration for Weebly sites
  • For server-side tracking on Weebly, use a server-side GTM container as described in Option 1

For GDPR/CCPA compliance:

<script>
// Don't fire pixel until consent given
var pixelInitialized = false;

function initPixel() {
  if (!pixelInitialized) {
    fbq('init', 'YOUR_PIXEL_ID');
    fbq('track', 'PageView');
    pixelInitialized = true;
  }
}

// Call initPixel() when user consents
</script>

Troubleshooting

Pixel Not Firing

  1. Check Pixel Helper extension
  2. Verify code is in Header Code (not Footer)
  3. Confirm paid plan status
  4. Clear browser cache
  5. Check for JavaScript errors

Duplicate Events

  1. Remove any App Center pixel apps if using manual code
  2. Check for multiple pixel initializations
  3. Verify code isn't added twice

Events Missing

  1. Check event code syntax
  2. Verify DOM selectors match your theme
  3. Test in browser console
  4. Use Events Manager Test Events

Best Practices

  1. Use Aggregated Event Measurement for iOS 14+ tracking
  2. Verify domain in Business Manager
  3. Set up Conversions API for improved accuracy
  4. Test events before running ads
  5. Configure consent mode for privacy compliance

Next Steps

शीर्ष पर वापस जाएँ