7 min de leitura

Integração com Webflow

Adicione o Zenovay a qualquer site Webflow em menos de três minutos. O suporte de primeira classe do Webflow ao Custom Code torna esta uma das integrações mais simples de qualquer CMS — cole, publique, pronto.

O Custom Code do Webflow requer um Site Plan pago (Basic, CMS, Business ou Ecommerce) no próprio site. Apenas planos de Workspace não são suficientes.

Início rápido

Etapa	Onde	O que fazer
1	Painel do Zenovay	Copie seu snippet de rastreamento
2	Webflow Designer → Site settings → Custom code	Cole-o em Head code
3	Publique no seu `*.webflow.io` ou domínio personalizado	Clique em Publish
4	Painel do Zenovay	Visitantes em tempo real aparecem em ~30 segundos

Método 1: Custom Code para todo o site (Recomendado)

O Webflow permite injetar HTML no <head> de todas as páginas do seu site através das Site Settings. Essa é a abordagem recomendada para qualquer análise ou pixel de marketing.

Passo a passo

Abra seu projeto no Webflow Designer.
Clique no ícone de engrenagem na barra lateral esquerda para abrir as Site Settings.
Vá para a aba Custom Code.
Na caixa Head code, cole:

<script defer data-tracking-code="YOUR_TRACKING_CODE" src="https://api.zenovay.com/z.js"></script>

Role para baixo e clique em Save Changes.
Volte ao Designer e clique em Publish (canto superior direito) → selecione seus domínios → Publish to Selected Domains.

Verifique

Abra seu site publicado em modo anônimo e visualize o código-fonte — você deve ver o <script defer data-tracking-code=...> próximo ao topo do <head>. Sua visita deve aparecer na visualização em tempo real do Zenovay em 30 segundos.

Método 2: Custom Code por página

Se você quiser rastrear apenas um subconjunto de páginas (por ex., landing pages, não o subdiretório de docs), o Webflow suporta código Head por página:

No Designer, selecione a página no painel Pages à esquerda.
Clique no ícone de engrenagem ao lado do nome da página → Page Settings.
Role até Custom Code → Inside <head> tag.
Cole o mesmo snippet ali.
Salve e Publique.

O Custom Code no nível de página é acrescentado depois do código para todo o site, então se você colar em ambos os lugares, cada visita será contada duas vezes. Escolha um escopo.

Rastreamento de eventos personalizados

Após o carregamento do script (ele é diferido, então aguarde o DOMContentLoaded), você pode chamar window.zenovay() de qualquer script inline ou código personalizado de interações do Webflow:

Rastreie um clique em CTA

Adicione um elemento HTML Embed ao lado do seu botão de CTA:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const cta = document.querySelector('[data-zv-cta]');
    if (!cta) return;
    cta.addEventListener('click', () => {
      if (window.zenovay) {
        window.zenovay('track', 'cta_clicked', {
          location: cta.dataset.zvCta,
          page: window.location.pathname,
        });
      }
    });
  });
</script>

Depois adicione data-zv-cta="hero-primary" ao seu botão no Designer (via a seção Custom attributes nas configurações do elemento).

Rastreie envios de formulário

Os formulários nativos do Webflow emitem um evento submit que você pode escutar:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('form[data-name]').forEach(form => {
      form.addEventListener('submit', () => {
        if (window.zenovay) {
          window.zenovay('track', 'form_submitted', {
            form_name: form.getAttribute('data-name'),
            page: window.location.pathname,
          });
        }
      });
    });
  });
</script>

Identifique usuários logados (Memberstack, Outseta, Memberspace)

Se você usa um complemento de associação para Webflow, identifique o visitante assim que a sessão for conhecida. Com o Memberstack:

<script>
  window.$memberstackDom?.getCurrentMember().then(({ data: member }) => {
    if (member && window.zenovay) {
      window.zenovay('identify', {
        userId: member.id,
        email: member.auth?.email,
        plan: member.planConnections?.[0]?.planName,
      });
    }
  });
