devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Website-Check

Event-Tracking-Script-Generator — Klicks mit Data-Attributen tracken

Tracke Button-Klicks, Links und Formular-Absendungen, indem du Attribute statt Code hinzufügst: data-track="sign_up_click" plus optionale data-track-*-Parameter. Ein kleines Script sendet jedes Event an die Tools, die du nutzt — GA4, Google Tag Manager, Meta Pixel, Plausible, PostHog, Mixpanel, Umami, Fathom oder Microsoft Clarity — und kann Outbound-Links, Datei-Downloads sowie E-Mail- und Telefon-Klicks automatisch erfassen. Entwickelt für Webflow-Custom-Attribute, funktioniert aber auf jeder Website.

Aktualisiert am

Vor </body> — oder Webflow Footer code


    
Attribute zu Elementen hinzufügen
In Webflow: Button auswählen → Settings-Panel → Custom Attributes → Name data-track, Wert sign_up_click. Für Parameter weitere Attribute hinzufügen.

    
Ausprobieren

      
      
Klicke auf die Buttons — Events erscheinen hier, statt gesendet zu werden.

  

  


    
 Deine Daten verlassen nie deinen Computer. Die Verarbeitung erfolgt zu 100 % lokal im Browser.

    
    
    

      
So nutzt du: Event-Tracking-Script-Generator
  1. Aktiviere die Analytics-Tools, die deine Website bereits lädt, und die automatischen Events, die du willst.
  2. Kopiere das Script in deinen Footer-Code (Webflow: Site settings → Custom code → Footer code).
  3. Füge data-track="event_name" zu jedem Button, Link oder Formular hinzu, plus data-track-*-Attribute für Parameter.
  4. Nutze Ausprobieren, um die Events zu sehen. Veröffentliche dann die Seite und prüfe die Events in der Live-Ansicht deines Analytics-Tools.


So funktioniert es


Das Script lauscht einmal auf der gesamten Seite, erfasst daher auch später hinzugefügte Elemente — CMS-Listen, Tabs, Popups. Klickt jemand auf ein Element mit data-track (oder auf etwas darin), liest das Script den Event-Namen und alle data-track-*-Attribute als Parameter aus: Aus data-track-location="hero" wird location: "hero". Bei einem <form> feuert das Event beim Absenden des Formulars statt bei jedem Klick. Feldwerte werden nie gelesen, es werden also keine personenbezogenen Daten gesendet.


Was jedes Tool erhält


  • GA4: gtag('event', name, params). Tag Manager: dataLayer.push({ event: name, ...params }).
    • 

  • Meta Pixel: fbq('track', …) für Standard-Events wie Lead oder Contact (setze sie mit data-track-meta="Lead"), ansonsten trackCustom.
    • 

  • Plausible, Umami, PostHog, Mixpanel und Fathom erhalten eigene Event-Aufrufe mit demselben Namen und denselben Properties; Clarity erhält ein Custom Event, nach dem du Aufnahmen filtern kannst.


Automatische Events verwenden die Namen aus GA4 — click mit outbound: true für Outbound-Links und file_download für Downloads — damit sie zu Enhanced Measurement passen, falls du beides nutzt (schalte eines davon aus, um doppelte Zählungen zu vermeiden). Tools, die auf der Seite nicht geladen sind, werden stillschweigend übersprungen. Einzelne Events kannst du von Hand mit dem GA4 Event Code Generator erstellen.
Auch gesucht als: event tracking script, click tracking script, data attribute tracking, webflow event tracking, button klicks tracken google analytics, ga4 klick tracking, outbound link tracking, formular absendungen tracken ga4.
Passende Tools zu: Event-Tracking-Script-Generator
  • Google Tag Code Generator — Trage deine GA4-Mess-ID, Google-Ads-ID oder Tag-Manager-Container-ID ein und erhalte sofort einsatzbereiten Installationscode – mit Consent-Mode-v2-Standardwerten, Cross-Domain-Verknüpfung, Debug-Modus, manuellen Seitenaufrufen und Cookie-Einstellungen, die nur aktiviert werden, wenn du sie brauchst.
  • Cookie-Banner Generator — Füge jeder Website – Webflow, WordPress, Shopify oder reinem HTML – ein Cookie-Banner hinzu, ganz ohne kostenpflichtiges Plugin.
  • dataLayer Push Generator — Erstelle dataLayer.push()-Code für den Google Tag Manager: Wähle ein empfohlenes GA4-Event oder ein eigenes, füge Parameter und Ecommerce-Items hinzu und packe den Code optional in einen Klick- oder Formular-Absende-Listener – fertig zum Einfügen.
  • Tracking & Pixel-Checker — Gib eine URL ein, um alle Analytics-Tags, Werbe-Pixel und Tag-Manager auf der Seite zu finden – einschließlich ihrer IDs, der im Google Tag Manager geladenen Elemente, des Cookie-Einwilligungstools sowie der Verifizierungs-Tags für die Search Console und Bing.
Häufige Fragen
Wie tracke ich Button-Klicks in Webflow?
Füge das Script unter Site settings → Custom code → Footer code ein. Wähle dann den Button aus, öffne das Settings-Panel und füge ein Custom Attribute mit dem Namen data-track hinzu, dessen Wert der Event-Name ist. Veröffentliche die Seite, dann wird der Klick an dein Analytics-Tool gesendet.
Funktioniert es auch mit Links, die eine neue Seite öffnen?
Bei GA4 ja: Googles Tag sendet über den Beacon-Transport des Browsers, der auch dann abgeschlossen wird, wenn sich die Seite ändert. Andere Tools senden so, wie ihr eigenes Script es tut, und die meisten schaffen es rechtzeitig. Links, die in einem neuen Tab öffnen, sind immer sicher.
Werden Formularfeld-Werte mitgesendet?
Nein. Das Script liest nur die data-track-Attribute, die du am Formular selbst setzt, niemals das, was Besucher eingeben.
Brauche ich trotzdem den eigenen Code des Analytics-Tools?
Ja — das Script ruft Tools auf, die bereits installiert sind. Installiere Google Analytics mit dem Google Tag Snippet Generator.
Kann ich Event-Tracking-Script-Generator als Web-App installieren und offline nutzen?
Ja. Event-Tracking-Script-Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.

      
    

    
    
Ähnliche Tools
localGA4 Event-Code-GeneratorWähle ein empfohlenes GA4-Event — generate_lead, sign_up, purchase, add_to_cart und weitere — oder vergib…localGoogle Tag Code GeneratorTrage deine GA4-Mess-ID, Google-Ads-ID oder Tag-Manager-Container-ID ein und erhalte sofort…localCookie-Banner GeneratorFüge jeder Website – Webflow, WordPress, Shopify oder reinem HTML – ein Cookie-Banner hinzu, ganz ohne…localdataLayer Push GeneratorErstelle dataLayer.push()-Code für den Google Tag Manager: Wähle ein empfohlenes GA4-Event oder ein…apiTracking & Pixel-CheckerGib eine URL ein, um alle Analytics-Tags, Werbe-Pixel und Tag-Manager auf der Seite zu finden –…localUTM-BuilderFüge utm_source, utm_medium, utm_campaign und Co. an jeden Link an, sieh, in welchem GA4-Kanal der Besuch…