How to Track Website Elements via Classes | PixelFlow

Two Ways to Track Events

There are two different ways to track events on your website:

Event URL tracking - Assign a specific page URL to trigger a specific event (eg. yourpage.com/success)
Element class tracking - Add CSS classes to buttons, forms, and other elements - explained in this guide (eg. tracking when a user clicks a button on a form and collect the name and email to send to Meta along with the event)

Overview

Learn how to use CSS classes to track specific user interactions on your website—like button clicks, form submissions, and eCommerce actions—beyond the default Page View event.

By default, PixelFlow automatically tracks Page View events on every page load. To track additional interactions, you'll need to tag specific elements on your website.

How Element Class Tracking Works

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

Button clicks - Track when users click a "Subscribe" or "Contact Us" button
Form submissions - Capture Lead events when users submit contact forms
eCommerce actions - Monitor Add to Cart, Checkout, and Purchase events

Class Categories

PixelFlow classes fall into three categories:

General events - Add to buttons or interactive elements to trigger an event
Form events - Add to form inputs to capture user data (name, email, phone)
Purchase events - Add to eCommerce elements to track product information for Add To Wish List, Add To Cart, Initiate Checkout, and Purchase events

The way you apply these classes varies by platform. Always check your platform-specific instructions below before implementing.

Platform-Specific Instructions

Read the guide for your website platform first to understand how to apply these classes correctly:

General Event Classes

Apply these classes to buttons or interactive elements to trigger specific Meta events:

Event Name	CSS Class	Used For in Facebook
AddPaymentInfo	`action-btn-pymt-001-pf`	Optimizing payment-related ad campaigns, retargeting incomplete checkouts, and building audiences of high-intent users.
AddtoCart	`action-btn-cart-005-pf`	eCommerce optimization, building dynamic product ads, and retargeting cart abandoners to boost sales.
AddtoWishlist	`action-btn-wl-006-pf`	Interest-based targeting, personalized ad recommendations, and nurturing long-term shoppers.
CompleteRegistration	`action-btn-reg-007-pf`	Optimizing for user acquisition, tracking registration funnels, and creating audiences for onboarding campaigns.
Contact	`action-btn-cntct-003-pf`	Lead nurturing, attributing demo requests or support interactions to campaigns, and building contact audiences.
CustomiseProduct	`action-btn-cstm-008-pf`	Personalized eCommerce ads and understanding user preferences in dynamic product catalogs.
Donate	`action-btn-don-009-pf`	Measuring giving behavior for nonprofit campaigns, optimizing donation ads, and building donor retargeting lists.
FindLocationButton	`action-btn-loc-017-pf`	Local service ads, geotargeting optimization, and foot traffic attribution.
FindLocationInput	`action-inpt-loc-016-pf`	Local service ads, geotargeting optimization, and foot traffic attribution.
InitiateCheckout	`action-btn-buy-004-pf`	Identifying shopping intent, reducing cart abandonment via retargeting, and optimizing for mid-funnel conversions.
Lead	`action-btn-lead-011-pf`	Lead generation optimization, scoring high-value leads in ads, and creating custom audiences for follow-up nurturing.
Purchase	`action-btn-plc-ord-018-pf`	ROAS calculation, full-funnel conversion optimization, and creating purchase-based lookalike/exclusion audiences.
Schedule	`action-btn-schedule-010-pf`	Service-based ads, optimizing for booked meetings, and retargeting no-shows.
SearchButton	`action-btn-srch-015-pf`	Understanding search query intent, optimizing content/ads for searched terms, and building search-based audiences.
SearchInput	`action-inpt-srch-014-pf`	Understanding search query intent, optimizing content/ads for searched terms, and building search-based audiences.
StartTrial	`action-btn-trial-012-pf`	Optimizing for SaaS/freemium conversions and retargeting trial users for upgrades.
Subscribe	`action-btn-sub-002-pf`	Measuring newsletter/service sign-up conversions, optimizing subscription funnels, and creating lookalike audiences from subscribers.
SubmitApplication	`action-btn-submit-013-pf`	Recruitment ads, attributing hires to campaigns, and optimizing for qualified applicant funnels.
ViewContent	`action-btn-vc-019-pf`	Top-of-funnel awareness, content performance measurement, and retargeting engaged visitors.

Form Event Classes (Add these to any form)

Apply these classes to form containers and input fields to capture user information. Works with AddPaymentInfo, CompleteRegistration, Contact, CustomizeProduct, Donate, Lead, PageView, Schedule, StartTrial, SubmitApplication and Subscribe events.

To capture user data like name or email, you must add the info-frm-cntr-pf class to your form container first. Then add the specific field classes to individual inputs.

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`
Email input	`info-cust-em-pf`
Phone input	`info-cust-ph-pf`
Value or price field	`info-val-pf`

Search / Location Events Classes

Use these classes to track user Search and FindLocation events. Wrap your search or location input fields and buttons with the container element, then add the appropriate classes to the input field and button.

The container class info-srch-ctnr-pf should wrap both your input field and button. When the button is clicked, PixelFlow will extract data from the input field and send it with the event.

Element	CSS Class
Search / Location container element (wraps your input field and a button)	`info-srch-ctnr-pf`
Search input field (user types search text here)	`action-inpt-srch-014-pf`
Search button (event will be sent with data extracted from input field when this button is clicked)	`action-btn-srch-015-pf`
Find location input (user types location here)	`action-inpt-loc-016-pf`
Find location button (event will be sent with data extracted from input field when this button is clicked)	`action-btn-loc-017-pf`

eCommerce Event Classes

Use these classes to track product information for eCommerce events: Add To Wish List, Add To Cart, Initiate Checkout, and Purchase.

Apply these to elements on your cart, checkout, or order confirmation pages.

eCommerce tracking requires a nested structure. You must add the main container class first, then add individual product container classes, and finally add specific product detail classes.

Container Structure

Element	CSS Class
(REQUIRED) Main parent container holding all products and button	`info-chk-itm-ctnr-pf`
Total amount element (optional)	`info-totl-amt-pf`

Product-Level Classes

Element	CSS Class
(REQUIRED) Individual product container	`info-chk-itm-pf`
Product ID	`info-itm-id-pf`
Product price	`info-itm-prc-pf`
Product quantity	`info-itm-qnty-pf`

For product IDs: Use the same ID that exists in your CMS/database and Meta Product Catalog. You can add this as a hidden field if you don't want it visible to users.

Getting Help

If you need assistance implementing these classes on your specific platform or troubleshooting tracking issues, refer to your platform-specific guide or contact PixelFlow support.

Once you've added the appropriate classes, test your tracking by completing the actions on your website and checking the PixelFlow event logs to confirm events are firing correctly.