Pixelflow
Plattformspezifische Anleitungen

Event-Klassen auf Framer

Recommended: Visual Tagger

Wir empfehlen die Verwendung des Visual Taggers als einfachere Option zum Einrichten des Trackings – er bietet die gleiche Tracking-Funktionalität in einem einfachen Widget

Click here to learn more about the visual tagger

Diese Anleitung erklärt, wie du Elemente auf deiner Framer-Website mit einer „Klasse“ kennzeichnest, damit PixelFlow dieses spezielle Element, diesen Abschnitt oder diese Daten verfolgen kann, um ein Event an Meta auszulösen oder zu senden.

Hinweis: Wir haben jetzt mit dem Visual Tagger ein reibungsloseres Tracking-Erlebnis für Framer veröffentlicht – ein Widget, das auf deiner Framer-Website geladen wird und es dir ermöglicht, jedes Element anzuklicken und mit einem Event zu kennzeichnen. Hier findest du weitere Informationen.

So verwendest du Klassen-Tracking auf Framer

Füge die Klasse aus dem Klassen-Dokument zu Elementen hinzu, indem du die Funktion „Code Overrides“ von Framer verwendest.

Bevor du dies zum ersten Mal tust, befolge bitte die Schritte unter „Ersteinrichtung für Event-Klassen auf Framer“ unten und anschließend die weiteren Schritte.

Du musst die Anweisungen zur „Ersteinrichtung“ unten befolgen, bevor du dies nutzen kannst – klicke, um den folgenden Abschnitt zu erweitern.

WICHTIG: Ersteinrichtung für Klassen-Tracking auf Framer

Du musst diese Datei nur einmal erstellen. Sobald sie erstellt ist, kannst du sie für alle Elemente wiederverwenden, die du auf deiner Framer-Website tracken möchtest.

Bevor du das klassenbasierte Tracking auf Framer nutzen kannst, musst du diese Schritte einmalig durchführen.

  1. Klicke im Framer Designer auf ein beliebiges Element, das du tracken möchtest

  2. Scrolle im rechten Panel nach unten zum Bereich Code Overrides und erweitere ihn

Das rechte Panel im Framer Designer zeigt den erweiterten Bereich „Code Overrides“ mit sichtbarem Datei-Dropdown-Menü

  1. Klicke im Feld file auf das Dropdown-Menü, wähle New file, benenne dein Override (z. B. PixelFlowClasses) und klicke auf Create

    Das Panel „Code Overrides“ im Framer Designer zeigt ein Dropdown-Menü mit der ausgewählten Option „New file“ zum Erstellen einer Code-Override-Datei

  2. Lösche den erstellten Inhalt und ersetze ihn durch den folgenden Code (WICHTIG – drücke auf die Schaltfläche zum Kopieren oder erweitere ihn und wähle alles aus)

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

Anwenden von Event-Klassen auf Elemente

  1. Klicke im Framer Designer auf das Element, das du tracken möchtest

  2. Wähle im Bereich „Code Overrides“ deine erstellte Datei (z. B. PixelFlowClasses) im Feld file aus

  3. Verwende das Klassen-Dokument, um herauszufinden, welche Klasse dem Event entspricht, das du tracken möchtest

  4. Klicke auf das Feld Override im Framer Designer und wähle die passende Klasse aus dem Dropdown-Menü aus (z. B. AddPaymentInfo oder Subscribe)

  5. Sobald du fertig bist, veröffentliche deine Website, um die Änderungen zu übernehmen

Stelle sicher, dass du deine Framer-Website nach dem Hinzufügen von Event-Klassen veröffentlichst. Änderungen werden erst wirksam, wenn die Website live ist.

Auslösen eines Events über einen Button in Framer

Animation, die zeigt, wie eine Subscribe-Event-Klasse mithilfe von Code Overrides zu einem Button in Framer hinzugefügt wird, wobei die Klasse auf der veröffentlichten Website erscheint

