Pixelflow
All Collections
Event Tracking via Classes
Event Classes on HTML Websites

Learn how to label specific elements on your HTML website and assign Meta CAPI events to them for accurate server-side tracking.

For information on how to track events by assigning a specific event to a particular URL, follow this guide.

How to Use Event Classes on HTML

Adding event tracking to your HTML website is straightforward. Simply add the appropriate PixelFlow class to the HTML elements you want to track.

Basic Implementation

Add the class name from the event classes table directly to your HTML element's class attribute:

<!-- Example: Track a Subscribe button -->
<button class="action-btn-sub-002-pf">Subscribe to Newsletter</button>

You can combine PixelFlow classes with your existing CSS classes:

<!-- Multiple classes - both your styling and PixelFlow tracking -->
<button class="btn btn-primary action-btn-sub-002-pf">
  Subscribe to Newsletter
</button>

You can also use PixelFlow classes on links:

<a href="/subscribe" class="cta-link action-btn-sub-002-pf"> Subscribe Now </a>

Once you add the class and deploy your website, PixelFlow will automatically track Subscribe events whenever users click that button and send the data to Meta.

Tracking Form Submissions

To track form submissions and capture user data (name, email, phone), you need to add classes to both the form container and individual input fields.

Basic Form Tracking

Step 1: Add info-frm-cntr-pf to your form element or a wrapper div:

<form class="info-frm-cntr-pf">
  <!-- form fields here -->
</form>

Step 2: Add the appropriate event class to your submit button:

<button type="submit" class="action-btn-lead-011-pf">Submit</button>

Complete Form Example with Data Extraction

To capture user information, add data extraction classes to your input fields:

<form class="contact-form info-frm-cntr-pf" action="/submit" method="post">
  <div class="form-group">
    <label for="firstName">First Name</label>
    <input
      type="text"
      id="firstName"
      name="firstName"
      class="form-control info-cust-fn-pf"
      required
    />
  </div>

  <div class="form-group">
    <label for="lastName">Last Name</label>
    <input
      type="text"
      id="lastName"
      name="lastName"
      class="form-control info-cust-ln-pf"
    />
  </div>

  <div class="form-group">
    <label for="email">Email Address</label>
    <input
      type="email"
      id="email"
      name="email"
      class="form-control info-cust-em-pf"
      required
    />
  </div>

  <div class="form-group">
    <label for="phone">Phone Number</label>
    <input
      type="tel"
      id="phone"
      name="phone"
      class="form-control info-cust-ph-pf"
    />
  </div>

  <button type="submit" class="btn btn-primary action-btn-lead-011-pf">
    Send Message
  </button>
</form>

PixelFlow automatically hashes email and phone data before sending to Meta, ensuring GDPR compliance and high event match quality scores.

Registration Form Example

<form class="signup-form info-frm-cntr-pf" action="/register" method="post">
  <h2>Create Your Account</h2>

  <input
    type="text"
    placeholder="First Name"
    class="input-field info-cust-fn-pf"
    required
  />

  <input
    type="text"
    placeholder="Last Name"
    class="input-field info-cust-ln-pf"
    required
  />

  <input
    type="email"
    placeholder="Email"
    class="input-field info-cust-em-pf"
    required
  />

  <input type="tel" placeholder="Phone" class="input-field info-cust-ph-pf" />

  <input type="password" placeholder="Password" class="input-field" required />

  <button type="submit" class="btn-signup action-btn-reg-007-pf">
    Sign Up
  </button>
</form>

Tracking Search Events

PixelFlow supports tracking both standard search and location-based search functionality.

Option 1: Track search on Enter key press

Add the class to your search input field. PixelFlow will track the search when users press Enter:

<input
  type="text"
  placeholder="Search..."
  class="search-input action-inpt-srch-014-pf"
/>

Option 2: Track search on button click

For searches with a dedicated button, use a search container:

<div class="search-box info-srch-ctnr-pf">
  <input
    type="text"
    placeholder="Search..."
    class="search-input action-inpt-srch-014-pf"
  />
  <button class="search-button action-btn-srch-015-pf">Search</button>
</div>

Option 3: Button-only search (without input tracking)

<div class="search-box">
  <input type="text" placeholder="Search..." class="search-input" />
  <button class="search-button action-btn-srch-015-pf">
    <i class="icon-search"></i>
  </button>
</div>

For location-based search functionality (store locators, address search, etc.):

<div class="location-search info-srch-ctnr-pf">
  <input
    type="text"
    placeholder="Enter your location..."
    class="location-input action-inpt-loc-016-pf"
  />
  <button class="find-button action-btn-loc-017-pf">Find Nearby</button>
</div>

Complete Search Form Example

<form class="search-form" onsubmit="return false;">
  <div class="search-container info-srch-ctnr-pf">
    <input
      type="text"
      name="query"
      placeholder="What are you looking for?"
      class="search-field action-inpt-srch-014-pf"
      autocomplete="off"
    />
    <button type="submit" class="btn-search action-btn-srch-015-pf">
      <svg><!-- search icon --></svg>
      Search
    </button>
  </div>
</form>

Make sure you've installed the PixelFlow tracking script in your HTML <head> section before adding event classes. Without the script, events won't be tracked.

Next Steps

After adding event classes to your HTML elements:

Was this helpful?