Auto track Webflow eCommerce events

Overview

PixelFlow can automatically extract product and transaction data from your Webflow eCommerce checkout and order confirmation pages and send enriched event data to Meta. This eliminates the need to manually configure event parameters and ensures accurate tracking of your eCommerce conversions.

When you enable automatic data extraction for Initiate Checkout or Purchase events, PixelFlow automatically captures currency, number of items, transaction value, and other eCommerce data directly from your Webflow checkout flow.

Prerequisites

• PixelFlow installed and configured on your Webflow site (see Webflow Setup)

• Webflow eCommerce plan active with checkout enabled

• Standard Webflow eCommerce checkout pages (not custom-built checkout)

Compatibility

This feature works with:

• Webflow eCommerce: Standard checkout and order confirmation pages only

• Supported Events: Initiate Checkout and Purchase events

• URL Requirements: URLs must contain /checkout (for Initiate Checkout) or /order-confirmation (for Purchase)

What Data Is Automatically Extracted?

Depending on which event you're tracking, PixelFlow automatically extracts different data:

For Initiate Checkout Events

When someone begins the checkout process, PixelFlow automatically captures:

• currency — The currency code (e.g., USD, EUR, GBP)

• num_items — Total number of items in the cart

• value — Total cart value

For Purchase Events

When someone completes a purchase, PixelFlow automatically captures:

• content_type — Type of content purchased (product)

• currency — The currency code

• num_items — Total number of items purchased

• value — Total transaction value

How to Enable Automatic Data Extraction on Webflow

Step 1: Navigate to Your PixelFlow Dashboard

1. Log in to your PixelFlow account at pixelflow.so/dashboard

2. Navigate to the Overview page (this should be your default landing page)

3. Locate the Events URLs section on the dashboard

Step 2: Add an Event URL

1. In the Events URLs section, click the + Add URL button

2. In the "Add Event URL" modal that appears, enter your checkout or order confirmation URL:

   • For checkout tracking: Enter your checkout page URL (e.g., yoursite.com/checkout)

   • For purchase tracking: Enter your order confirmation page URL (e.g., yoursite.com/order-confirmation)

Step 3: Select Your Event

1. Click the Event dropdown in the modal

2. Select either:

   • Initiate Checkout — For your checkout page (/checkout)

   • Purchase — For your order confirmation page (/order-confirmation)

Step 4: Enable Automatic Data Extraction

1. Once you've entered a valid URL and selected an event, the "Extract data automatically?" toggle will appear

2. Toggle "Extract data automatically?" to ON (switched to the right)

Step 5: Block Webflow's Built-in Tracking (Recommended)

When you enable automatic data extraction, a second toggle will appear: "Block external tracking?"

1. Ensure "Block external tracking?" is toggled ON (this is the default)

Step 6: Save Your Configuration

1. Click the Add URL button at the bottom-right of the modal to save

2. Your event URL will be added to the Events URLs table

Step 7: Copy Your Updated Tracking Script

1. In your PixelFlow dashboard, locate your tracking script (usually in the setup or settings area)

2. Click Copy Script to copy your updated tracking code

Step 8: Update Your Webflow Site Code

1. Go to your Webflow dashboard and click All Sites

2. Hover over your website and click the Settings (cog) icon

3. Scroll down to Custom Code in the left sidebar and click it

4. Replace the existing PixelFlow script in the Head Code section with the new script you copied

5. Click Save Changes

Step 9: Republish Your Webflow Site

1. In the Webflow editor, click the Publish button in the top-right corner

2. Select your production domain

3. Click Publish to selected domains

Verify Your Setup

After publishing your site, test the automatic data extraction:

1. Open your live website in a new browser window or incognito mode

2. Add a product to your cart and proceed to checkout (for Initiate Checkout event)

3. Complete a test purchase (for Purchase event)

4. Check your PixelFlow dashboard under Events or Analytics within 2-3 minutes

5. Verify the event includes the extracted data:

   • Check that currency, num_items, and value are populated

   • For Purchase events, verify content_type is also included

6. Open Facebook Events Manager and confirm events appear with enriched data

For more detailed verification steps, see How to Test and Verify Your PixelFlow CAPI Setup.

Troubleshooting

Limitations

• Standard checkout only: Automatic extraction works exclusively with Webflow's standard eCommerce checkout pages, not custom-built checkout flows

• Two events only: The feature is only available for Initiate Checkout and Purchase events—other events (Add to Cart, View Content, etc.) do not support automatic extraction

• URL path requirements: URLs must include /checkout for Initiate Checkout or /order-confirmation for Purchase to activate the feature

• All-or-nothing extraction: You cannot manually select which data fields to extract—enabling the toggle extracts all available eCommerce data automatically

What's Next

Now that you've set up automatic eCommerce tracking, you can:

• Track additional events using Event URLs or Event Classes

• Learn about Event Parameters to enrich other events

• Set up Event Blocking Rules to prevent duplicate tracking

• Monitor your events in Facebook Events Manager

Getting Help

If you're experiencing issues with automatic eCommerce tracking:

• Verify you're using Webflow's standard checkout pages (not custom checkout)

• Confirm the "Extract data automatically?" toggle appears and is enabled

• Check that you've updated the script in Custom Code and republished your site

• Use browser developer tools (F12) to verify the PixelFlow script is loading correctly

For additional support:

• Email PixelFlow support at [email protected]

• Book a free setup call for personalized assistance

When contacting support, please provide:

• Your Webflow site URL

• Screenshots of your Event URL configuration in the PixelFlow app

• Whether the "Extract data automatically?" toggle is visible and enabled

• Sample event payloads from PixelFlow dashboard or Facebook Events Manager