6 min de leitura

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 — a visualização prévia ignora o Custom Code, o que é normal.

O Custom Code está disponível em todos os planos pagos do Framer (Mini e superiores). Sites gratuitos do Framer não podem adicionar scripts de terceiros.

Início rápido

Etapa	Onde	O que fazer
1	Painel do Zenovay	Copie seu snippet de rastreamento
2	Framer → Site Settings → General → Custom Code	Cole-o em Start of `<head>` tag
3	Publique	Clique em Publish no canto superior direito
4	Painel do Zenovay	Visitantes em tempo real aparecem em ~30 segundos

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

O painel Custom Code do Framer injeta HTML diretamente em todas as páginas publicadas. É a abordagem recomendada para qualquer tag de análise ou marketing.

Passo a passo

Abra seu projeto no Framer.
Clique em Site Settings (ícone de engrenagem no topo do painel esquerdo).
Abra a aba General se ainda não estiver aberta.
Role até Custom Code.
Em Start of <head> tag, cole:

<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 do editor. O Custom Code não se aplica à URL de visualização prévia — apenas ao site publicado ao vivo.

Verifique

Abra a URL publicada do Framer (*.framer.app ou seu domínio personalizado) em modo anônimo e visualize o código-fonte. Você deve ver <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

Para rastreamento específico de página (por ex., apenas suas landing pages de campanha), o Framer também expõe Custom Code por página:

Selecione a página no painel Pages.
Abra o painel do lado direito da página e role até Custom Code.
Cole o snippet em Start of <head> tag para aquela página.
Publique.

O Custom Code por página é acrescentado depois do código global. Não cole o rastreador em ambos — você vai contar duas vezes.

Rastreamento de eventos personalizados

O Framer renderiza páginas como uma React SPA, mas o rastreador lida com a navegação SPA automaticamente (ele escuta history.pushState). Para eventos personalizados, você pode chamar window.zenovay() de qualquer Code Override ou Code Component do Framer.

Rastreie um clique em CTA com um Code Override

Crie um novo Code Override no Framer:

import type { ComponentType } from 'react';

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

Aplique o override ao seu frame de CTA via Frame → Code Overrides → withCtaTracking.

Rastreie envios de formulário

Os formulários do Framer enviam através de um iframe oculto. Escute o evento submit do formulário em um Code Override ou em um override global vinculado à raiz da página:

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',
        page: window.location.pathname,
      });
    };
    document.addEventListener('submit', handler, true);
    return () => document.removeEventListener('submit', handler, true);
  }, []);
  return null;
}

Identifique usuários logados (se você usa Framer Auth ou terceiros)

Se você conectou o Framer a um provedor de auth externo (Memberstack, Outseta, Clerk, etc.), chame window.zenovay('identify', ...) no callback onSignIn do provedor de auth. Não há auth nativo no Framer para vincular diretamente.

Requisitos do plano

Plano	Custom Code	Domínio personalizado
Free	❌	❌
Mini	✅	✅
Basic	✅	✅
Pro	✅	✅
Business	✅	✅

Problemas comuns

A visualização prévia ignora o Custom Code. Esta é a surpresa número 1. A visualização prévia do editor do Framer (o botão play) renderiza a página sem seu Custom Code. Você deve clicar em Publish e testar a URL ao vivo — testar a visualização prévia sempre mostrará "nenhum script do Zenovay carregado".

Localhost / domínios personalizados. Se você está usando um domínio personalizado pelo hospedagem do Framer, o Custom Code funciona da mesma forma que em *.framer.app. Se você estiver exportando o Framer para hospedar como HTML estático, você precisará colar o snippet no seu index.html exportado manualmente — a exportação estática do Framer atualmente não inclui o Custom Code no bundle.

A navegação SPA é tratada automaticamente. O Framer usa React por baixo dos panos. O rastreador do Zenovay (≥v2) escuta history.pushState e dispara uma visualização de página em cada mudança de rota, então você não precisa chamar window.zenovay('trackPageView') manualmente.

Seções carregadas sob demanda. O padrão "aparecer quando rolado para a visualização" do Framer não afeta o rastreador — o script vive no <head> e é executado na primeira renderização independentemente da visibilidade das seções.

Ruído do modo de teste. A visualização de CMS do Framer carrega páginas com uma query string ?framer-publish=true. Se você quiser excluir o tráfego do editor, filtre essa query string no nível do painel do Zenovay via segmentos salvos.

Solução de problemas

Sintoma	Causa provável	Correção
Visualização prévia sem dados	Custom Code só funciona no site publicado	Clique em Publish e teste a URL ao vivo
Sem dados no plano Free	Custom Code desabilitado no Free	Faça upgrade para Mini ou superior
Algumas páginas rastreadas, outras não	Custom Code por página substituindo	Mude para Custom Code global
Visualizações de página duplicadas	Snippet no slot global e por página	Escolha um escopo
Eventos disparam mas visualizações de página não	Versão do rastreador anterior à v2 (sem suporte a SPA)	Copie novamente o snippet do painel

Privacidade e conformidade

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>

Consulte Conformidade de Privacidade para todos os detalhes.

Recursos relacionados

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