Identify Users On Squarespace

Identify Users on Squarespace

Learn how to automatically identify website visitors when they submit forms on your Squarespace site, enabling cross-device tracking and enriched visitor profiles in Lytical.

Prerequisites

• Lytical tracking code installed on your Squarespace site
• One or more forms on your site (Form Blocks or Newsletter Blocks)
• Squarespace Business plan or higher (required for Code Injection)

Where to Add the Code

1. Go to Settings → Advanced → Code Injection
2. Scroll to the Footer section
3. Paste the script (make sure it's after your Lytical tracking code)
4. Click Save

Squarespace Form Blocks

This script works with Squarespace's native Form Blocks. It captures form submissions and identifies users by their email.

<script>
// Lytical + Squarespace Form Integration

(function() {
  // Store form data before submit
  var pendingForms = new WeakMap();

  // Capture form data on submit
  document.addEventListener('submit', function(e) {
    var form = e.target;
    if (form && form.tagName === 'FORM') {
      var data = {};
      var inputs = form.querySelectorAll('input, textarea, select');
      inputs.forEach(function(input) {
        if (input.name && input.value) {
          data[input.name] = input.value;
        }
      });
      pendingForms.set(form, data);
    }
  }, true);

  // Helper: Extract email and name from form data
  function extractFields(data) {
    var result = {};

    // Squarespace uses various field name patterns
    for (var key in data) {
      var lowerKey = key.toLowerCase();

      // Find email
      if (lowerKey.includes('email') || lowerKey === 'email') {
        result.email = data[key];
      }

      // Find name
      if (lowerKey === 'name' || lowerKey === 'fname' || lowerKey.includes('name')) {
        if (!result.name) result.name = data[key];
      }

      // Find phone
      if (lowerKey.includes('phone') || lowerKey.includes('tel')) {
        result.phone = data[key];
      }
    }

    return result;
  }

  // Detect source from form or page
  function detectSource() {
    var path = location.pathname.toLowerCase();
    if (path.includes('contact')) return 'contact_form';
    if (path.includes('newsletter')) return 'newsletter_signup';
    if (path.includes('booking') || path.includes('appointment')) return 'booking_request';
    return 'squarespace_form';
  }

  // Watch for Squarespace form success
  // Squarespace shows a success message after form submission
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      // Check for form success indicators
      mutation.addedNodes.forEach(function(node) {
        if (node.nodeType === 1) {
          // Squarespace 7.0 success message
          if (node.classList &&
              (node.classList.contains('form-submission-text') ||
               node.classList.contains('form-submission-html'))) {

            var formWrapper = node.closest('.form-wrapper') || node.closest('form');
            if (formWrapper) {
              var form = formWrapper.tagName === 'FORM' ? formWrapper : formWrapper.querySelector('form');
              if (form) {
                var data = pendingForms.get(form);
                if (data) {
                  var fields = extractFields(data);
                  if (fields.email && typeof lyt !== 'undefined') {
                    lyt.identify(fields.email, {
                      email: fields.email,
                      name: fields.name || '',
                      phone: fields.phone || '',
                      source: detectSource()
                    });
                    console.log('[Lytical] Identified user:', fields.email);
                  }
                }
              }
            }
          }

          // Squarespace 7.1 success state
          if (node.classList && node.classList.contains('form-block')) {
            var successDiv = node.querySelector('.form-submission-text, .form-submission-html');
            if (successDiv && window.getComputedStyle(successDiv).display !== 'none') {
              var form = node.querySelector('form');
              if (form) {
                var data = pendingForms.get(form);
                if (data) {
                  var fields = extractFields(data);
                  if (fields.email && typeof lyt !== 'undefined') {
                    lyt.identify(fields.email, {
                      email: fields.email,
                      name: fields.name || '',
                      phone: fields.phone || '',
                      source: detectSource()
                    });
                    console.log('[Lytical] Identified user:', fields.email);
                  }
                }
              }
            }
          }
        }
      });

      // Also check for attribute changes (hidden → visible)
      if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
        var target = mutation.target;
        if (target.classList &&
            (target.classList.contains('form-submission-text') ||
             target.classList.contains('form-submission-html'))) {

          if (window.getComputedStyle(target).display !== 'none') {
            var formWrapper = target.closest('.form-wrapper') || target.closest('.form-block');
            var form = formWrapper ? formWrapper.querySelector('form') : null;

            if (form) {
              var data = pendingForms.get(form);
              if (data) {
                var fields = extractFields(data);
                if (fields.email && typeof lyt !== 'undefined') {
                  lyt.identify(fields.email, {
                    email: fields.email,
                    name: fields.name || '',
                    phone: fields.phone || '',
                    source: detectSource()
                  });
                  console.log('[Lytical] Identified user:', fields.email);
                }
              }
            }
          }
        }
      }
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ['style', 'class']
  });

})();
</script>

Newsletter Blocks

Squarespace Newsletter Blocks work slightly differently. This script specifically handles newsletter signups:

<script>
// Lytical + Squarespace Newsletter Block Integration

