Two Ways to Track Events

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

  1. Event URL tracking - Assign a specific page URL to trigger a specific event (eg. yourpage.com/success)

  2. 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.

Was this helpful?