Installing Meta Pixel on Squarespace | Blue Frog Docs

Installing Meta Pixel on Squarespace

Complete guide to setting up Meta (Facebook) Pixel on Squarespace using native integration or custom code injection for advanced tracking.

Installing Meta Pixel on Squarespace

Meta Pixel (formerly Facebook Pixel) allows you to track conversions, optimize ads, and build audiences for Facebook and Instagram advertising. This guide covers both native integration and custom implementation on Squarespace.

Prerequisites

  • Meta Business Account - Create at business.facebook.com
  • Meta Pixel - Create in Events Manager
  • Your Pixel ID - 15-16 digit number
  • Squarespace Admin Access - Ability to edit site settings

Step 1: Get Your Meta Pixel ID

  1. Go to Meta Events Manager
  2. Select your pixel (or create a new one)
  3. Click Settings in the left sidebar
  4. Copy your Pixel ID (15-16 digit number)

Squarespace offers a built-in Meta Pixel integration for simple setup.

Installation Steps

  1. Log in to your Squarespace website
  2. Go to Settings > Advanced > External API Keys
  3. Scroll to Facebook Pixel
  4. Paste your Pixel ID
  5. Click Save

What's Tracked Automatically

With native integration, Squarespace automatically tracks:

  • PageView - Every page load
  • ViewContent - Product page views
  • AddToCart - Items added to cart
  • InitiateCheckout - Checkout started
  • Purchase - Completed orders (on order confirmation page)

Limitations

  • Cannot customize event parameters
  • Limited control over advanced matching
  • Cannot track custom events
  • Cannot use custom conversions easily

Method 2: Code Injection (Advanced)

For full control over tracking, use Code Injection to manually install Meta Pixel.

Installation Code

Add to Settings > Advanced > Code Injection > Header:

<!-- 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 -->

Important: Replace YOUR_PIXEL_ID with your actual Pixel ID (appears twice).

Advanced Matching helps Meta match more conversions by sending hashed user data.

Implementation

Modify the fbq('init') line to include user data:

fbq('init', 'YOUR_PIXEL_ID', {
  em: getHashedEmail(), // Email (hashed)
  fn: getHashedFirstName(), // First name (hashed)
  ln: getHashedLastName(), // Last name (hashed)
  external_id: getUserId() // External ID if available
});

function getHashedEmail() {
  // Implement if you have user email available
  // Must be SHA256 hashed
  return null;
}

function getHashedFirstName() {
  return null;
}

function getHashedLastName() {
  return null;
}

function getUserId() {
  // Return user ID if using member areas
  return null;
}

Note: Only send hashed data and comply with privacy regulations (GDPR, CCPA).

Squarespace 7.0 vs 7.1 Considerations

Squarespace 7.0

Native integration and code injection work reliably on all 7.0 templates.

Testing Checklist:

  • Homepage
  • Product pages
  • Checkout flow
  • Order confirmation

Squarespace 7.1 (Fluid Engine)

7.1 uses more dynamic content loading, which can affect pixel firing.

Ajax Cart Handling:

For Ajax cart events (add/remove), add to Footer Code Injection:

<script>
  (function() {
    if (window.Y && window.Y.Squarespace && typeof fbq !== 'undefined') {
      window.Y.use(function(Y) {
        // Track Ajax add to cart
        Y.on('cart:item:added', function(e) {
          fbq('track', 'AddToCart', {
            content_ids: [e.item.sku || e.item.id],
            content_name: e.item.title,
            content_type: 'product',
            value: e.item.price / 100, // Convert cents to dollars
            currency: 'USD' // Update to your currency
          });
        });
      });
    }
  })();
</script>

E-commerce Event Tracking

For Squarespace Commerce sites, implement standard Meta Pixel e-commerce events.

ViewContent (Product Page)

