Event Classes on Framer

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 guide explains how to tag elements on your Framer website with a "class" that lets PixelFlow track that particular element, section or data to trigger or send along with an event to Meta.

Note: We've now released a smoother tracking experience for Framer by using the Visual Tagger - a widget that loads on your Framer website and lets you click any element and tag it with an event. Read more information here.

How to Use Class Tracking on Framer

Add the class from the Classes Document to elements using Framer's Code Overrides feature.

Before you do this for the first time, please follow the steps in "First Time Setup for Event Classes on Framer" below, then follow the steps afterwards.

You must follow the "First Time Setup" instructions below before you can use this - click to expand the section below.

IMPORTANT: First Time Setup for Class Tracking on Framer

You only need to create this file once. After it's created, you can reuse it for all elements you want to track on your Framer site.

Before you can use classes based tracking on Framer, you need to follow these steps one time first.

In Framer Designer, click on any element you want to track
On the right panel, scroll down to Code Overrides section and expand it

Framer Designer right panel showing Code Overrides section expanded with file dropdown visible

In the file field, click the dropdown, select New file, name your override (e.g., PixelFlowClasses), and click Create

Delete the content it creates and replace it with the following code (IMPORTANT - press the copy button or expand it and select it all)

import type { ComponentType } from 'react';
export function AddPaymentInfo(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-pymt-001-pf')
			: (props.className = 'action-btn-pymt-001-pf');
		return <Component {...props} />;
	};
}

export function Subscribe(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-sub-002-pf')
			: (props.className = 'action-btn-sub-002-pf');
		return <Component {...props} />;
	};
}

export function Contact(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-cntct-003-pf')
			: (props.className = 'action-btn-cntct-003-pf');
		return <Component {...props} />;
	};
}

export function InitiateCheckout(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-buy-004-pf')
			: (props.className = 'action-btn-buy-004-pf');
		return <Component {...props} />;
	};
}

export function AddToCart(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-cart-005-pf')
			: (props.className = 'action-btn-cart-005-pf');
		return <Component {...props} />;
	};
}

export function AddToWishlist(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-wl-006-pf')
			: (props.className = 'action-btn-wl-006-pf');
		return <Component {...props} />;
	};
}

export function CompleteRegistration(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-reg-007-pf')
			: (props.className = 'action-btn-reg-007-pf');
		return <Component {...props} />;
	};
}

export function CustomizeProduct(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-cstm-008-pf')
			: (props.className = 'action-btn-cstm-008-pf');
		return <Component {...props} />;
	};
}

export function Donate(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-don-009-pf')
			: (props.className = 'action-btn-don-009-pf');
		return <Component {...props} />;
	};
}

export function Lead(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-lead-011-pf')
			: (props.className = 'action-btn-lead-011-pf');
		return <Component {...props} />;
	};
}

export function StartTrial(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-trial-012-pf')
			: (props.className = 'action-btn-trial-012-pf');
		return <Component {...props} />;
	};
}

export function SubmitApplication(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-submit-013-pf')
			: (props.className = 'action-btn-submit-013-pf');
		return <Component {...props} />;
	};
}

export function SearchInput(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-inpt-srch-014-pf')
			: (props.className = 'action-inpt-srch-014-pf');
		return <Component {...props} />;
	};
}

export function SearchButton(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-srch-015-pf')
			: (props.className = 'action-btn-srch-015-pf');
		return <Component {...props} />;
	};
}

export function FindLocationInput(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-inpt-loc-016-pf')
			: (props.className = 'action-inpt-loc-016-pf');
		return <Component {...props} />;
	};
}

export function FindLocationButton(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-loc-017-pf')
			: (props.className = 'action-btn-loc-017-pf');
		return <Component {...props} />;
	};
}

export function Purchase(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-plc-ord-018-pf')
			: (props.className = 'action-btn-plc-ord-018-pf');
		return <Component {...props} />;
	};
}

export function ViewContent(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' action-btn-vc-019-pf')
			: (props.className = 'action-btn-vc-019-pf');
		return <Component {...props} />;
	};
}

export function ProductsListContainer(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-chk-itm-ctnr-pf')
			: (props.className = 'info-chk-itm-ctnr-pf');
		return <Component {...props} />;
	};
}

export function ProductsListTotalPrice(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-totl-amt-pf')
			: (props.className = 'info-totl-amt-pf');
		return <Component {...props} />;
	};
}

export function ProductContainer(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-chk-itm-pf')
			: (props.className = 'info-chk-itm-pf');
		return <Component {...props} />;
	};
}

export function ProductId(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-itm-id-pf')
			: (props.className = 'info-itm-id-pf');
		return <Component {...props} />;
	};
}

