Meta Pixel Event Tracking on Squarespace

Beyond basic page views and purchases, Meta Pixel can track custom events and detailed user interactions. This guide covers advanced event tracking specific to Squarespace sites.

Standard Events Overview

Meta provides standard events that should be used when applicable:

• ViewContent - Product page views
• AddToCart - Items added to cart
• AddToWishlist - Items added to wishlist (if you have one)
• InitiateCheckout - Checkout started
• AddPaymentInfo - Payment info added
• Purchase - Transaction completed
• Lead - Lead form submitted
• CompleteRegistration - Account created / newsletter signup
• Search - Site search used
• Contact - Contact form submitted

Format:

fbq('track', 'EventName', {
  parameter1: 'value',
  parameter2: 'value'
});

E-commerce Events

ViewContent (Product Detail Page)

Track when users view individual product pages.

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 from page
      var productName = document.querySelector('.product-title') ?
                        document.querySelector('.product-title').textContent.trim() :
                        'Unknown Product';

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

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

      // Try to get SKU from Squarespace data
      var sku = productId;
      if (window.Static && window.Static.SQUARESPACE_CONTEXT && window.Static.SQUARESPACE_CONTEXT.product) {
        var product = window.Static.SQUARESPACE_CONTEXT.product;
        sku = product.variants && product.variants[0] && product.variants[0].sku ?
              product.variants[0].sku : product.id;

        fbq('track', 'ViewContent', {
          content_ids: [sku],
          content_name: product.title,
          content_type: 'product',
          content_category: product.categories && product.categories[0] ? product.categories[0] : '',
          value: product.variants[0].priceMoney.value / 100,
          currency: product.variants[0].priceMoney.currency || 'USD'
        });
      } else {
        // Fallback if Static context not available
        fbq('track', 'ViewContent', {
          content_ids: [productId],
          content_name: productName,
          content_type: 'product',
          value: productPrice,
          currency: 'USD' // Update to your currency
        });
      }
    }
  });
</script>

AddToCart

Track when products are added to cart (works with Ajax cart).

<script>
  (function() {
    if (window.Y && window.Y.Squarespace && typeof fbq !== 'undefined') {
      window.Y.use(function(Y) {
        Y.on('cart:item:added', function(e) {
          var item = e.item;

          fbq('track', 'AddToCart', {
            content_ids: [item.sku || item.id],
            content_name: item.title,
            content_type: 'product',
            value: item.price / 100, // Squarespace stores price in cents
            currency: 'USD', // Update to your currency
            quantity: item.quantity
          });
        });
      });
    }
  })();
</script>

InitiateCheckout

Track checkout initiation:

<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 && cart.entries.length > 0) {
            var contentIds = cart.entries.map(function(item) {
              return item.sku || item.id;
            });

            var contentNames = cart.entries.map(function(item) {
              return item.title;
            });

            fbq('track', 'InitiateCheckout', {
              content_ids: contentIds,
              contents: cart.entries.map(function(item) {
                return {
                  id: item.sku || item.id,
                  quantity: item.quantity,
                  item_price: item.price / 100
                };
              }),
              content_type: 'product',
              value: cart.subtotal / 100,
              currency: 'USD', // Update to your currency
              num_items: cart.entries.length
            });
          }
        });
      }
    }
  });
</script>

Purchase

Track completed purchases on the order confirmation page.

Add to ORDER CONFIRMATION PAGE section in Code Injection:

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

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

      var contents = orderData.lineItems.map(function(item) {
        return {
          id: item.sku || item.productId,
          quantity: item.quantity,
          item_price: item.unitPricePaid.value
        };
      });

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

Search

Track site search usage:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Check if this is a search results page
    var searchQuery = new URLSearchParams(window.location.search).get('q');

    if (searchQuery && typeof fbq !== 'undefined') {
      fbq('track', 'Search', {
        search_string: searchQuery,
        content_type: 'product' // or 'blog' if blog search
      });
    }

    // Also track search form submissions
    var searchForms = document.querySelectorAll('form[action*="/search"]');

    searchForms.forEach(function(form) {
      form.addEventListener('submit', function(e) {
        var searchInput = form.querySelector('input[type="search"], input[name="q"]');

        if (searchInput && typeof fbq !== 'undefined') {
          fbq('track', 'Search', {
            search_string: searchInput.value,
            content_type: 'product'
          });
        }
      });
    });
  });
</script>

Lead Generation Events

Contact Form Submissions

Track contact form submissions as Lead events:

<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') {
          // Get form name from heading
          var block = form.closest('.sqs-block');
          var heading = block ? block.querySelector('h1, h2, h3, h4') : null;
          var formName = heading ? heading.textContent.trim() : 'Contact Form';

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

Newsletter Signup

