Pixelflow
All Collections
Event Tracking via Classes
Event Classes on Webflow

How to label specific elements on your Webflow 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.

If you're using Webflow eCommerce, PixelFlow can automatically extract transaction data from your checkout and order confirmation pages. See the Auto track Webflow eCommerce events guide for details on enabling automatic data extraction.

How to Use Event Classes on Webflow

Add the class from the Classes Document to that particular element in Webflow. The method depends on which page builder or editor you're using:

Using the Webflow Designer

The Webflow Designer makes it easy to add custom classes to any element:

  1. Select the element (button, form, or any element) you want to track

  2. In the right sidebar, locate the Style panel

  3. At the top of the Style panel, click into the Selector field (where you add class names)

  4. Type the PixelFlow class name (for example, action-btn-sub-002-pf for a Subscribe event) and press Enter

  5. Click Publish in the top-right corner to save your changes

You can add multiple classes by typing each class name and pressing Enter after each one. For example, to track a Subscribe event and add form data extraction, you would add: action-btn-sub-002-pf then add info-frm-cntr-pf

Using Webflow's CMS

If you're using Webflow CMS elements:

  1. Select the CMS element you want to track in the Webflow Designer

  2. In the Style panel, click into the Selector field

  3. Enter the PixelFlow class name from the Classes Document

  4. Press Enter to apply the class

  5. Click Publish to publish your changes

Make sure to publish your site after adding classes. Changes won't take effect until the site is live.

Example: Tracking a Subscribe Button

If you want to track a "Subscribe" event every time someone clicks a specific "Subscribe" button on your website:

  1. Find the Subscribe class from the Classes Document: action-btn-sub-002-pf

  2. Select your Subscribe button in the Webflow Designer

  3. Add action-btn-sub-002-pf to the Selector field in the Style panel (see above)

  4. Press Enter to apply the class

  5. Publish your site

Once published, PixelFlow will automatically track Subscribe events whenever users click that button and send the data to Meta.

Tracking Form Submissions

To track form submissions and capture user data (name, email, phone), you need to add classes to both the form container and individual input fields:

  1. Add info-frm-cntr-pf to your form container or form element

  2. Add the appropriate action class to your submit button (e.g., action-btn-lead-011-pf for a Lead event). See a full list of action classes here

  3. Add data extraction classes to your input fields:

    • info-cust-fn-pf for first name input

    • info-cust-em-pf for email input

    • info-cust-ph-pf for phone input

    • info-cust-ln-pf for last name input

For Webflow's native form elements, you can add classes directly to form blocks and input fields in the Designer. Check Webflow's documentation for how to add custom classes to form elements.

Tracking Webflow eCommerce Events

For Webflow eCommerce sites, PixelFlow offers automatic tracking for checkout and purchase events:

Verifying Your Setup

After adding classes to your elements:

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

  2. Right-click the element and select Inspect or Inspect Element

  3. In the developer tools, verify that the PixelFlow class appears in the HTML code for that element

  4. Test the tracking by triggering the event (clicking the button, submitting the form, etc.)

  5. Check your PixelFlow dashboard to confirm the event was captured

If you're using any caching or optimization tools, make sure to clear your cache after adding classes. Otherwise, visitors may see the old version of your page without the tracking classes.

Common Issues and Solutions

Classes Not Appearing on Live Site

  • Clear your browser cache and hard refresh the page (Cmd+Shift+R or Ctrl+Shift+R)

  • Make sure you clicked Publish after adding the class

  • Check that you added the class to the correct element

  • Verify you're viewing the live published site, not a preview or draft

Events Not Tracking in PixelFlow Dashboard

  • Verify the PixelFlow script is installed correctly (check the Webflow Setup guide)

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

  • Make sure the class is added to the clickable element (button, link) not a wrapper div

  • Check your browser console for JavaScript errors that might prevent tracking

Form Data Not Being Captured

  • Ensure info-frm-cntr-pf is added to the form container

  • Verify input field classes are added to the actual <input> elements, not labels or wrappers

  • For Webflow forms, make sure classes are applied to both the form block and individual input fields

What's Next

Was this helpful?