devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Website-Check

Diese Seite ist noch nicht auf Deutsch verfügbar, daher zeigen wir die englische Version.

Event Tracking Script Generator — Track Clicks with Data Attributes

Track button clicks, links and form submits by adding attributes instead of code: data-track="sign_up_click" plus optional data-track-* parameters. One small script sends each event to the tools you use — GA4, Google Tag Manager, Meta Pixel, Plausible, PostHog, Mixpanel, Umami, Fathom or Microsoft Clarity — and can track outbound links, file downloads, email and phone clicks automatically. Built for Webflow custom attributes, and works on any site.

Aktualisiert am

Before </body> — or Webflow Footer code


    
Add attributes to elements
In Webflow: select the button → Settings panel → Custom attributes → name data-track, value sign_up_click. Add more attributes for parameters.

    
Try it

      
      
Click the buttons — events appear here instead of being sent.

  

  


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

    
    
    

      
So nutzt du: Event Tracking Script Generator
  1. Tick the analytics tools your site already loads, and the automatic events you want.
  2. Copy the script into your footer code (Webflow: Site settings → Custom code → Footer code).
  3. Add data-track="event_name" to any button, link or form, plus data-track-* attributes for parameters.
  4. Use Try it to see the events, then publish and check them in your analytics tool’s live view.


How it works


The script listens once on the whole page, so it also catches elements added later — CMS lists, tabs, popups. When someone clicks an element with data-track (or anything inside one), it reads the event name and every data-track-* attribute as a parameter: data-track-location="hero" becomes location: "hero". On a <form> it fires when the form is submitted rather than on every click. Field values are never read, so no personal data is sent.


What each tool receives


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

  • Meta Pixel: fbq('track', …) for standard events such as Lead or Contact (set them with data-track-meta="Lead"), otherwise trackCustom.
    • 

  • Plausible, Umami, PostHog, Mixpanel and Fathom get their own event calls with the same name and properties; Clarity gets a custom event to filter recordings by.


Automatic events use GA4’s names — click with outbound: true for outbound links and file_download for downloads — so they line up with Enhanced Measurement if you use both (turn one of them off to avoid counting twice). Tools that are not on the page are skipped silently. Build single events by hand with the GA4 Event Code Generator.
Auch gesucht als: event tracking script, click tracking script, data attribute tracking, webflow event tracking, track button clicks google analytics, ga4 click tracking, outbound link tracking, track form submissions ga4.
Passende Tools zu: Event Tracking Script Generator
  • Google Tag Snippet Generator — Enter your GA4 measurement ID, Google Ads ID or Tag Manager container ID and get install code that is ready to paste — with Consent Mode v2 defaults, cross-domain linking, debug mode, manual page views and cookie settings switched on only when you need them.
  • Cookie Consent Banner Generator — Add a cookie consent banner to any site — Webflow, WordPress, Shopify or plain HTML — without a paid plugin.
  • dataLayer Push Generator — Build dataLayer.push() code for Google Tag Manager: choose a GA4 recommended event or your own, add parameters and ecommerce items, and optionally wrap it in a click or form submit listener — ready to paste.
  • 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
How do I track button clicks in Webflow?
Paste the script into Site settings → Custom code → Footer code. Then select the button, open the Settings panel and add a custom attribute named data-track with an event name as its value. Publish, and the click is sent to your analytics tool.
Does it work with links that open a new page?
For GA4, yes: Google’s tag sends with the browser’s beacon transport, which finishes even when the page changes. Other tools send the way their own script does, and most finish in time; links that open in a new tab are always safe.
Will it send form field values?
No. It only reads the data-track attributes you set on the form itself, never what visitors type.
Do I still need the analytics tool’s own code?
Yes — the script calls tools that are already installed. Install Google Analytics with the 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 GeneratorPick a recommended GA4 event — generate_lead, sign_up, purchase, add_to_cart and more — or name your own,…localGoogle Tag Snippet GeneratorEnter your GA4 measurement ID, Google Ads ID or Tag Manager container ID and get install code that is…localCookie Consent Banner GeneratorAdd a cookie consent banner to any site — Webflow, WordPress, Shopify or plain HTML — without a paid…localdataLayer Push GeneratorBuild dataLayer.push() code for Google Tag Manager: choose a GA4 recommended event or your own, add…apiTracking & Pixel-CheckerGib eine URL ein, um alle Analytics-Tags, Werbe-Pixel und Tag-Manager auf der Seite zu finden –…localUTM BuilderAdd utm_source, utm_medium, utm_campaign and friends to any link, see which GA4 channel the visit will…