Pixelflow
Platform Specific Instructions

Event Classes on Webflow

Recommended: Visual Tagger

We recommend using the Visual Tagger as a simpler option to setup tracking - it has the same tracking functionality in a simple widget

Click here to learn more about the visual tagger

This guide explains how to tag elements on your Webflow website with a "class" that lets PixelFlow track that particular element, section or data to trigger or send along with an event to Meta.

Click here to view all the ways to track and trigger events on your website.

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.

Tracking Webflow Buttons

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

  1. Find the Lead class from the Classes Document: action-btn-lead-011-pf

  2. Select your button in the Webflow Designer

  3. Add action-btn-lead-011-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 Lead events whenever users click that button and send the data to Meta.

Tracking Form Submissions in Webflow

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?
Was this helpful?