devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Auditoría web

Esta página aún no está traducida al español, así que la mostramos en inglés.

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.

Actualizado el

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.

  

  


    
 Tus datos nunca salen de tu ordenador. Todo se procesa localmente en tu navegador.

    
    
    

      
Cómo usar: 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.
También se busca como: 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.
Herramientas que combinan con: 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.
  • Verificador de seguimiento y píxeles — Introduce una URL para encontrar todas las etiquetas de análisis, píxeles publicitarios y gestores de etiquetas de la página, junto con sus ID, lo que se ha cargado en Google Tag Manager, la herramienta de consentimiento de cookies y las etiquetas de verificación de Search Console y Bing.
Preguntas frecuentes
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.
¿Puedo instalar Event Tracking Script Generator como aplicación web y utilizarla sin conexión?
Sí. Event Tracking Script Generator es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.

      
    

    
    
Herramientas relacionadas
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…apiVerificador de seguimiento y píxelesIntroduce una URL para encontrar todas las etiquetas de análisis, píxeles publicitarios y gestores de…localUTM BuilderAdd utm_source, utm_medium, utm_campaign and friends to any link, see which GA4 channel the visit will…