Event-Klassen in Framer

Wie Sie bestimmte Elemente auf Ihrer Framer-Website kennzeichnen und ihnen Events zuweisen

Informationen zum Tracking von Events durch Zuweisung eines bestimmten Events zu einer speziellen URL finden Sie in diesem Guide.

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

So verwenden Sie Event-Klassen in 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:

Code-Overrides einrichten

Klicken Sie im Framer Designer auf ein beliebiges Element, das Sie tracken möchten
Scrollen Sie im rechten Panel 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. Sobald sie erstellt ist, können Sie sie für alle Elemente wiederverwenden, die Sie auf Ihrer Framer-Website tracken möchten.

Zuweisen von Event-Klassen zu Elementen

Klicken Sie im Framer Designer auf das Element, das Sie tracken möchten
Wählen Sie im Abschnitt „Code Overrides“ Ihre erstellte Datei (z. B. PixelFlowClasses) im Feld file aus
Verwenden Sie das Klassendokument, um herauszufinden, welche Klasse dem Event entspricht, das Sie tracken 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-Präsenz nach dem Hinzufügen der Event-Klassen zu veröffentlichen. Änderungen werden erst wirksam, wenn die Website live ist.

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

Suchen Sie die Subscribe-Klasse im Klassendokument: action-btn-sub-002-pf
Klicken Sie im Framer Designer auf Ihren Subscribe-Button
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 tracken, wann immer Nutzer auf diesen Button klicken, und die Daten an Meta senden.

Tracking von Formularübermittlungen

Um Formularübermittlungen zu tracken 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 das FormContainer Override zu Ihrem Formular-Container-Element hinzu
Fügen Sie das entsprechende Action-Override zu Ihrem Senden-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 E-Mail-Feld
- FormPhoneInput für das Telefonnummer-Feld
- FormLastNameInput für das Feld Nachname

Jedes Override entspricht einer spezifischen PixelFlow-Klasse. Beispielsweise wendet FormNameInput die Klasse info-cust-fn-pf an und FormEmailInput die Klasse info-cust-em-pf.

Überprüfung Ihrer Einrichtung

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
Überprüfen Sie in den Entwicklertools, ob die PixelFlow-Klasse im HTML-Code dieses Elements erscheint
Testen Sie das Tracking, indem Sie das Event auslösen (Klicken des Buttons, Absenden des Formulars 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 Guide)
Bestätigen Sie, dass Sie Ihre Website nach dem Hinzufügen der Overrides veröffentlicht haben
Stellen Sie sicher, dass Sie das richtige Override aus dem Dropdown-Menü ausgewählt haben
Prüfen Sie Ihre Browser-Konsole auf JavaScript-Fehler, die das Tracking verhindern könnten

Formulardaten werden nicht erfasst

Stellen Sie sicher, dass das FormContainer-Override zum Formular-Wrapper-Element hinzugefügt wurde
Überprüfen Sie, ob die Overrides für Eingabefelder zu den eigentlichen Input-Elementen hinzugefügt wurden, nicht zu 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 via URLs als alternative Methode
Schließen Sie das Framer Setup ab, falls Sie dies noch nicht getan haben

War das hilfreich?

Event-Klassen in Framer

So verwenden Sie Event-Klassen in Framer

Code-Overrides einrichten

Zuweisen von Event-Klassen zu Elementen

Beispiel: Tracking eines Subscribe-Buttons

Tracking von Formularübermittlungen

Überprüfung Ihrer Einrichtung

Häufige Probleme und Lösungen

Override erscheint nicht im Dropdown

Events werden im PixelFlow-Dashboard nicht getrackt

Formulardaten werden nicht erfasst

Nächste Schritte