Add to Footer Code Injection:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var productBlock = document.querySelector('.sqs-commerce-product-detail');

    if (productBlock && typeof fbq !== 'undefined') {
      // Extract product data
      var productName = document.querySelector('.product-title') ?
                        document.querySelector('.product-title').textContent.trim() :
                        'Unknown Product';

      var productPrice = document.querySelector('.product-price') ?
                         parseFloat(document.querySelector('.product-price').textContent.replace(/[^0-9.]/g, '')) :
                         0;

      var productId = window.location.pathname.split('/').pop();

      fbq('track', 'ViewContent', {
        content_ids: [productId],
        content_name: productName,
        content_type: 'product',
        value: productPrice,
        currency: 'USD'
      });
    }
  });
</script>

AddToCart

Already covered in Ajax cart handling above.

InitiateCheckout

Track when users start checkout:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.location.pathname.includes('/checkout') && typeof fbq !== 'undefined') {
      if (window.Y && window.Y.Squarespace) {
        window.Y.use(function(Y) {
          var cart = Y.Squarespace.Commerce.getCart();

          if (cart && cart.entries) {
            var contentIds = cart.entries.map(function(item) {
              return item.sku || item.id;
            });

            fbq('track', 'InitiateCheckout', {
              content_ids: contentIds,
              num_items: cart.entries.length,
              value: cart.subtotal / 100,
              currency: 'USD'
            });
          }
        });
      }
    }
  });
</script>

Purchase

Add to Settings > Advanced > Code Injection > ORDER CONFIRMATION PAGE:

<script>
  (function() {
    var orderData = {orderInformation};

    if (orderData && typeof fbq !== 'undefined') {
      var contentIds = orderData.lineItems.map(function(item) {
        return item.sku || item.productId;
      });

      fbq('track', 'Purchase', {
        content_ids: contentIds,
        content_type: 'product',
        value: orderData.grandTotal.value,
        currency: orderData.grandTotal.currency,
        num_items: orderData.lineItems.length
      });
    }
  })();
</script>

Custom Events

Track custom actions specific to your business.

Form Submissions

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var forms = document.querySelectorAll('.sqs-block-form form');

    forms.forEach(function(form) {
      form.addEventListener('submit', function(e) {
        if (typeof fbq !== 'undefined') {
          var block = form.closest('.sqs-block');
          var heading = block ? block.querySelector('h1, h2, h3') : null;
          var formName = heading ? heading.textContent.trim() : 'Contact Form';

          fbq('track', 'Lead', {
            content_name: formName
          });
        }
      });
    });
  });
</script>

Newsletter Signup

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var newsletterForms = document.querySelectorAll('.sqs-block-newsletter form');

    newsletterForms.forEach(function(form) {
      form.addEventListener('submit', function(e) {
        if (typeof fbq !== 'undefined') {
          fbq('track', 'CompleteRegistration', {
            content_name: 'Newsletter'
          });
        }
      });
    });
  });
</script>

Button Clicks (Specific CTAs)

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var ctaButtons = document.querySelectorAll('.sqs-block-button a');

    ctaButtons.forEach(function(button) {
      button.addEventListener('click', function(e) {
        var buttonText = this.textContent.trim();

        // Track specific CTA buttons
        if (buttonText.toLowerCase().includes('schedule') ||
            buttonText.toLowerCase().includes('book')) {

          if (typeof fbq !== 'undefined') {
            fbq('track', 'Schedule', {
              content_name: buttonText
            });
          }
        }
      });
    });
  });
</script>

Verifying Your Installation

Method 1: Meta Pixel Helper

  1. Install Meta Pixel Helper Chrome extension
  2. Visit your Squarespace site
  3. Click the extension icon
  4. Verify:
    • Pixel is detected
    • PageView event fires
    • No errors shown
    • Pixel ID matches yours

Method 2: Meta Events Manager

  1. Go to Events Manager
  2. Select your pixel
  3. Click Test Events in left sidebar
  4. Enter your website URL
  5. Click Open Website
  6. Navigate your site and verify events appear in Events Manager

