Guia de integração

Analytics no Webflow

O snippet vai no código personalizado do site, que o Webflow insere em todas as páginas publicadas. Formulários e botões viram eventos com um trecho no rodapé.

Antes de começar

Um plano pago do Webflow que permita código personalizado no site.
A site_key e o domínio publicado em Allowed origins — inclua o *.webflow.io se quiser medir o ambiente de staging.

Instalação

1Cole o snippet em Head code

Nas configurações do site, abra Site settings → Custom code e cole o snippet no campo Head code. Salve.

Site settings → Custom code → Head code

<script src="https://cdn.jsdelivr.net/npm/@racoelho/analytics@0.2/dist/index.global.js"></script>
<script>window.analytics = new Analytics.Analytics({ siteKey: 'YOUR_SITE_KEY' })</script>

2Publique o site
Código personalizado só roda no site publicado, não dentro do Designer. Clique em Publish para o domínio que você cadastrou.

Eventos e metas

Cole este trecho em Footer code (mesma tela). Ele envia um form_submit para cada formulário e um evento para cada elemento com o atributo data-track — no Designer, adicione o atributo em Element settings → Custom attributes.

Site settings → Custom code → Footer code

<script>
  // todo formulário do Webflow: o nome vem do atributo data-name
  document.querySelectorAll('form').forEach(function (form) {
    form.addEventListener('submit', function () {
      window.analytics && window.analytics.formSubmit(form.id, form.getAttribute('data-name'))
    })
  })

  // botões marcados com o atributo data-track="nome-do-evento"
  document.querySelectorAll('[data-track]').forEach(function (el) {
    el.addEventListener('click', function () {
      window.analytics && window.analytics.track(el.getAttribute('data-track'))
    })
  })
</script>

No painel, crie metas do tipo evento com os mesmos nomes (form_submit, cta_click…). Se o formulário redireciona para uma página de obrigado, uma meta do tipo caminho também resolve.

Navegação entre páginas

Sites do Webflow recarregam a página a cada link, e cada carga conta a própria pageview. Não há nada a configurar.

Confira se está funcionando

Abra o site publicado numa janela comum, sem bloqueador de anúncios.
Nas ferramentas do navegador, aba Network, filtre por v1/i: deve aparecer um POST com status 200 em até 3 segundos (ou quando você sai da página).
No painel, os eventos aparecem em cerca de 30 segundos.
Depois de publicar, abra o site no domínio publicado (não no Designer) e confira o POST.

Problemas comuns

O campo de código personalizado está bloqueado: Código personalizado exige plano pago no Webflow. Sem ele, o snippet não é publicado.
Funciona no domínio próprio mas não no .webflow.io: Cada domínio é uma origem diferente. Cadastre os dois em Allowed origins, ou só o de produção se não quiser misturar visitas de teste.
A requisição volta 403 (origin_not_allowed): O domínio não está em Allowed origins nas configurações do site. Cadastre a origem exata — com https://, com e sem www, e endereços de teste como http://localhost:3000 se quiser medir em desenvolvimento.
Nenhuma requisição aparece na aba Network: O SDK respeita o Do Not Track por padrão: se o seu navegador envia DNT, nada é enviado. Teste em outro navegador ou perfil. Bloqueadores de anúncio também podem barrar o script.
As pageviews aparecem em dobro: O SDK foi inicializado duas vezes (por exemplo, o script colado no tema e também por um plugin). Mantenha uma única instância por página.

Crie sua conta e pegue a site_key

Grátis até 10 mil eventos por mês, sem cartão.

Criar conta grátis