devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoria do site

Gerador de Script de Rastreamento de Eventos — Rastreie Cliques com Data Attributes

Rastreie cliques em botões, links e envios de formulário adicionando atributos em vez de código: data-track="sign_up_click" mais parâmetros opcionais data-track-*. Um pequeno script envia cada evento para as ferramentas que você usa — GA4, Google Tag Manager, Meta Pixel, Plausible, PostHog, Mixpanel, Umami, Fathom ou Microsoft Clarity — e pode rastrear automaticamente links externos, downloads de arquivos e cliques em e-mail e telefone. Feito para atributos personalizados do Webflow, mas funciona em qualquer site.

Atualizado em

Antes de </body> — ou Código do rodapé no Webflow


    
Adicione atributos aos elementos
No Webflow: selecione o botão → painel Settings → Custom attributes → nome data-track, valor sign_up_click. Adicione mais atributos para os parâmetros.

    
Testar

      
      
Clique nos botões — os eventos aparecem aqui em vez de serem enviados.

  

  


    
 Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

    
    
    

      
Como usar: Gerador de Script de Rastreamento de Eventos
  1. Marque as ferramentas de analytics que seu site já carrega e os eventos automáticos que você quer.
  2. Copie o script para o código do rodapé (Webflow: Configurações do site → Código personalizado → Código do rodapé).
  3. Adicione data-track="event_name" a qualquer botão, link ou formulário, além de atributos data-track-* para os parâmetros.
  4. Use Testar para ver os eventos, depois publique e confira no modo em tempo real da sua ferramenta de analytics.


Como funciona


O script escuta a página inteira uma única vez, então também captura elementos adicionados depois — listas de CMS, abas, popups. Quando alguém clica em um elemento com data-track (ou em algo dentro dele), ele lê o nome do evento e cada atributo data-track-* como parâmetro: data-track-location="hero" vira location: "hero". Em um <form>, ele dispara no envio do formulário, e não a cada clique. Os valores dos campos nunca são lidos, então nenhum dado pessoal é enviado.


O que cada ferramenta recebe


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

  • Meta Pixel: fbq('track', …) para eventos padrão como Lead ou Contact (defina com data-track-meta="Lead"), caso contrário trackCustom.
    • 

  • Plausible, Umami, PostHog, Mixpanel e Fathom recebem chamadas de evento próprias, com o mesmo nome e propriedades; o Clarity recebe um evento personalizado para filtrar gravações.


Os eventos automáticos usam os nomes do GA4 — click com outbound: true para links externos e file_download para downloads — assim ficam alinhados com a Medição Aprimorada, se você usar as duas (desative uma delas para evitar contagem dupla). Ferramentas que não estão na página são ignoradas silenciosamente. Para criar eventos individuais manualmente, use o Gerador de Código de Evento GA4.
Também pesquisado como: script de rastreamento de eventos, script de rastreamento de cliques, data attribute rastreamento de eventos, rastreamento de eventos webflow, rastrear cliques em botão google analytics, rastreamento de cliques ga4, rastreamento de links externos, rastrear envio de formulário ga4.
Ferramentas que combinam com: Gerador de Script de Rastreamento de Eventos
  • Gerador de Google Tag — Informe seu ID de medição do GA4, seu ID do Google Ads ou o ID do contêiner do Tag Manager e receba um código de instalação pronto para colar, com padrões do Consent Mode v2, vinculação entre domínios, modo debug, visualizações de página manuais e configurações de cookies ativadas somente quando você precisar.
  • Gerador de Banner de Cookies — Adicione um banner de consentimento de cookies a qualquer site — Webflow, WordPress, Shopify ou HTML puro — sem plugin pago.
  • Gerador de dataLayer.push — Monte o código dataLayer.push() para o Google Tag Manager: escolha um evento recomendado do GA4 ou crie o seu, adicione parâmetros e itens de ecommerce e, se quiser, envolva tudo em um listener de clique ou envio de formulário — pronto para colar.
  • Verificador de Tags e Pixels — Digite uma URL para encontrar todas as tags de analytics, pixels de anúncio e gerenciadores de tags da página, com seus IDs, o que está carregado dentro do Google Tag Manager, a ferramenta de consentimento de cookies e as tags de verificação do Search Console e do Bing.
Perguntas frequentes
Como rastrear cliques em botões no Webflow?
Cole o script em Configurações do site → Código personalizado → Código do rodapé. Depois, selecione o botão, abra o painel Settings e adicione um atributo personalizado chamado data-track, com o nome do evento como valor. Publique, e o clique será enviado para sua ferramenta de analytics.
Funciona com links que abrem uma nova página?
No GA4, sim: a tag do Google envia os dados com o transporte beacon do navegador, que termina mesmo quando a página muda. As outras ferramentas enviam do jeito que o próprio script delas faz, e a maioria termina a tempo. Links que abrem em uma nova aba são sempre seguros.
Ele envia os valores dos campos do formulário?
Não. Ele só lê os atributos data-track que você definir no próprio formulário, nunca o que os visitantes digitam.
Ainda preciso do código da ferramenta de analytics?
Sim — o script chama ferramentas que já estão instaladas. Instale o Google Analytics com o Gerador de Snippet do Google Tag.
Posso instalar o Gerador de Script de Rastreamento de Eventos como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Script de Rastreamento de Eventos é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

      
    

    
    
Ferramentas relacionadas
localGerador de Código de Evento GA4Escolha um evento recomendado do GA4 — generate_lead, sign_up, purchase, add_to_cart e outros — ou crie o…localGerador de Google TagInforme seu ID de medição do GA4, seu ID do Google Ads ou o ID do contêiner do Tag Manager e receba um…localGerador de Banner de CookiesAdicione um banner de consentimento de cookies a qualquer site — Webflow, WordPress, Shopify ou HTML puro…localGerador de dataLayer.pushMonte o código dataLayer.push() para o Google Tag Manager: escolha um evento recomendado do GA4 ou crie o…apiVerificador de Tags e PixelsDigite uma URL para encontrar todas as tags de analytics, pixels de anúncio e gerenciadores de tags da…localGerador de UTMAdicione utm_source, utm_medium, utm_campaign e outros parâmetros a qualquer link, veja em qual canal do…