devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Site Audit

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.

Runs in your browserUpdated

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.

  

  


    
 Your data never leaves your computer. All processing happens 100% locally in your browser.

    
    
    

      
How to use the 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.
Also searched as: 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.
Tools that pair well with the Event Tracking Script Generator
  • 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.
  • UTM Builder — Add utm_source, utm_medium, utm_campaign and friends to any link, see which GA4 channel the visit will land in, and tag a whole list of URLs at once.
  • GTM Snippet Generator — Enter your GTM container ID and get the Google Tag Manager install code for the <head> and <body>, with Consent Mode v2 defaults placed before the container so every tag inside it waits for consent.
Frequently asked questions
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.
Can I install Event Tracking Script Generator as a web app and use it offline?
Yes. Event Tracking Script Generator is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.

      
    

    
Related 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 CheckerEnter a URL to find every analytics tag, ad pixel and tag manager on the page — with their IDs, what’s…localUTM BuilderAdd utm_source, utm_medium, utm_campaign and friends to any link, see which GA4 channel the visit will…