Track newsletter signups as CompleteRegistration:

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

    newsletterBlocks.forEach(function(block) {
      var form = block.querySelector('form');

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

Quote Request / Inquiry Forms

For specific forms requesting quotes:

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

    forms.forEach(function(form) {
      form.addEventListener('submit', function(e) {
        var block = form.closest('.sqs-block');
        var heading = block ? block.querySelector('h1, h2, h3, h4') : null;
        var formText = heading ? heading.textContent.toLowerCase() : '';

        // Check if this is a quote/estimate form
        if (formText.includes('quote') ||
            formText.includes('estimate') ||
            formText.includes('pricing')) {

          if (typeof fbq !== 'undefined') {
            fbq('track', 'Lead', {
              content_name: 'Quote Request',
              content_category: 'sales'
            });
          }
        }
      });
    });
  });
</script>

Member Area Events

For Squarespace sites with Member Areas:

Member Login

<script>
  (function() {
    if (window.Squarespace && window.Squarespace.user && typeof fbq !== 'undefined') {
      window.Squarespace.onInitialize(Y, function() {
        var isLoggedIn = Y.Squarespace.User.isLoggedIn();
        var wasLoggedIn = sessionStorage.getItem('member_logged_in');

        if (isLoggedIn && !wasLoggedIn) {
          fbq('track', 'CompleteRegistration', {
            content_name: 'Member Login',
            status: 'logged_in'
          });

          sessionStorage.setItem('member_logged_in', 'true');
        } else if (!isLoggedIn) {
          sessionStorage.removeItem('member_logged_in');
        }
      });
    }
  })();
</script>

Member Content Access

Track when members access premium content:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var isMemberPage = document.body.classList.contains('member-area') ||
                       document.querySelector('.sqs-member-only-content');

    if (isMemberPage && typeof fbq !== 'undefined') {
      fbq('track', 'ViewContent', {
        content_type: 'member_content',
        content_name: document.title
      });
    }
  });
</script>

Custom Events

For actions specific to your business that don't fit standard events.

Button/CTA Clicks

Track specific call-to-action button clicks:

<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().toLowerCase();

        if (typeof fbq !== 'undefined') {
          // Track scheduling/booking buttons
          if (buttonText.includes('schedule') ||
              buttonText.includes('book') ||
              buttonText.includes('appointment')) {

            fbq('trackCustom', 'ScheduleAppointment', {
              button_text: this.textContent.trim(),
              button_url: this.getAttribute('href')
            });
          }

          // Track download buttons
          if (buttonText.includes('download')) {
            fbq('trackCustom', 'DownloadResource', {
              button_text: this.textContent.trim(),
              resource_url: this.getAttribute('href')
            });
          }

          // Track "Get Started" buttons
          if (buttonText.includes('get started') ||
              buttonText.includes('sign up')) {

            fbq('trackCustom', 'GetStarted', {
              button_text: this.textContent.trim()
            });
          }
        }
      });
    });
  });
</script>

Video Engagement

Track video plays and completions:

<script>
  // Load YouTube API
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onYouTubeIframeAPIReady() {
    var videos = document.querySelectorAll('.sqs-video-wrapper iframe[src*="youtube.com"]');

    videos.forEach(function(video) {
      new YT.Player(video, {
        events: {
          'onStateChange': function(event) {
            var videoData = event.target.getVideoData();

            if (typeof fbq !== 'undefined') {
              if (event.data === YT.PlayerState.PLAYING) {
                fbq('trackCustom', 'VideoPlay', {
                  video_title: videoData.title
                });
              } else if (event.data === YT.PlayerState.ENDED) {
                fbq('trackCustom', 'VideoComplete', {
                  video_title: videoData.title
                });
              }
            }
          }
        }
      });
    });
  }
</script>

File Downloads

Track PDF and other file downloads:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var downloadLinks = document.querySelectorAll('a[href$=".pdf"], a[href$=".doc"], a[href$=".docx"], a[href$=".zip"]');

    downloadLinks.forEach(function(link) {
      link.addEventListener('click', function(e) {
        if (typeof fbq !== 'undefined') {
          var fileName = this.getAttribute('href').split('/').pop();
          var fileType = fileName.split('.').pop().toLowerCase();

          fbq('trackCustom', 'FileDownload', {
            file_name: fileName,
            file_type: fileType,
            file_url: this.getAttribute('href')
          });
        }
      });
    });
  });
</script>

Dynamic Event Parameters

Add dynamic context to your events:

User Type Segmentation

function getUserType() {
  // Check if member
  if (window.Squarespace && window.Squarespace.user) {
    if (window.Squarespace.user.isLoggedIn && window.Squarespace.user.isLoggedIn()) {
      return 'member';
    }
  }

  // Check if returning visitor
  if (document.cookie.includes('returning_visitor=true')) {
    return 'returning_visitor';
  }

  return 'new_visitor';
}

// Use in events
fbq('track', 'ViewContent', {
  content_name: productName,
  user_type: getUserType()
});

Traffic Source