Wenn du ein „Lead“-Event tracken möchtest, jedes Mal, wenn jemand auf einen bestimmten „Start Trial“-Button auf deiner Framer-Website klickt:

  1. Klicke auf deinen Subscribe-Button im Framer Designer

  2. Wähle im Bereich „Code Overrides“ deine PixelFlowClasses-Datei aus

  3. Wähle im Override-Dropdown-Menü Subscribe aus

  4. Veröffentliche deine Website

Sobald sie veröffentlicht ist, wird PixelFlow automatisch Subscribe-Events tracken, wenn Nutzer auf diesen Button klicken, und die Daten an Meta senden.

Auslösen eines Events über ein Formular in Framer

Animation, die demonstriert, wie FormContainer- und Datenextraktions-Overrides zu Formularelementen in Framer hinzugefügt werden, um Formulareinsendungen mit Nutzerdaten zu erfassen

Um Formulareinsendungen zu tracken, ein Event auszulösen und Nutzerdaten (Name, E-Mail, Telefon) zu erfassen, musst du Overrides sowohl zum Formular-Container als auch zu den einzelnen Eingabefeldern hinzufügen:

  1. Füge das FormContainer-Override zu deinem Formular-Container-Element hinzu

  2. Füge das entsprechende Action-Override zu deinem Senden-Button hinzu (z. B. Lead für ein Lead-Event)

  3. Füge Data-Extraction-Overrides zu deinen Eingabefeldern hinzu:

    • FormNameInput für die Eingabe des Vornamens

    • FormEmailInput für die E-Mail-Eingabe

    • FormPhoneInput für die Telefonnummer-Eingabe

    • FormLastNameInput für die Eingabe des Nachnamens

Überprüfung deines Setups

Nachdem du Overrides zu deinen Elementen hinzugefügt und veröffentlicht hast:

  1. Besuche deine Seite auf der Live-Website (nicht im Vorschaumodus)

  2. Klicke mit der rechten Maustaste auf das Element und wähle Untersuchen oder Element untersuchen

  3. Vergewissere dich in den Entwicklertools, dass die PixelFlow-Klasse im HTML-Code für dieses Element erscheint

  4. Teste das Tracking, indem du das Event auslöst (auf den Button klicken, das Formular absenden usw.)

  5. Überprüfe deine PixelFlow-Event-Logs, um zu bestätigen, dass das Event erfasst wurde

Häufige Probleme und Lösungen

Es werden mehrere Events ausgelöst

  • Wenn du das „Container“-Element (FormContainer) nicht zu deinem gesamten Formular hinzugefügt hast, kann dies beim Klick auf den Button mehrere Events auslösen. Stelle sicher, dass du FormContainer hinzugefügt hast

Override erscheint nicht im Dropdown-Menü

  • Stelle sicher, dass du die Override-Datei erstellt und den vollständigen Code eingefügt hast

  • Vergewissere dich, dass der Code keine Syntaxfehler enthält

  • Versuche, den Framer Designer zu aktualisieren oder das Projekt zu schließen und erneut zu öffnen

Events werden nicht im PixelFlow-Dashboard getrackt

  • Überprüfe, ob das PixelFlow-Skript korrekt installiert ist (siehe die Framer-Setup-Anleitung)

  • Bestätige, dass du deine Website nach dem Hinzufügen der Overrides veröffentlicht hast

  • Stelle sicher, dass du das richtige Override aus dem Dropdown-Menü ausgewählt hast

  • Überprüfe deine Browser-Konsole auf JavaScript-Fehler, die das Tracking verhindern könnten

Formulardaten werden nicht erfasst

  • Stelle sicher, dass das FormContainer-Override zum Wrapper-Element des Formulars hinzugefügt wurde

  • Vergewissere dich, dass die Overrides für die Eingabefelder zu den tatsächlichen Eingabeelementen hinzugefügt wurden, nicht zu Beschriftungen oder Wrappern

  • Stelle sicher, dass die Override-Namen exakt mit denen in der Codedatei übereinstimmen

War das hilfreich?
War das hilfreich?