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, andPurchaseevents
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 |
|---|---|
AddPaymentInfo | |
Subscribe | |
Contact | |
InitiateCheckout | |
AddtoCart | |
AddtoWishlist | |
CompleteRegistration | |
CustomiseProduct | |
Donate | |
Lead | |
StartTrial | |
SubmitApplication | |
SearchInput | |
SearchButton | |
FindLocationInput | |
FindLocationButton | |
Purchase | |
ViewContent | |
Form Event Classes
Apply these classes to form containers and input fields to capture user information. Works with AddPaymentInfo, CompleteRegistration, Lead, StartTrial, Subscribe, Contact, and SubmitApplication 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 | |
First name input | |
Last name input | |
Email input | |
Phone input | |
Value or price field | |
Search/location input | |
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 | |
Total amount element (optional) | |
Product-Level Classes
Element | CSS Class |
|---|---|
(REQUIRED) Individual product container | |
Product ID | |
Product price | |
Product quantity | |
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.