Pixelflow
Platform Specific Instructions

Event Classes on WordPress

Recommended: Visual Tagger

We recommend using the Visual Tagger as a simpler option to setup tracking - it has the same tracking functionality in a simple widget

Click here to learn more about the visual tagger

This article explains how to tag specific elements on your WordPress website and assign events to them.

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

To tag specific elements on your website that you'd like to track, follow the guide below.

If you're using WooCommerce, PixelFlow can automatically add tracking classes to your eCommerce elements. See the WordPress Setup guide for details on enabling WooCommerce integration.

How to Use Event Classes on WordPress

Add the class from the Classes Document to that particular element in WordPress. The method depends on which page builder or editor you're using:

Using the WordPress Block Editor (Gutenberg)

How to edit classes in Wordpress Gutenberg

The default WordPress editor makes it easy to add custom classes to any block:

  1. Select the block (button, form, or any element) you want to track

  2. In the right sidebar, click the Block tab if not already selected

  3. Scroll down to the Advanced section and expand it

  4. In the Additional CSS Class(es) field, enter the PixelFlow class name (for example, action-btn-sub-002-pf for a Subscribe event)

  5. Click Update or Publish to save your changes

You can add multiple classes by separating them with spaces. For example, to track a Subscribe event and add form data extraction, you might use: action-btn-sub-002-pf info-frm-cntr-pf

Using Elementor

Elementor page builder showing Advanced tab with CSS Classes field for adding custom PixelFlow tracking classes to elements

If you're using Elementor as your page builder:

  1. Click on the element you want to track in the Elementor editor

  2. In the left panel, click the Advanced tab

  3. Find the CSS Classes field (or Additional CSS Classes depending on your Elementor version)

  4. Enter the PixelFlow class name from the Classes Document

  5. Click Update to publish your changes

Make sure to publish or update your page after adding classes. Changes won't take effect until the page is live.

Using Other Page Builders

Most WordPress page builders have similar options for adding CSS classes:

  • Divi Builder: Select the module → Advanced tab → CSS ID & Classes section → CSS Class field

  • Beaver Builder: Select the module → Advanced tab → CSS Selectors section → Class field

  • WPBakery: Edit the element → Design Options tab → Extra class name field

  • Kadence Blocks: Select block → Advanced tab → Additional CSS Class(es) field

Example: Tracking a Subscribe Button

If you want to track a "Subscribe" event every time someone clicks a specific "Subscribe" button on your website:

  1. Find the Subscribe class from the Classes Document: action-btn-sub-002-pf

  2. Select your Subscribe button in your WordPress editor or page builder

  3. Add action-btn-sub-002-pf to the CSS class field using the method for your editor (see above)

  4. Save and publish your changes

Once published, 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:

  1. Add info-frm-cntr-pf to your form container or form element

  2. Add the appropriate action class to your submit button (e.g., action-btn-lead-011-pf for a Lead event)

  3. Add data extraction classes to your input fields:

    • info-cust-fn-pf for first name input

    • info-cust-em-pf for email input

    • info-cust-full-name-pf for full name input

    • info-cust-ph-pf for phone input

    • info-cust-ln-pf for last name input

For popular form plugins like Contact Form 7, WPForms, or Gravity Forms, you may need to add classes through the form builder's settings or use custom CSS selectors. Check your form plugin's documentation for how to add custom classes to form elements.

Verifying Your Setup

After adding classes to your elements:

  1. Visit your page on the live website (not in preview mode)

  2. Right-click the element and select Inspect or Inspect Element

  3. In the developer tools, verify that the PixelFlow class appears in the HTML code for that element

  4. Test the tracking by triggering the event (clicking the button, submitting the form, etc.)

  5. Check your PixelFlow dashboard to confirm the event was captured

If you're using a caching plugin (WP Rocket, W3 Total Cache, etc.), make sure to clear your cache after adding classes. Otherwise, visitors may see the old version of your page without the tracking classes.

Common Issues and Solutions

Classes Not Appearing on Live Site

  • Clear your WordPress cache if you're using a caching plugin

  • Make sure you clicked Update/Publish after adding the class

  • Check that you added the class to the correct element

  • Verify you're viewing the live page, not a preview or draft

Events Not Tracking in PixelFlow Dashboard

  • Verify the PixelFlow script is installed correctly (check the WordPress Setup guide)

  • Confirm you're using the exact class name from the Classes Document

  • Make sure the class is added to the clickable element (button, link) not a wrapper div

  • Check your browser console for JavaScript errors that might prevent tracking

Form Data Not Being Captured

  • Ensure info-frm-cntr-pf is added to the form container

  • Verify input field classes are added to the actual <input> elements, not labels or wrappers

  • For custom form plugins, you may need to add classes through plugin-specific settings

What's Next

Was this helpful?
Was this helpful?