export function ProductPrice(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-itm-prc-pf')
			: (props.className = 'info-itm-prc-pf');
		return <Component {...props} />;
	};
}

export function ProductQuantity(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-itm-qnty-pf')
			: (props.className = 'info-itm-qnty-pf');
		return <Component {...props} />;
	};
}

export function FormContainer(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-frm-cntr-pf')
			: (props.className = 'info-frm-cntr-pf');
		return <Component {...props} />;
	};
}

export function FormValueOrPrice(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-val-pf')
			: (props.className = 'info-val-pf');
		return <Component {...props} />;
	};
}

export function FormFullNameInput(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-cust-full-name-pf')
			: (props.className = 'info-cust-full-name-pf');
		return <Component {...props} />;
	};
}

export function FormFirstNameInput(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-cust-fn-pf')
			: (props.className = 'info-cust-fn-pf');
		return <Component {...props} />;
	};
}

export function FormLastNameInput(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-cust-ln-pf')
			: (props.className = 'info-cust-ln-pf');
		return <Component {...props} />;
	};
}

export function FormEmailInput(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-cust-em-pf')
			: (props.className = 'info-cust-em-pf');
		return <Component {...props} />;
	};
}

export function FormPhoneInput(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-cust-ph-pf')
			: (props.className = 'info-cust-ph-pf');
		return <Component {...props} />;
	};
}

export function FormSearchLocationInput(Component): ComponentType {
	return (props) => {
		props.className
			? (props.className += ' info-srch-ctnr-pf')
			: (props.className = 'info-srch-ctnr-pf');
		return <Component {...props} />;
	};
}

Applying Event Classes to Elements

Click on the element you want to track in Framer Designer
In the Code Overrides section, select your created file (e.g., PixelFlowClasses) in the file field
Use the Classes Document to find which class corresponds to the event you want to track
Click on the Override field in Framer Designer and select the appropriate class from the dropdown (e.g., AddPaymentInfo or Subscribe)
Once done, publish your website to apply the changes

Make sure to publish your Framer site after adding event classes. Changes won't take effect until the site is live.

Triggering an Event from a Button in Framer

If you want to track a "Lead" event every time someone clicks a specific "Start Trial" button on your Framer website:

Click on your Subscribe button in Framer Designer
In the Code Overrides section, select your PixelFlowClasses file
In the Override dropdown, select Subscribe
Publish your website

Once published, PixelFlow will automatically track Subscribe events whenever users click that button and send the data to Meta.

Triggering an Event from a Form in Framer

Animation demonstrating how to add FormContainer and data extraction overrides to form elements in Framer for capturing form submissions with user data

To track form submissions, trigger an event and capture user data (name, email, phone), you need to add overrides to both the form container and individual input fields:

Add FormContainer override to your form container element
Add the appropriate action override to your submit button (e.g., Lead for a Lead event)
Add data extraction overrides to your input fields:
- FormNameInput for first name input
- FormEmailInput for email input
- FormPhoneInput for phone input
- FormLastNameInput for last name input

Verifying Your Setup

After adding overrides to your elements and publishing:

Visit your page on the live website (not in preview mode)
Right-click the element and select Inspect or Inspect Element
In the developer tools, verify that the PixelFlow class appears in the HTML code for that element
Test the tracking by triggering the event (clicking the button, submitting the form, etc.)
Check your PixelFlow event logs to confirm the event was captured

Common Issues and Solutions

Multiple Events Being Triggered

If you didn't add the "container" element (FormContainer) to your overall form, it can trigger multiple events on button click. Ensure you've added FormContainer

Make sure you created the override file and pasted the complete code
Verify that the code doesn't have any syntax errors
Try refreshing Framer Designer or closing and reopening the project

Events Not Tracking in PixelFlow Dashboard

Verify the PixelFlow script is installed correctly (check the Framer Setup guide)
Confirm you published your site after adding the overrides
Make sure you selected the correct override from the dropdown
Check your browser console for JavaScript errors that might prevent tracking

Form Data Not Being Captured

Ensure FormContainer override is added to the form wrapper element
Verify input field overrides are added to the actual input elements, not labels or wrappers
Make sure the override names match exactly what's in the code file

Was this helpful?

Event Classes on Framer

Recommended: Visual Tagger

How to Use Class Tracking on Framer

Applying Event Classes to Elements

Triggering an Event from a Button in Framer

Triggering an Event from a Form in Framer

Verifying Your Setup

Common Issues and Solutions

Multiple Events Being Triggered

Override Not Appearing in Dropdown

Events Not Tracking in PixelFlow Dashboard

Form Data Not Being Captured