</script>

Rastreamento do Webflow Ecommerce

Se você vende pelo Webflow Ecommerce, dispare um evento purchase na página de confirmação de pedido (/order-confirmation/[order-id]):

Adicione um elemento HTML Embed ao template da sua página Order Confirmation.
Cole:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const total = document.querySelector('[data-wf-order-total]')?.textContent;
    const orderId = window.location.pathname.split('/').pop();
    if (window.zenovay && total) {
      window.zenovay('track', 'purchase', {
        transaction_id: orderId,
        revenue: parseFloat(total.replace(/[^0-9.]/g, '')),
        currency: 'USD', // ajuste se sua loja usa outra moeda
      });
    }
  });
</script>

Para atribuição de receita com alta precisão (reembolsos, impostos, assinaturas), use webhooks server-side do Zenovay a partir da sua conta Stripe ou Webflow Ecommerce — o rastreamento client-side pode perder pedidos se o comprador fechar a aba.

Requisitos do plano

Webflow Starter (gratuito): Custom Code está desabilitado. Faça upgrade para um Site Plan pago.
Webflow Basic / CMS / Business / Ecommerce: Custom Code está totalmente habilitado.
Apenas plano Workspace: não é suficiente por si só — você precisa de um Site Plan no site em questão.

Problemas comuns

Site Settings vs Page Settings. O código Head para todo o site se aplica a todas as páginas, incluindo 404, busca e páginas com senha. O código Head por página só se aplica àquela página. Se você quer um rastreador para o site inteiro, use Site Settings — não misture escopos.

O Webflow remove tags <script> nas visualizações prévia .webflow.io se seu plano não incluir Custom Code. Certifique-se de estar num Site Plan pago antes de testar.

O snippet é executado depois das interações do Webflow. O Zenovay é diferido, então carrega após a renderização inicial. Isso é intencional — significa que não bloqueamos a pintura. Se você quiser disparar um evento antes de o Zenovay carregar, faça uma fila: window.zenovay = window.zenovay || function(){ (window.zenovay.q = window.zenovay.q || []).push(arguments); };

Tags <script> dentro de elementos HTML Embed são executadas. O Webflow permite isso, mas esteja ciente de que você pode acidentalmente fazer uma instalação dupla se colar o snippet em um Embed em vez de Site Settings → Custom Code. Use Site Settings para o rastreador; use Embeds apenas para rastreamento de eventos por página.

O HTML publicado do Webflow é fortemente cacheado na borda. Aguarde 1–2 minutos após Publish antes de testar. Force a atualização com Cmd/Ctrl+Shift+R.

Solução de problemas

Sintoma	Causa provável	Correção
Sem dados	Custom Code desabilitado no plano	Faça upgrade para um Site Plan pago
Sem dados	Site não publicado após adicionar o snippet	Clique em Publish no Designer
Metade das páginas rastreadas	Código Head por página substituindo o código global	Mova o snippet para Site Settings apenas
Visualizações de página duplicadas	Snippet colado em Site Settings e HTML Embed	Remova um
Eventos não disparando	Script de evento personalizado executou antes do Zenovay carregar	Envolva em `DOMContentLoaded`

Privacidade e conformidade

Adicione data-cookieless="true" ao snippet para executar em modo totalmente sem cookies (sem cookies, sem armazenamento local) — exigido para muitas implantações na UE/Reino Unido antes de qualquer consentimento ser registrado:

<script defer
        data-tracking-code="YOUR_TRACKING_CODE"
        data-cookieless="true"
        src="https://api.zenovay.com/z.js"></script>

Consulte Conformidade de Privacidade para o panorama completo.

Recursos relacionados

Precisa de ajuda? Entre em contato pelo [email protected] ou visite nossa Central de Ajuda.