Method 3: Browser Console

  1. Open DevTools (F12)
  2. Go to Console tab
  3. Type: fbq
  4. You should see the pixel function (not "undefined")

Common Issues & Solutions

Issue: Pixel Not Detected

Possible Causes:

  • Code not saved in Squarespace
  • Wrong pixel ID
  • Ad blocker active
  • JavaScript errors

Solutions:

  1. Verify code is in Code Injection (Settings > Advanced)
  2. Check pixel ID matches (no spaces or extra characters)
  3. Test in incognito mode without ad blockers
  4. Check browser console for errors

Issue: Duplicate PageView Events

Cause: Both native integration and code injection are active

Solution:

  • Choose one method only
  • If using code injection, remove pixel from External API Keys
  • If using native integration, remove code from Code Injection

Issue: E-commerce Events Not Firing

Possible Causes:

  • Code in wrong location (e.g., Purchase event not in Order Confirmation section)
  • Y.Squarespace not loaded for Ajax events
  • Product data not available when script runs

Solutions:

  • Verify Order Confirmation code is in the correct section
  • Wrap commerce code in window.Y.use() callback
  • Add DOMContentLoaded listeners for product page events

Issue: Purchase Value Incorrect

Cause: Squarespace stores prices in cents

Solution:

  • Always divide price by 100: orderData.grandTotal.value / 100
  • Verify currency matches your store's currency

GDPR & Privacy Compliance

Meta Pixel sets cookies, so you may need cookie consent:

<script>
  // Only initialize pixel after consent
  function initMetaPixel() {
    fbq('init', 'YOUR_PIXEL_ID');
    fbq('track', 'PageView');
  }

  // Call this after user accepts cookies
  if (hasUserConsent()) {
    initMetaPixel();
  }

  function hasUserConsent() {
    // Implement your consent logic
    // Return true if user has consented
    return false;
  }
</script>

Data Processing Options

For GDPR compliance, enable Limited Data Use:

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

Performance Optimization

Async Loading

The standard Meta Pixel code already loads asynchronously (t.async=true). Don't modify this.

Conditional Loading

Only load pixel on pages where it's needed:

// Only load on certain pages
if (window.location.pathname.includes('/shop') ||
    window.location.pathname.includes('/products') ||
    window.location.pathname.includes('/checkout')) {

  // Load Meta Pixel here
}

Monitor Performance Impact

Using GTM Instead

If you have Google Tag Manager installed, you can manage Meta Pixel through GTM:

Advantages:

  • Centralized tag management
  • Easier to update without code changes
  • Better testing and debugging

Implementation:

  1. In GTM, create a Custom HTML tag
  2. Paste the Meta Pixel base code
  3. Set trigger to All Pages
  4. Create separate tags for commerce events
  5. Publish container

See GTM Setup Guide for details.

Multiple Pixels

If you need to track with multiple pixels (e.g., agency pixel + client pixel):

// Initialize multiple pixels
fbq('init', 'PIXEL_ID_1');
fbq('init', 'PIXEL_ID_2');
fbq('track', 'PageView');

// Track events to specific pixel
fbq('trackSingle', 'PIXEL_ID_1', 'Purchase', {...});

Best Practices

  1. Choose One Method:

    • Use native integration for simple tracking
    • Use code injection for advanced tracking
    • Never use both simultaneously

  2. Test Thoroughly:

    • Test all commerce events with real purchases (small value)
    • Verify pixel helper shows correct events
    • Check Events Manager for proper data

  3. Keep Updated:

    • Meta updates pixel code periodically
    • Check for updates in Events Manager
    • Review Meta's changelog

  4. Privacy First:

    • Implement cookie consent if required
    • Don't send PII unless properly hashed
    • Follow Meta's data usage policies

  5. Monitor Performance:

    • Check site speed regularly
    • Use lazy loading if needed
    • Balance tracking needs with user experience

Next Steps

Additional Resources

↑ Back to top
// SYS.FOOTER