PixelFlow

How to integrate PixelFlow with Webflow

Browser-based Facebook Pixel tracking misses conversions when visitors use ad blockers or have iOS 14+ App Tracking Transparency enabled. PixelFlow addresses this concern by adding Meta’s Conversions API to Webflow sites.

There are several ways to connect PixelFlow to Webflow. You can use the PixelFlow app from the official marketplace for a guided setup, install the tracking script manually in your site's custom code, or apply CSS class-based event tracking on buttons and forms.

Use the PixelFlow app

The PixelFlow Webflow app provides a setup wizard that connects your Webflow site to Meta's Conversions API in 5 to 10 minutes. Install the app from Webflow's marketplace, authorize access to your site, then follow the 4-step configuration wizard: add your site domain (which syncs automatically or can be entered manually), input your Meta Pixel credentials, let PixelFlow generate a unique tracking script for your site, and publish to activate tracking. The app generates a tracking script that you paste into the Webflow custom code section.

The PixelFlow app includes the following features:

• Form data capture with CSS classes extracts submissions using designated field classes (.pixelflow-email, .pixelflow-firstname, .pixelflow-phone) to improve Facebook's Event Match Quality scores  
• Webflow eCommerce auto-tracking records Add to Cart, Initiate Checkout, and Purchase events automatically from standard Webflow checkout pages  
• Multi-pixel support tracks conversions for multiple Meta Pixels from one installation  
• Event deduplication prevents double-counting between browser and server-side events

Before installing, remove any existing Facebook Pixel scripts from your site to prevent duplicate tracking. You need admin access to Meta Business Manager to generate a Conversions API Access Token through the Meta Pixel setup process. The token is required for PixelFlow configuration; see the Meta Pixel setup guide for detailed setup instructions.

CSS class-based event tracking

PixelFlow uses CSS classes applied in Webflow to trigger conversion events without writing code. Add a class like pixelflow-event-lead to any button or link, and PixelFlow sends that event server-side when users click the element. This approach works for tracking specific CTAs, content downloads, or video plays across your site.

CSS class-based tracking supports the following use cases:

• Track button clicks by adding pixelflow-event-[event-name] classes to any element in the Style panel  
• Capture form field data with classes like pixelflow_email, pixelflow_firstname, and pixelflow_phone on input fields to improve Event Match Quality scores  
• Track calendar bookings from embedded Calendly or TidyCal widgets using the calendar tracking configuration  
• Fire URL-based triggers when users visit specific pages, useful for thank-you page conversions

One limitation: events fire on button click regardless of form validation success. If your form has required fields that might fail validation, use the JavaScript API instead to track only successful submissions.

Manual script installation

For sites where you prefer not to use the marketplace app, you can install PixelFlow tracking manually using custom code. This approach gives you direct control over script placement and works well when you manage multiple sites or use version control for your code.

To install the script manually:

1. Copy the complete PixelFlow tracking script from your PixelFlow dashboard without any modifications  
2. Navigate to Webflow Project Settings > Custom Code > Head Code section  
3. Paste the script into the Head Code section without editing it  
4. Remove any existing Facebook Pixel scripts to prevent duplicate events  
5. Publish your Webflow site to activate tracking (tracking will not work until the site is republished)

What you can build

Integrating PixelFlow with Webflow gives you server-side Facebook Conversions API (CAPI) tracking that captures conversion data missed by browser-based tracking.

• Lead generation landing pages with accurate attribution: Build Webflow landing pages with contact forms that track submissions server-side  
• Webflow eCommerce stores with purchase tracking: Create product pages and checkout flows where transactions get reported to Meta through server-side tracking  
• Multi-CTA marketing sites with granular event tracking: Design pages with multiple conversion actions    
• Service booking pages with appointment attribution: Build consultation or appointment booking pages where PixelFlow tracks booked calls through calendar integrations