function getTrafficSource() {
  var referrer = document.referrer;

  if (!referrer || referrer.includes(window.location.hostname)) {
    return 'direct';
  }

  if (referrer.includes('google.com')) return 'google';
  if (referrer.includes('facebook.com') || referrer.includes('fb.com')) return 'facebook';
  if (referrer.includes('instagram.com')) return 'instagram';
  if (referrer.includes('twitter.com') || referrer.includes('t.co')) return 'twitter';

  return 'other';
}

// Use in events
fbq('track', 'Lead', {
  content_name: 'Contact Form',
  traffic_source: getTrafficSource()
});

Complete Event Tracking Implementation

For a comprehensive setup, combine all relevant events in your Footer Code Injection:

<!-- Meta Pixel Custom Events -->
<script>
  (function() {
    var CURRENCY = 'USD'; // Update to your store's currency

    // Add to Cart (Ajax)
    if (window.Y && window.Y.Squarespace) {
      window.Y.use(function(Y) {
        Y.on('cart:item:added', function(e) {
          if (typeof fbq !== 'undefined') {
            fbq('track', 'AddToCart', {
              content_ids: [e.item.sku || e.item.id],
              content_name: e.item.title,
              content_type: 'product',
              value: e.item.price / 100,
              currency: CURRENCY,
              quantity: e.item.quantity
            });
          }
        });
      });
    }

    document.addEventListener('DOMContentLoaded', function() {
      // Product Detail View
      var productBlock = document.querySelector('.sqs-commerce-product-detail');
      if (productBlock && typeof fbq !== 'undefined') {
        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: CURRENCY
        });
      }

      // Initiate Checkout
      if (window.location.pathname.includes('/checkout') && window.Y && window.Y.Squarespace) {
        window.Y.use(function(Y) {
          var cart = Y.Squarespace.Commerce.getCart();
          if (cart && cart.entries && typeof fbq !== 'undefined') {
            fbq('track', 'InitiateCheckout', {
              content_ids: cart.entries.map(function(item) { return item.sku || item.id; }),
              num_items: cart.entries.length,
              value: cart.subtotal / 100,
              currency: CURRENCY
            });
          }
        });
      }

      // Form Submissions
      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, h4') : null;
            var formName = heading ? heading.textContent.trim() : 'Contact Form';

            fbq('track', 'Lead', {
              content_name: formName
            });
          }
        });
      });

      // Newsletter Signups
      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>

Testing Your Events

1. Meta Pixel Helper

1. Install Meta Pixel Helper
2. Visit your site and trigger events
3. Click the helper icon to see:
   • Which events fired
   • Event parameters
   • Any errors or warnings

2. Events Manager Test Events

1. Go to Events Manager
2. Select your pixel
3. Click Test Events
4. Enter your website URL
5. Trigger events and verify they appear in Test Events

3. Browser Console Debug Mode

Enable debug mode to see events in console:

// Add after fbq('init')
fbq('set', 'autoConfig', false, 'YOUR_PIXEL_ID');
fbq('set', 'agent', 'tmgoogletagmanager', 'YOUR_PIXEL_ID');

Common Issues & Solutions

Issue: Events Not Firing

Possible Causes:

• JavaScript errors blocking execution
• fbq not defined (pixel not loaded)
• Event trigger conditions not met
• Ad blockers blocking pixel

Solutions:

1. Check browser console for errors
2. Verify pixel is loaded: type fbq in console
3. Test in incognito mode without ad blockers
4. Add null checks: if (typeof fbq !== 'undefined')

Issue: Wrong Event Parameters

Cause: Data extraction errors or wrong variable names

Solution:

• Console.log values before sending to pixel
• Verify Squarespace data structure hasn't changed
• Add fallback values for missing data

Issue: Duplicate Events

Cause: Event firing multiple times or multiple listeners

Solution:

• Use event delegation instead of multiple listeners
• Add flags to prevent duplicate fires
• Check for multiple pixel installations

Best Practices

1. Use Standard Events When Possible:

   • Standard events work better with Meta's optimization
   • Custom events require manual optimization
   • Only use trackCustom for truly unique actions

2. Include Relevant Parameters:

   • Always include value and currency for commerce events
   • Use content_ids for product tracking
   • Add custom parameters for better audience building

3. Test Before Launching Campaigns:

   • Verify all events fire correctly
   • Test entire funnel (view → add → checkout → purchase)
   • Use Test Events tool for validation

4. Privacy Compliance:

   • Don't send PII (emails, names, addresses)
   • Respect user consent choices
   • Follow Meta's data usage policies

5. Monitor Event Quality:

   • Check Event Match Quality in Events Manager
   • Implement Advanced Matching if quality is low
   • Review and fix any event errors

Next Steps

• Optimize Meta Pixel performance if impacting site speed
• Set up GTM for easier event management
• Troubleshoot tracking issues if events aren't working
• Create Custom Conversions in Events Manager based on your tracked events

Additional Resources

• Meta Pixel Standard Events
• Event Setup Tool
• Meta Pixel Best Practices
• Advanced Matching Guide