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-trackWert:
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-ctapricing-buttoncontact-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. 🙂