Zum Hauptinhalt springen

Erweiterte Tracking-Setups mit benutzerdefinierten Attributen

In diesem Artikel erfährst du, wie du mit benutzerdefinierten Attributen Tracking-Setups für GA4, GTM und Meta Pixel stabil und zuverlässig umsetzen kannst.

Verfasst von Vanessa Haack

Mit benutzerdefinierten Attributen kannst du Elemente auf deiner Website eindeutig markieren und dadurch Tracking-Setups für Tools wie Google Tag Manager (GTM), Google Analytics (GA4) oder Meta Pixel deutlich stabiler und zuverlässiger machen.
​

Diese Methode ist besonders hilfreich, wenn du Klicks, Formulare oder andere Interaktionen messen möchtest, ohne dich auf Texte oder automatisch generierte CSS-Klassen zu verlassen.
​


Warum benutzerdefinierte Attribute sinnvoll sind

Viele Tracking-Setups greifen standardmäßig auf:

  • Button-Texte

  • CSS-Klassen

  • oder dynamische HTML-Strukturen

zurück. Die Herausforderung: Diese können sich durch Design- oder Textänderungen oder neue Veröffentlichungen schnell ändern und Tracking dadurch unzuverlässig machen.
​

Benutzerdefinierte Attribute lösen diese Herausforderung, indem sie ein stabiles, unveränderliches "Tracking-Markup" bereitstellen.

Dadurch ergeben sich unter anderem folgende Vorteile:

  • stabile Tracking-Struktur unabhängig von Designänderungen

  • keine Abhängigkeit von Button-Texten oder Klassen

  • einheitliche Logik für mehrere Tracking-Tools

  • sauber skalierbar für komplexe Funnels
    ​


Einrichtung der benutzerdefinierten Attribute

Schritt 1: Element auswählen

Gehe zu dem Element, dem du ein Attribut hinzufügen möchtest.

Schritt 2: Einstellungen öffnen

Bei einem Button: Klicke auf deinen Button und öffne über die drei Punkte die Option "Benutzerdefinierte Attribute".


​Bei einem Formular: Hier kannst du auf das Pinselsymbol klicken und anschließend über die drei Punkte die Option "Benutzerdefinierte Attribute" öffnen.
​


​Bei einem Formularfeld: Klicke auf das gewünschte Formularfeld, öffne über die drei Punkte die Einstellungen und wähle anschließend "Benutzerdefinierte Attribute" aus.
​


​Bei einem Abschnitt: Klicke oben rechts auf die drei Punkte des Abschnitts und wähle anschließend "Benutzerdefinierte Attribute" aus.
​

Schritt 3: Data-Attribut hinzufügen

Klicke auf "Data-Attribut hinzufügen" und trage den Attributnamen und Wert ein.


Beispiel:

  • Attributname: data-track

  • Wert: pricing-button

Das resultierende Data-Attribut lautet dann:

data-track="pricing-button"

📌 Hinweis: Das Attribut selbst löst kein Tracking aus. Es dient als stabiler "Hook", den Tracking-Tools erkennen können. Darauf aufbauend können Events ausgelöst werden, z.B.:

  • Klick auf einen Button

  • Formular-Submission

  • Interaktionen auf bestimmten Seitenbereichen


Anwendung in verschiedenen Tools

1. Google Tag Manager (GTM)

Nachdem du das Data-Attribut in Onepage hinterlegt hast, kannst du es im Google Tag Manager für Tracking-Zwecke verwenden.
​

Beispiel: data-track="pricing-button"

Im GTM erstellst du dann z.B. einen Klick-Trigger, der prüft, ob das jeweilige Element dieses Attribut enthält. Darauf basierend kannst du ein Event auslösen und an Google Analytics 4 oder andere Tracking-Tools senden.
​

Die konkrete Einrichtung der Variablen, Trigger und Tags erfolgt direkt im Google Tag Manager und hängt von deinem individuellen Tracking-Setup ab. Weitere Informationen findest du in der offiziellen Google Tag Manager Dokumentation.

📌 Hinweis: Der Google Tag Manager "erkennt" das Attribut nicht direkt als Auslöser. Stattdessen wird das Attribut über eine Variable ausgelesen (z.B. eine DOM-Element-Variable oder eine benutzerdefinierte JavaScript-Variable). Diese Variable wird anschließend in einem Trigger als Bedingung verwendet.

2. Google Analytics 4 (GA4)

Nachdem du das Data-Attribut in Onepage hinterlegt hast, dient es als eindeutige Markierung eines Elements (z.B. eines Buttons oder Formulars).
​

Beispiel: data-track="pricing-button"
​

Diese Markierung wird von Tracking-Tools wie Google Tag Manager oder einem direkten Tracking-Setup genutzt, um Interaktionen wie Klicks oder Formular-Absendungen zu erkennen.
​

Diese Interaktionen können anschließend als Events an Google Analytics 4 übermittelt und dort ausgewertet werden.

📌 Hinweis: GA4 selbst liest keine Data-Attribute direkt aus. Das Attribut dient ausschließlich als technische Kennzeichnung für das jeweilige Tracking-Setup.

Die konkrete Einrichtung der Event-Erfassung erfolgt je nach Setup entweder über den Google Tag Manager oder direkt über das GA4-Tracking (gtag / Code).

Weitere Informationen findest du in der offiziellen Google Analytics Hilfe:
​Google Analytics Hilfe-Center

3. Meta Pixel

Nachdem du das Data-Attribut in Onepage hinterlegt hast, kann dieses genutzt werden, um Interaktionen an das Meta Pixel zu übermitteln.
​

Beispiel: data-track="pricing-button"
​

Damit lassen sich z.B. Klicks auf Buttons oder andere wichtige Aktionen als Events erfassen und für Conversion-Tracking, Kampagnenauswertung oder Retargeting verwenden.
​

Die genaue Einrichtung erfolgt im Meta Events Manager oder über den Google Tag Manager und ist abhängig von deinem individuellen Tracking-Setup.
​

Weitere Informationen findest du in der offiziellen Meta-Dokumentation:
​Meta Business Hilfe-Center
​


Wichtige Regeln

Verwende klare und eindeutige Namen:

  • hero-cta

  • pricing-button

  • contact-form

Vermeide:

  • Leerzeichen

  • Sonderzeichen

  • generische Namen wie button1

Halte bestenfalls eine einheitliche Naming-Struktur über die gesamte Website ein.
​


💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂

Hat dies deine Frage beantwortet?