Event-Klassen auf Framer

Hinweis: Wir haben jetzt eine einfachere Tracking-Erfahrung für Framer veröffentlicht, indem wir den Visual Tagger verwenden – ein Widget, das auf Ihrer Framer-Website geladen wird und es Ihnen ermöglicht, jedes Element anzuklicken und mit einem Event zu taggen. Weitere Informationen finden Sie hier.

So kennzeichnen Sie bestimmte Elemente auf Ihrer Framer-Website und weisen ihnen Events zu

Informationen dazu, wie Sie Events verfolgen, indem Sie ein bestimmtes Event einer bestimmten URL zuweisen, finden Sie in diesem Leitfaden.

Um bestimmte Elemente auf Ihrer Website zu kennzeichnen, die Sie verfolgen möchten, folgen Sie der untenstehenden Anleitung.

So verwenden Sie Event-Klassen auf Framer

Fügen Sie die Klasse aus dem Klassendokument zu Elementen hinzu, indem Sie die Code-Overrides-Funktion von Framer nutzen. Folgen Sie diesen Schritten:

Einrichten von Code-Overrides

Klicken Sie im Framer Designer auf ein beliebiges Element, das Sie verfolgen möchten
Scrollen Sie im rechten Panel nach unten zum Abschnitt Code Overrides und klappen Sie diesen auf
Klicken Sie im Feld file auf das Dropdown-Menü, wählen Sie New file, benennen Sie Ihr Override (z. B. PixelFlowClasses) und klicken Sie auf Create

Löschen Sie den erstellten Inhalt und ersetzen Sie ihn durch den folgenden Code:

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} />;
	};
}

Sie müssen diese Datei nur einmal erstellen. Nachdem sie erstellt wurde, können Sie sie für alle Elemente wiederverwenden, die Sie auf Ihrer Framer-Website verfolgen möchten.

Anwenden von Event-Klassen auf Elemente

Klicken Sie im Framer Designer auf das Element, das Sie verfolgen möchten
Wählen Sie im Abschnitt Code Overrides Ihre erstellte Datei (z. B. PixelFlowClasses) im Feld file aus
Suchen Sie im Klassendokument nach der Klasse, die dem Event entspricht, das Sie verfolgen möchten
Klicken Sie im Framer Designer auf das Feld Override und wählen Sie die entsprechende Klasse aus dem Dropdown-Menü aus (z. B. AddPaymentInfo oder Subscribe)
Sobald dies erledigt ist, veröffentlichen Sie Ihre Website, um die Änderungen zu übernehmen

Vergessen Sie nicht, Ihre Framer-Website nach dem Hinzufügen von Event-Klassen zu veröffentlichen. Änderungen werden erst wirksam, wenn die Website live ist.

Wenn Sie ein „Subscribe“-Event jedes Mal verfolgen möchten, wenn jemand auf einen bestimmten „Subscribe“-Button auf Ihrer Framer-Website klickt:

Finden Sie die Subscribe-Klasse im Klassendokument: action-btn-sub-002-pf
Klicken Sie auf Ihren Subscribe-Button im Framer Designer
Wählen Sie im Abschnitt Code Overrides Ihre PixelFlowClasses-Datei aus
Wählen Sie im Dropdown-Menü Override Subscribe aus
Veröffentlichen Sie Ihre Website

Nach der Veröffentlichung wird PixelFlow automatisch Subscribe-Events erfassen, sobald Nutzer auf diesen Button klicken, und die Daten an Meta senden.

Tracking von Formularübermittlungen

Um Formularübermittlungen zu verfolgen und Benutzerdaten (Name, E-Mail, Telefon) zu erfassen, müssen Sie Overrides sowohl für den Formular-Container als auch für die einzelnen Eingabefelder hinzufügen:

Fügen Sie den FormContainer Override zu Ihrem Formular-Container-Element hinzu
Fügen Sie den entsprechenden Action-Override zu Ihrem Absende-Button hinzu (z. B. Lead für ein Lead-Event)
Fügen Sie Overrides zur Datenextraktion zu Ihren Eingabefeldern hinzu:
- FormNameInput für das Feld „Vorname“
- FormEmailInput für das Feld „E-Mail“
- FormPhoneInput für das Feld „Telefon“
- FormLastNameInput für das Feld „Nachname“

Jeder Override entspricht einer spezifischen PixelFlow-Klasse. Zum Beispiel wendet FormNameInput die Klasse info-cust-fn-pf an und FormEmailInput die Klasse info-cust-em-pf.

Überprüfen Ihres Setups

Nachdem Sie die Overrides zu Ihren Elementen hinzugefügt und veröffentlicht haben:

Besuchen Sie Ihre Seite auf der Live-Website (nicht im Vorschaumodus)
Klicken Sie mit der rechten Maustaste auf das Element und wählen Sie Untersuchen oder Element untersuchen
Prüfen Sie in den Entwicklertools, ob die PixelFlow-Klasse im HTML-Code für dieses Element erscheint
Testen Sie das Tracking, indem Sie das Event auslösen (den Button klicken, das Formular absenden usw.)
Überprüfen Sie Ihr PixelFlow-Dashboard, um zu bestätigen, dass das Event erfasst wurde

Häufige Probleme und Lösungen

Stellen Sie sicher, dass Sie die Override-Datei erstellt und den vollständigen Code eingefügt haben
Überprüfen Sie, ob der Code keine Syntaxfehler enthält
Versuchen Sie, den Framer Designer zu aktualisieren oder das Projekt zu schließen und erneut zu öffnen

Events werden im PixelFlow-Dashboard nicht getrackt

Überprüfen Sie, ob das PixelFlow-Skript korrekt installiert ist (siehe Framer Setup-Leitfaden)
Bestätigen Sie, dass Sie Ihre Website nach dem Hinzufügen der Overrides veröffentlicht haben
Stellen Sie sicher, dass Sie den richtigen Override aus dem Dropdown-Menü ausgewählt haben
Überprüfen Sie Ihre Browser-Konsole auf JavaScript-Fehler, die das Tracking verhindern könnten

Formulardaten werden nicht erfasst

Stellen Sie sicher, dass der FormContainer-Override dem Formular-Wrapper-Element hinzugefügt wurde
Überprüfen Sie, ob die Overrides für Eingabefelder den tatsächlichen Input-Elementen hinzugefügt wurden, nicht den Labels oder Wrappern
Stellen Sie sicher, dass die Override-Namen exakt mit denen in der Codedatei übereinstimmen

Nächste Schritte

Sehen Sie sich die vollständige Liste der verfügbaren Klassen im Klassendokument an
Erfahren Sie mehr über das Tracking von Events über URLs als alternative Methode
Schließen Sie das Framer-Setup ab, falls Sie dies noch nicht getan haben

War das hilfreich?

Event-Klassen auf Framer

So verwenden Sie Event-Klassen auf Framer

Einrichten von Code-Overrides

Anwenden von Event-Klassen auf Elemente

Beispiel: Tracking eines Subscribe-Buttons

Tracking von Formularübermittlungen

Überprüfen Ihres Setups

Häufige Probleme und Lösungen

Override erscheint nicht im Dropdown-Menü

Events werden im PixelFlow-Dashboard nicht getrackt

Formulardaten werden nicht erfasst

Nächste Schritte