(function() {
  // Watch for newsletter form submissions
  document.addEventListener('submit', function(e) {
    var form = e.target;

    // Check if it's a newsletter block
    if (!form.closest('.newsletter-block') &&
        !form.classList.contains('newsletter-form')) {
      return;
    }

    var emailInput = form.querySelector('input[type="email"]');
    if (emailInput && emailInput.value && typeof lyt !== 'undefined') {
      lyt.identify(emailInput.value, {
        email: emailInput.value,
        source: 'newsletter_signup'
      });
      console.log('[Lytical] Identified user:', emailInput.value);
    }
  }, true);
})();
</script>

Squarespace Commerce (Customer Accounts)

If you're using Squarespace Commerce with customer accounts, you can identify logged-in customers:

<script>
// Identify logged-in Squarespace Commerce customers
// Note: Customer data availability depends on your Squarespace version

(function() {
  // Check for logged-in customer
  // Squarespace exposes limited customer data via JavaScript
  if (window.Static && Static.SQUARESPACE_CONTEXT) {
    var ctx = Static.SQUARESPACE_CONTEXT;

    if (ctx.authenticatedAccount) {
      var account = ctx.authenticatedAccount;

      if (account.email && typeof lyt !== 'undefined') {
        lyt.identify(account.email, {
          email: account.email,
          name: [account.firstName || '', account.lastName || ''].filter(Boolean).join(' '),
          squarespace_member_id: account.id || '',
          source: 'squarespace_account'
        });
      }
    }
  }
})();
</script>

Order Confirmation Page

To identify customers after purchase, you'll need to use Squarespace's Order Confirmation page settings. However, Squarespace has limited support for custom scripts on this page.

Complete Script

Here's a combined script that handles Form Blocks, Newsletter Blocks, and Customer Accounts:

<script>
// Lytical + Squarespace Integration (Complete)

(function() {
  // =====================
  // 1. Customer Accounts
  // =====================
  if (window.Static && Static.SQUARESPACE_CONTEXT) {
    var ctx = Static.SQUARESPACE_CONTEXT;
    if (ctx.authenticatedAccount) {
      var account = ctx.authenticatedAccount;
      if (account.email && typeof lyt !== 'undefined') {
        lyt.identify(account.email, {
          email: account.email,
          name: [account.firstName || '', account.lastName || ''].filter(Boolean).join(' '),
          source: 'squarespace_account'
        });
      }
    }
  }

  // =====================
  // 2. Form Submissions
  // =====================
  var pendingForms = new WeakMap();

  document.addEventListener('submit', function(e) {
    var form = e.target;
    if (form && form.tagName === 'FORM') {
      var data = {};
      form.querySelectorAll('input, textarea, select').forEach(function(input) {
        if (input.name && input.value) data[input.name] = input.value;
      });
      pendingForms.set(form, data);

      // Handle newsletter blocks immediately
      if (form.closest('.newsletter-block') || form.classList.contains('newsletter-form')) {
        var emailInput = form.querySelector('input[type="email"]');
        if (emailInput && emailInput.value && typeof lyt !== 'undefined') {
          lyt.identify(emailInput.value, {
            email: emailInput.value,
            source: 'newsletter_signup'
          });
          console.log('[Lytical] Identified user:', emailInput.value);
        }
      }
    }
  }, true);

  function extractFields(data) {
    var result = {};
    for (var key in data) {
      var lowerKey = key.toLowerCase();
      if (lowerKey.includes('email')) result.email = data[key];
      if (lowerKey === 'name' || lowerKey.includes('name')) {
        if (!result.name) result.name = data[key];
      }
      if (lowerKey.includes('phone')) result.phone = data[key];
    }
    return result;
  }

  function detectSource() {
    var path = location.pathname.toLowerCase();
    if (path.includes('contact')) return 'contact_form';
    if (path.includes('newsletter')) return 'newsletter_signup';
    return 'squarespace_form';
  }

  // Watch for form success
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
        var target = mutation.target;
        if (target.classList &&
            (target.classList.contains('form-submission-text') ||
             target.classList.contains('form-submission-html'))) {

          if (window.getComputedStyle(target).display !== 'none') {
            var formWrapper = target.closest('.form-wrapper') || target.closest('.form-block');
            var form = formWrapper ? formWrapper.querySelector('form') : null;

            if (form) {
              var data = pendingForms.get(form);
              if (data) {
                var fields = extractFields(data);
                if (fields.email && typeof lyt !== 'undefined') {
                  lyt.identify(fields.email, {
                    email: fields.email,
                    name: fields.name || '',
                    phone: fields.phone || '',
                    source: detectSource()
                  });
                  console.log('[Lytical] Identified user:', fields.email);
                }
              }
            }
          }
        }
      }
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ['style', 'class']
  });

})();
</script>

Troubleshooting

Users aren't appearing in Identified Users

• Make sure you have a Business plan or higher (required for Code Injection)
• Verify the script is in the Footer section, not the Header
• Check that Lytical tracking code loads before the identify script
• Open browser DevTools → Console and look for [Lytical] Identified user: messages

Squarespace 7.0 vs 7.1

The scripts above work with both Squarespace 7.0 and 7.1. However, the form HTML structure differs slightly between versions. If you're having issues, check your browser DevTools to see the actual form structure and adjust selectors accordingly.

Testing the integration

1. Open your website in an incognito/private browser window
2. Open DevTools → Console before submitting the form
3. Browse a few pages to generate anonymous activity
4. Submit a form with a test email address
5. Look for [Lytical] Identified user: test@example.com in the console
6. Wait 1-2 minutes, then check the Identified Users page in Lytical