How to Track and Trigger Events using "Classes"

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

In some scenarios, the Visual Tagger may have certain limitations and you can instead trigger events using "CSS classes" - essentially adding a code snippet to any element on your website so PixelFlow can track it.

Click here to view all methods for triggering events on your website.

How "CSS Class" Tracking works

You apply special CSS classes to elements on your website so PixelFlow knows what action occurred and what data to extract. Common examples include:

Button clicks for actions like Subscribe or Contact
Form submissions to capture Lead events and user data
eCommerce actions like AddToCart, InitiateCheckout, and Purchase

See the PixelFlow Tracking Playground to explore live examples and test your setup.

View Instructions for Your Platform

Use "CSS classes" differs slightly on each platform. Click here for exact instructions for your own platform

View platform specific instructions

Class Categories

PixelFlow classes fall into three categories:

General - for buttons and interactive elements
Forms - for capturing user data like name, email, and phone
eCommerce - for tracking product details on cart, checkout, and purchase flows

The way you apply classes varies by platform. Check your platform-specific guide before implementing them.

Triggering Events from Buttons / Interactive Elements

View examples

See examples in the PixelFlow playground

View Example Setup

Apply these classes to any button or element to immediately trigger an event to Meta.

Event Name	CSS Class	Used For in Facebook
AddPaymentInfo	`action-btn-pymt-001-pf`	Optimizing payment-related campaigns and retargeting incomplete checkouts.
AddtoCart	`action-btn-cart-005-pf`	eCommerce optimization and cart abandonment retargeting.
AddtoWishlist	`action-btn-wl-006-pf`	Interest-based targeting and wishlist retargeting.
CompleteRegistration	`action-btn-reg-007-pf`	Tracking registration funnels and onboarding campaigns.
Contact	`action-btn-cntct-003-pf`	Attributing demo requests or support interactions to campaigns.
CustomiseProduct	`action-btn-cstm-008-pf`	Personalized product and configuration tracking.
Donate	`action-btn-don-009-pf`	Donation tracking and nonprofit campaign optimization.
FindLocationButton	`action-btn-loc-017-pf`	Local service ads and location intent tracking.
FindLocationInput	`action-inpt-loc-016-pf`	Location intent tracking.
InitiateCheckout	`action-btn-buy-004-pf`	Checkout intent and cart abandonment optimization.
Lead	`action-btn-lead-011-pf`	Lead generation optimization and audience building.
Purchase	`action-btn-plc-ord-018-pf`	ROAS calculation and purchase-based audience building.
Schedule	`action-btn-schedule-010-pf`	Booked meeting optimization.
SearchButton	`action-btn-srch-015-pf`	Search intent tracking.
SearchInput	`action-inpt-srch-014-pf`	Search intent tracking.
StartTrial	`action-btn-trial-012-pf`	Trial conversion optimization.
Subscribe	`action-btn-sub-002-pf`	Subscription conversion tracking.
SubmitApplication	`action-btn-submit-013-pf`	Application funnel tracking.
ViewContent	`action-btn-vc-019-pf`	Top-of-funnel engagement tracking.

See HTML Example

This example is for a HTML website. View this article to see how to setup on your own platform (eg. Webflow, Framer etc.)

<!-- View Content button -->
<button class="action-btn-vc-019-pf">Read Article</button>

Triggering Events from Forms

View Example

See examples in the PixelFlow playground

View Example Setup

Apply these classes to any form.

Works with the following event types: AddPaymentInfo, CompleteRegistration, Contact, CustomizeProduct, Donate, Lead, PageView, Schedule, StartTrial, SubmitApplication, and Subscribe events.

Important: Add info-frm-cntr-pf to your form container first

Element	CSS Class
Form container or form element	`info-frm-cntr-pf`
First name input	`info-cust-fn-pf`
Last name input	`info-cust-ln-pf`
Full name input	`info-cust-full-name-pf`
Email input	`info-cust-em-pf`
Phone input	`info-cust-ph-pf`
Value or price field	`info-val-pf`

See Example

This example is for a HTML website. View this article to see how to setup on your own platform (eg. Webflow, Framer etc.)

<!-- Contact form -->
<form class="info-frm-cntr-pf">

  <!-- Customer information -->
  <input type="text" class="info-cust-full-name-pf" placeholder="Full Name" />
  <input type="email" class="info-cust-em-pf" placeholder="Email" />
  <input type="tel" class="info-cust-ph-pf" placeholder="Phone (optional)" />

  <!-- Message fields -->
  <input type="text" placeholder="Subject" />
  <textarea placeholder="Your message..."></textarea>

  <!-- Submit button -->
  <button type="submit" class="action-btn-cntct-003-pf">Send Message</button>

