Pixelflow
All Collections
Event Tracking via Classes
Event Classes on Squarespace

How to label specific elements on your Squarespace website and assign events to them

For information on how to track events by assign a specific event to a particular URL, follow this guide.

To tag specific elements on your website that you'd like to track, follow the guide below.

Squarespace has built-in limitations that prevent manual class assignment to most elements. However, PixelFlow automatically tracks key eCommerce events on Squarespace sites without requiring manual setup.

How Event Classes Work on Squarespace

Unlike other platforms, Squarespace doesn't allow you to add custom CSS classes to most elements through its visual editor. Instead, PixelFlow automatically detects and tracks important events on your Squarespace site once you've added the PixelFlow code to your header.

Simply add your PixelFlow code to your Squarespace header following the Squarespace Setup guide, and tracking will begin automatically.

Automatically Tracked Events

Once PixelFlow is installed, these events are tracked automatically on your Squarespace website without any additional configuration:

Event Name

Tracking

PageView

Tracked on every page load across your Squarespace site

AddtoCart

Tracked on Add to Cart button click

InitiateCheckout

Tracked when customers click the Checkout button on your commerce pages

AddPaymentInfo

Tracked when the purchase confirmation page loads (e.g., https://www.yoursquarespacesite.com/commerce/orders/2e45bc6c-173e-4a1d-8b64-ea52127b4926)

Purchase

Tracked on the purchase confirmation page load (e.g. https://www.yoursquarespacesite.com/commerce/orders/2e45bc6c-173e-4a1d-8b64-ea52127b4926)

PixelFlow automatically prevents sending duplicate events if users reload the purchase confirmation page, ensuring your conversion data remains accurate.

Tracking Additional Events on Squarespace

For events beyond the automatic eCommerce tracking, you can use alternative tracking methods:

Option 1: Event URLs

Track events by assigning them to specific page URLs. This works well for:

  • Thank you pages after form submissions

  • Confirmation pages

  • Specific landing pages you want to track

Learn more in the Event URLs guide.

Option 2: Custom Code Blocks

For advanced users comfortable with code, you can add custom HTML/CSS to specific Squarespace blocks to enable class-based tracking:

  1. Add a Code Block to your Squarespace page

  2. Wrap your tracked element with HTML that includes PixelFlow classes from the Classes Document

  3. Save and publish your changes

This method requires HTML knowledge and may not work with all Squarespace elements. Always test thoroughly after implementation.

Example: Tracking a Custom Button Click

If you want to track a custom event (like a Lead event) when someone clicks a button on your Squarespace site:

  1. Add a Code Block to your page (click the + icon, then select Code under More)

  2. In the code block, add your button HTML with the PixelFlow class:

<a href="your-destination-url" class="action-btn-lead-011-pf">
  Get Started
</a>

  1. Replace action-btn-lead-011-pf with the appropriate class from the Classes Document

  2. Save and publish your page

For most Squarespace users, using Event URLs is simpler and more reliable than custom code blocks. Consider setting up a dedicated thank-you page and tracking it via URL instead.

Verifying Your Setup

After installing PixelFlow on your Squarespace site:

  1. Visit your live website (not in preview mode)

  2. Perform actions that should trigger tracking (page views, checkout, etc.)

  3. Check your PixelFlow dashboard to confirm events are being captured

  4. Verify events appear in your Meta Events Manager within a few minutes

Always test on your published site, not in Squarespace preview mode. Tracking may not work correctly in preview.

Common Issues and Solutions

Events Not Appearing in Dashboard

  • Verify the PixelFlow script is installed in your Squarespace header (see the Squarespace Setup guide)

  • Make sure you're testing on the live published site, not in preview mode

  • Clear your browser cache and test again

  • Check that your Meta Pixel ID and Conversions API key are correctly configured in PixelFlow

Duplicate Purchase Events

  • PixelFlow automatically handles duplicate prevention, but if you see duplicates, contact support

  • Check that you haven't added the standard Facebook Pixel code separately - this can cause conflicts

Custom Code Block Events Not Tracking

  • Verify you're using the exact class name from the Classes Document

  • Make sure the code block is published and visible on the live site

  • Check your browser console for JavaScript errors

  • Consider using Event URLs instead for more reliable tracking

What's Next

Was this helpful?