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

AddPaymentInfo

action-btn-pymt-001-pf

Subscribe

action-btn-sub-002-pf

Contact

action-btn-cntct-003-pf

InitiateCheckout

action-btn-buy-004-pf

AddtoCart

action-btn-cart-005-pf

AddtoWishlist

action-btn-wl-006-pf

CompleteRegistration

action-btn-reg-007-pf

CustomiseProduct

action-btn-cstm-008-pf

Donate

action-btn-don-009-pf

Lead

action-btn-lead-011-pf

StartTrial

action-btn-trial-012-pf

SubmitApplication

action-btn-submit-013-pf

SearchInput

action-inpt-srch-014-pf

SearchButton

action-btn-srch-015-pf

FindLocationInput

action-inpt-loc-016-pf

FindLocationButton

action-btn-loc-017-pf

Purchase

action-btn-plc-ord-018-pf

ViewContent

action-btn-vc-019-pf

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

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 input

info-srch-ctnr-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?