Integração com Framer

Adicione o Zenovay a qualquer site Framer através de Site Settings → Custom Code. O snippet só dispara no site publicado — esse é o comportamento esperado.

O Custom Code só tem efeito no site Framer publicado. A visualização prévia sempre ignora o Custom Code. Sempre teste a URL ao vivo, não a visualização prévia do editor.

Início rápido

Copie seu snippet de rastreamento do painel do Zenovay.
No Framer, abra Site Settings → General → Custom Code.
Cole-o em Start of <head> tag.
Clique em Publish no canto superior direito.

Instalação

Custom Code para todo o site (recomendado)

Abra seu projeto no Framer.
Clique em Site Settings (ícone de engrenagem no topo do painel esquerdo).
Abra a aba General.
Role até Custom Code.
Cole este snippet em Start of <head> tag:

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

Clique fora do campo para salvar automaticamente.
Clique em Publish no canto superior direito.

Custom Code por página

Para rastrear apenas em páginas específicas:

Selecione a página no painel Pages.
Abra as configurações do lado direito da página.
Role até Custom Code → Start of <head> tag.
Cole o snippet.
Publique.

Não combine snippets globais e por página — você vai contar duas vezes.

Verifique sua instalação

Abra a URL do Framer publicada (*.framer.app ou seu domínio personalizado) em modo anônimo.
Visualize o código-fonte e procure por <script defer data-tracking-code=...> no <head>.
Verifique a visualização em tempo real do Zenovay — sua visita aparece em ~30 segundos.

A navegação SPA é tratada automaticamente

O Framer renderiza páginas como uma React SPA. O rastreador do Zenovay (v2+) escuta history.pushState, history.replaceState e popstate e dispara uma visualização de página em cada mudança de rota automaticamente. Você não precisa chamar window.zenovay('page') manualmente.

Rastreamento de eventos personalizados via Code Overrides

Crie um Code Override que envolva qualquer componente do Framer:

import type { ComponentType } from 'react';

export function withCtaTracking(Component): ComponentType {
  return (props) => (
    <Component
      {...props}
      onClick={(e) => {
        props.onClick?.(e);
        // @ts-ignore — global injetado pelo rastreador
        window.zenovay?.('track', 'cta_clicked', {
          location: props.id || 'unknown',
          page: window.location.pathname,
        });
      }}
    />
  );
}

Aplique via Frame → Code Overrides → withCtaTracking.

Rastreamento de envios de formulário

Vincule um listener delegado no document para capturar todo envio de formulário nativo:

import { useEffect } from 'react';

export function useTrackFormSubmits() {
  useEffect(() => {
    const handler = (e: Event) => {
      const form = e.target as HTMLFormElement;
      if (!form?.matches('form')) return;
      // @ts-ignore
      window.zenovay?.('track', 'form_submitted', {
        form_id: form.id || form.getAttribute('name') || 'unnamed',
      });
    };
    document.addEventListener('submit', handler, true);
    return () => document.removeEventListener('submit', handler, true);
  }, []);
  return null;
}

Solução de problemas

Visualização prévia sem dados. O Custom Code só funciona no site publicado. Sempre teste a URL ao vivo.

Sem dados no plano Free. O Custom Code requer um plano Framer pago (Mini e superiores).

Tráfego do editor poluindo as análises. A visualização de CMS do Framer carrega com ?framer-publish=true. Filtre essa query string usando segmentos salvos no seu painel.

Eventos disparam mas visualizações de página não na mudança de rota. Você está em uma versão mais antiga do rastreador. Copie novamente o snippet do seu painel do Zenovay para obter o rastreador v2, que trata a navegação SPA automaticamente.

Requisitos do plano

Plano	Custom Code
Free	❌
Mini	✅
Basic / Pro / Business	✅

Privacidade

Para rastreamento sem cookies, adicione data-cookieless="true":

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

Próximos passos

Leia o guia completo de integração com Framer em docs.zenovay.com para padrões avançados de Code Override.
Configure metas de conversão.
Precisa de ajuda? Entre em contato pelo [email protected].