</form>

Triggering eCommerce Events

View Example

See examples in the PixelFlow playground

View Example Setup

Use these classes to trigger AddToWishList, AddToCart, InitiateCheckout, and Purchase with product data.

eCommerce tracking requires a nested structure. Add the main container first, then product containers, then the individual product detail classes.

Container structure

Element	CSS Class
Products list container (add this to the overall products list container before adding the other classes below)	`info-chk-itm-ctnr-pf`
Total amount element	`info-totl-amt-pf`

Track additional product information

Add these classes to any element to track it and send along with the event.

Element	CSS Class
Individual product container (add this to the overall product container before adding the other classes below)	`info-chk-itm-pf`
Product ID	`info-itm-id-pf`
Product price	`info-itm-prc-pf`
Product quantity	`info-itm-qnty-pf`

After adding classes, test your setup in PixelFlow and confirm the event appears in your logs.

See HTML Example

<!-- Checkout container wraps form, order summary, and purchase button -->
<div class="info-chk-itm-ctnr-pf">

  <!-- Add Payment Info Form (Optional) -->
  <div class="info-frm-cntr-pf">
    <!-- Customer information -->
    <input type="text" class="info-cust-fn-pf" placeholder="First Name" />
    <input type="text" class="info-cust-ln-pf" placeholder="Last Name" />
    <input type="email" class="info-cust-em-pf" placeholder="Email" />
    <input type="tel" class="info-cust-ph-pf" placeholder="Phone" />

    <!-- Payment action -->
    <button class="action-btn-pymt-001-pf">Save Payment Method</button>
  </div>

  <!-- Order summary -->
  <div class="info-chk-itm-pf">
    <div class="info-itm-id-pf">WH-001</div>
    <div class="info-itm-prc-pf">$298.00</div>
    <span class="info-itm-qnty-pf">2</span>
  </div>
  <div class="info-totl-amt-pf">$646.00</div>

  <!-- Purchase button is directly inside checkout container -->
  <button class="action-btn-plc-ord-018-pf">Complete Purchase</button>

</div>

Triggering Search and FindLocation events

Use these classes to track Search and FindLocation events. Wrap the input and button with the container element, then add the correct classes to each element.

View Example

See an example in the PixelFlow playground

View Example Setup

The container class info-srch-ctnr-pf should wrap both your input field and button.

Element	CSS Class
Search or location container	`info-srch-ctnr-pf`
Search input field	`action-inpt-srch-014-pf`
Search button	`action-btn-srch-015-pf`
Find location input	`action-inpt-loc-016-pf`
Find location button	`action-btn-loc-017-pf`

See HTML Example - "Search"

<!-- Input + Button (Horizontal) -->
<div class="info-srch-ctnr-pf">
  <input
    type="text"
    class="action-inpt-srch-014-pf"
    placeholder="Search products..."
  />
  <button class="action-btn-srch-015-pf">Search</button>
</div>

<!-- Input + Button (Vertical) -->
<div class="info-srch-ctnr-pf" style="display: flex; flex-direction: column; gap: 0.5rem;">
  <input
    type="text"
    class="action-inpt-srch-014-pf"
    placeholder="What are you looking for?"
  />
  <button class="action-btn-srch-015-pf" style="width: 100%;">
    Search Products
  </button>
</div>

<!-- Input Only (Enter key triggers search) -->
<div class="info-srch-ctnr-pf">
  <input
    type="text"
    class="action-inpt-srch-014-pf"
    placeholder="Search and press Enter..."
  />
</div>

See HTML example - "Find Location"

<!-- Input + Button -->
<div class="info-srch-ctnr-pf">
  <input
    type="text"
    class="action-inpt-loc-016-pf"
    placeholder="Enter zip code or city..."
  />
  <button class="action-btn-loc-017-pf">Find Stores</button>
</div>

<!-- Input Only (Enter key triggers search) -->
<div class="info-srch-ctnr-pf">
  <input
    type="text"
    class="action-inpt-loc-016-pf"
    placeholder="Enter address and press Enter..."
    style="width: 100%;"
  />
</div>

When you finish setup, use How to Test and Verify Your PixelFlow CAPI Setup to confirm everything is working.

Was this helpful?