Plataforma de Lead Intelligence

Inicio Rapido

O Captafy e uma plataforma de lead intelligence que identifica visitantes anonimos do seu site e os transforma em leads qualificados. Nosso tag de rastreamento leve coleta dados comportamentais, identifica empresas e enriquece perfis de visitantes automaticamente.

Integre o Captafy ao seu site em 3 passos simples:

Crie sua conta

Acesse captafy.io e crie sua conta gratuitamente. O plano Free inclui ate 1.000 visitantes identificados por mes.

Copie sua chave publica

No painel, acesse Configuracoes → Integracao e copie sua PUBLIC_KEY. Essa chave e segura para uso no frontend.

Instale o tag no seu site

Adicione o snippet abaixo antes do </head> do seu HTML, ou use um dos nossos SDKs para frameworks populares.

index.htmlhtml

<script>
  (function(c,a,p,t,f,y){c.captafy=c.captafy||function(){
  (c.captafy.q=c.captafy.q||[]).push(arguments)};
  y=a.createElement(p);y.async=1;y.src=t;
  f=a.getElementsByTagName(p)[0];f.parentNode.insertBefore(y,f)
  })(window,document,'script','https://cdn.captafy.io/tag.js');
  captafy('init', 'YOUR_PUBLIC_KEY');
</script>

Dica

Substitua YOUR_PUBLIC_KEY pela chave publica encontrada no painel. O script e asssincrono e nao afeta a performance do seu site (menos de 5KB gzipped).

Instalacao

Existem diversas formas de instalar o Captafy no seu projeto. Escolha a opcao que melhor se adapta ao seu stack:

Script Tag (HTML)

Copie e cole no seu HTML

React / Next.js

npm install @captafy/react

npm install @captafy/vue

Angular

npm install @captafy/angular

Svelte / SvelteKit

npm install @captafy/svelte

WordPress

Plugin oficial no repositorio

Shopify

Snippet no theme.liquid

Google Tag Manager

Tag HTML personalizada

Nota

Todos os SDKs sao open-source e disponiveis no GitHub do Captafy. Contribuicoes sao bem-vindas!

HTML / JavaScript

A forma mais simples de integrar o Captafy. Basta adicionar o snippet abaixo em qualquer pagina HTML. O script carrega de forma assincrona e nao bloqueia a renderizacao.

index.htmlhtml

<!-- Adicione antes do </head> -->
<script>
  (function(c,a,p,t,f,y){c.captafy=c.captafy||function(){
  (c.captafy.q=c.captafy.q||[]).push(arguments)};
  y=a.createElement(p);y.async=1;y.src=t;
  f=a.getElementsByTagName(p)[0];f.parentNode.insertBefore(y,f)
  })(window,document,'script','https://cdn.captafy.io/tag.js');

  // Initialize with your public key
  captafy('init', 'YOUR_PUBLIC_KEY');
</script>

Apos a inicializacao, o Captafy comecar a rastrear automaticamente pageviews e comportamentos basicos. Para rastreamento avancado, veja as secoes de Eventos Personalizados e Identificacao de Leads.

Rastreamento manual de eventos

// Track a custom event
captafy('track', 'button_click', {
  button_id: 'cta-hero',
  page: window.location.pathname
});

// Identify a lead
captafy('identify', {
  email: 'joao@empresa.com',
  name: 'Joao Silva'
});

React

O SDK React oferece um Provider e hooks para integracao idiomatica com seu aplicativo React. Suporta React 18+.

Instalacao

npm install @captafy/react
# or
yarn add @captafy/react
# or
pnpm add @captafy/react

Configuracao do Provider

Envolva sua aplicacao com o CaptafyProvider na raiz do seu app:

app/layout.tsxtsx

import { CaptafyProvider } from '@captafy/react';

export default function Layout({ children }) {
  return (
    <CaptafyProvider publicKey="YOUR_PUBLIC_KEY">
      {children}
    </CaptafyProvider>
  );
}

Usando os Hooks

Utilize os hooks useTrack e useIdentify em qualquer componente dentro do Provider:

components/SignupForm.tsxtsx

import { useTrack, useIdentify } from '@captafy/react';

function SignupForm() {
  const track = useTrack();
  const identify = useIdentify();

  const handleSignup = (email: string) => {
    // Associate lead data with the current visitor
    identify({ email, name: 'Joao Silva' });

    // Track the signup event
    track('signup_completed', { plan: 'starter' });
  };

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      const email = new FormData(e.currentTarget).get('email') as string;
      handleSignup(email);
    }}>
      <input name="email" type="email" placeholder="seu@email.com" />
      <button type="submit">Criar conta</button>
    </form>
  );
}

Hooks disponiveis

Hook	Descricao
`useTrack()`	Retorna funcao para enviar eventos personalizados
`useIdentify()`	Retorna funcao para identificar leads
`useCaptafy()`	Retorna o objeto completo do SDK com todos os metodos
`useVisitorId()`	Retorna o ID anonimo do visitante atual

Next.js (App Router)

O SDK React funciona perfeitamente com Next.js. Como o Provider usa hooks do navegador, ele precisa ser marcado como Client Component.

Passo 1: Crie o arquivo de providers

app/providers.tsxtsx

'use client';

import { CaptafyProvider } from '@captafy/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <CaptafyProvider publicKey="YOUR_PUBLIC_KEY">
      {children}
    </CaptafyProvider>
  );
}

Passo 2: Use no layout raiz

app/layout.tsxtsx

import { Providers } from './providers';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="pt-BR">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Rastreamento automatico de pageviews

O SDK detecta automaticamente mudancas de rota no App Router e registra pageviews. Nenhuma configuracao adicional e necessaria.

Identificacao na autenticacao

app/auth/callback/page.tsxtsx

'use client';

import { useEffect } from 'react';
import { useIdentify } from '@captafy/react';

export default function AuthCallback() {
  const identify = useIdentify();

  useEffect(() => {
    // After successful auth, identify the user
    const user = getAuthenticatedUser(); // your auth logic
    if (user) {
      identify({
        email: user.email,
        name: user.name,
        plan: user.subscription?.plan,
      });
    }
  }, [identify]);

  return <div>Autenticando...</div>;
}

Dica

No Next.js, o Captafy respeita automaticamente o prefetch de rotas e nao conta navegacoes de prefetch como pageviews.

Vue 3

O plugin Vue 3 oferece integracao nativa com o sistema de plugins do Vue e composables para uso em components.

Instalacao

npm install @captafy/vue

Configuracao do Plugin

main.tstypescript

import { createApp } from 'vue';
import { CaptafyPlugin } from '@captafy/vue';
import App from './App.vue';

const app = createApp(App);

app.use(CaptafyPlugin, {
  publicKey: 'YOUR_PUBLIC_KEY',
  autoTrack: true, // default: true
  debug: false,
});

app.mount('#app');

Usando o Composable

components/ContactForm.vuevue

<script setup lang="ts">
import { useCaptafy } from '@captafy/vue';

const { track, identify } = useCaptafy();

function handleSubmit(formData: { email: string; name: string }) {
  identify({ email: formData.email, name: formData.name });
  track('contact_form_submitted', { source: 'homepage' });
}
</script>

<template>
  <form @submit.prevent="handleSubmit({ email, name })">
    <input v-model="email" type="email" />
    <input v-model="name" type="text" />
    <button type="submit">Enviar</button>
  </form>
</template>

Nota

O plugin do Vue rastreia automaticamente mudancas de rota quando usado com Vue Router. Para desativar, passe autoTrack: false nas opcoes do plugin.

Angular

O modulo Angular fornece um service injetavel e configuracao via forRoot().

Instalacao

npm install @captafy/angular

Configuracao do Modulo

app.module.tstypescript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CaptafyModule } from '@captafy/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CaptafyModule.forRoot({
      publicKey: 'YOUR_PUBLIC_KEY',
      autoTrack: true,
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Usando o Service

pricing.component.tstypescript

import { Component } from '@angular/core';
import { CaptafyService } from '@captafy/angular';

@Component({
  selector: 'app-pricing',
  template: `
    <button (click)="trackPlanClick('pro')">
      Escolher Plano Pro
    </button>
  `,
})
export class PricingComponent {
  constructor(private captafy: CaptafyService) {}

  trackPlanClick(plan: string) {
    this.captafy.track('plan_selected', {
      plan,
      page: '/pricing',
      timestamp: new Date().toISOString(),
    });
  }
}

Nota

Para Angular 17+ com standalone components, use provideCaptafy() no app.config.ts ao inves de CaptafyModule.forRoot().

Svelte / SvelteKit

O SDK Svelte oferece componentes e stores reativos para integracao com Svelte 4+ e SvelteKit.

Instalacao

npm install @captafy/svelte

Configuracao no Layout

+layout.sveltesvelte

<script>
  import { Captafy } from '@captafy/svelte';
</script>

<Captafy publicKey="YOUR_PUBLIC_KEY" />
<slot />

Rastreamento em componentes

components/CtaButton.sveltesvelte

<script>
  import { getCaptafy } from '@captafy/svelte';

  const { track } = getCaptafy();

  function handleClick() {
    track('cta_clicked', { variant: 'hero', position: 'top' });
  }
</script>

<button on:click={handleClick}>
  <slot />
</button>

WordPress

O plugin oficial do Captafy para WordPress permite instalacao sem codigo. Disponivel no repositorio de plugins do WordPress.

Instalacao via Painel

1. No painel do WordPress, acesse Plugins → Adicionar Novo

2. Busque por "Captafy"

3. Clique em Instalar Agora e depois em Ativar

4. Acesse Configuracoes → Captafy e insira sua chave publica

Instalacao via WP-CLI

wp plugin install captafy --activate
wp option update captafy_public_key "YOUR_PUBLIC_KEY"

Shortcode para eventos

<!-- Track a click event on any element -->
[captafy_track event="cta_click" data-plan="pro"]
  <button>Assinar Plano Pro</button>
[/captafy_track]

Shopify

Integre o Captafy na sua loja Shopify em poucos minutos pelo editor de temas.

Passo a passo

1. No admin da Shopify, acesse Loja Online → Temas

2. Clique em Acoes → Editar Codigo

3. Abra o arquivo theme.liquid

4. Cole o snippet abaixo logo antes do </head>

5. Clique em Salvar

theme.liquidhtml

<!-- Captafy Tracking Tag -->
<script>
  (function(c,a,p,t,f,y){c.captafy=c.captafy||function(){
  (c.captafy.q=c.captafy.q||[]).push(arguments)};
  y=a.createElement(p);y.async=1;y.src=t;
  f=a.getElementsByTagName(p)[0];f.parentNode.insertBefore(y,f)
  })(window,document,'script','https://cdn.captafy.io/tag.js');

  captafy('init', 'YOUR_PUBLIC_KEY');

  // Auto-identify logged-in customers
  {% if customer %}
    captafy('identify', {
      email: '{{ customer.email }}',
      name: '{{ customer.name }}',
      customer_id: '{{ customer.id }}',
      orders_count: {{ customer.orders_count }}
    });
  {% endif %}
</script>

Dica

O snippet acima identifica automaticamente clientes logados usando as variaveis Liquid do Shopify.

Google Tag Manager

Se voce usa o Google Tag Manager para gerenciar tags, siga os passos abaixo para adicionar o Captafy.

Configuracao

1. No GTM, clique em Nova Tag

2. Escolha o tipo HTML Personalizado

3. Cole o codigo abaixo

4. Configure o acionador como All Pages — Page View

5. Publique as alteracoes

GTM — Custom HTML Taghtml

<script>
  (function(c,a,p,t,f,y){c.captafy=c.captafy||function(){
  (c.captafy.q=c.captafy.q||[]).push(arguments)};
  y=a.createElement(p);y.async=1;y.src=t;
  f=a.getElementsByTagName(p)[0];f.parentNode.insertBefore(y,f)
  })(window,document,'script','https://cdn.captafy.io/tag.js');

  captafy('init', 'YOUR_PUBLIC_KEY');
</script>

Enviando eventos via Data Layer

Voce pode integrar eventos do Data Layer com o Captafy criando tags adicionais:

GTM — Event Forwarding Taghtml

<script>
  // Trigger: Custom Event - "purchase"
  captafy('track', 'purchase', {
    value: {{dlv - transaction.value}},
    currency: {{dlv - transaction.currency}},
    order_id: {{dlv - transaction.id}}
  });
</script>

Configuracao

O Captafy pode ser configurado tanto na inicializacao quanto em runtime. Abaixo estao todas as opcoes disponiveis.

Opcoes de inicializacao

captafy('init', 'YOUR_PUBLIC_KEY', {
  // Auto-tracking options
  autoTrack: {
    pageviews: true,      // Track page views automatically
    clicks: true,         // Track click events on links and buttons
    scroll: false,        // Track scroll depth (25%, 50%, 75%, 100%)
    forms: true,          // Track form submissions
    outbound: true,       // Track outbound link clicks
    downloads: true,      // Track file download clicks
  },

  // Privacy & compliance
  respectDoNotTrack: false, // Honor browser DNT setting
  cookieless: false,        // Run without cookies (uses fingerprinting)
  anonymizeIp: false,       // Anonymize visitor IPs

  // Advanced options
  debug: false,             // Enable console logging
  apiEndpoint: 'https://api.captafy.io', // Custom API endpoint
  sessionTimeout: 30,       // Session timeout in minutes (default: 30)
  crossDomain: [],          // Domains for cross-domain tracking
});

Rastreamento automatico

Com autoTrack habilitado, o Captafy rastreia automaticamente:

Evento	Descricao	Padrao
`pageviews`	Visualizacoes de pagina e mudancas de rota (SPA)	Ativo
`clicks`	Cliques em links e botoes com data attributes	Ativo
`scroll`	Profundidade de scroll em marcos de 25%	Inativo
`forms`	Submissoes de formularios (sem dados sensiveis)	Ativo
`outbound`	Cliques em links externos	Ativo
`downloads`	Downloads de arquivos (PDF, ZIP, etc.)	Ativo

Modo Debug

Ative o modo debug para ver todos os eventos e requisicoes no console do navegador:

// Enable at init
captafy('init', 'YOUR_PUBLIC_KEY', { debug: true });

// Or toggle at runtime
captafy('setConfig', { debug: true });

Atencao

Nunca deixe o modo debug ativado em producao. Ele expoe dados de eventos no console do navegador.

Rastreamento cross-domain

Para rastrear visitantes entre multiplos dominios (ex: site principal e checkout), configure a opcao crossDomain:

captafy('init', 'YOUR_PUBLIC_KEY', {
  crossDomain: [
    'www.meusite.com.br',
    'checkout.meusite.com.br',
    'blog.meusite.com.br'
  ]
});

API Reference

Referencia completa de todos os metodos disponives no SDK do Captafy. Todos os metodos sao chamados via a funcao global captafy().

Metodo	Assinatura	Descricao
`init`	captafy('init', publicKey, options?)	Inicializa o SDK com sua chave publica. Deve ser chamado antes de qualquer outro metodo.
`track`	captafy('track', eventName, properties?)	Envia um evento personalizado com propriedades opcionais.
`identify`	captafy('identify', traits)	Associa dados do lead (email, nome, empresa, etc.) ao visitante atual.
`consent`	captafy('consent', status)	Define o status de consentimento: 'granted' ou 'denied'. Controla coleta de dados sob LGPD.
`setConfig`	captafy('setConfig', options)	Atualiza configuracoes do SDK em runtime (debug, autoTrack, etc.).
`getVisitorId`	captafy('getVisitorId')	Retorna o ID unico do visitante atual (string). Util para integracoes server-side.
`reset`	captafy('reset')	Limpa todos os dados locais do visitante e gera um novo ID. Use ao fazer logout.

`captafy('init', publicKey, options?)`

Inicializa o SDK. Deve ser chamado uma unica vez, antes de qualquer outro metodo. A publicKey e obtida no painel do Captafy.

// Basic initialization
captafy('init', 'cpf_pub_abc123');

// With options
captafy('init', 'cpf_pub_abc123', {
  autoTrack: { pageviews: true, clicks: true },
  debug: false,
});

`captafy('track', eventName, properties?)`

Envia um evento personalizado. O eventName deve ser um string descritivo em snake_case. As propriedades sao um objeto plano com valores string, number ou boolean.

// Simple event
captafy('track', 'button_click');

// Event with properties
captafy('track', 'purchase', {
  value: 299.90,
  currency: 'BRL',
  product_id: 'sku_123',
  category: 'software',
});

`captafy('identify', traits)`

Associa dados de identificacao ao visitante atual. Os dados persistem entre sessoes. Chamadas subsequentes fazem merge com os dados existentes.

captafy('identify', {
  email: 'joao@empresa.com',    // Primary identifier
  name: 'Joao Silva',
  company: 'TechCorp',
  role: 'CTO',
  plan: 'pro',
  mrr: 499,
});

`captafy('consent', status)`

Define o consentimento do visitante para coleta de dados. Veja a secao Consent Mode (LGPD) para detalhes completos.

// User accepted tracking
captafy('consent', 'granted');

// User denied tracking
captafy('consent', 'denied');

`captafy('setConfig', options)`

Atualiza configuracoes em runtime. Aceita as mesmas opcoes do init.

// Enable debug mode temporarily
captafy('setConfig', { debug: true });

// Disable scroll tracking
captafy('setConfig', {
  autoTrack: { scroll: false }
});

`captafy('getVisitorId')`

Retorna o ID anonimo do visitante atual. Util para integracoes server-side ou para associar dados em sistemas externos.

const visitorId = captafy('getVisitorId');
console.log(visitorId); // "cpf_vis_a1b2c3d4e5f6"

// Use in API calls to your backend
fetch('/api/enrich', {
  method: 'POST',
  body: JSON.stringify({ visitor_id: visitorId }),
});

`captafy('reset')`

Limpa todos os dados locais do visitante (ID, traits, sessao) e gera um novo visitor ID. Use apos o logout do usuario.

// On user logout
function handleLogout() {
  // Clear your auth state
  auth.signOut();

  // Reset Captafy visitor data
  captafy('reset');
}

Eventos Personalizados

Alem do rastreamento automatico, voce pode enviar eventos personalizados para capturar acoes especificas dos visitantes. Eventos ajudam a qualificar leads e entender o comportamento do usuario.

Sintaxe

captafy('track', 'event_name', {
  property1: 'value1',
  property2: 123,
  property3: true
});

Boas praticas para nomes de eventos

• Use snake_case para nomes de eventos (ex: form_submit)

• Use um verbo + substantivo (ex: video_play, plan_selected)

• Seja consistente com a nomenclatura em toda a aplicacao

• Evite dados sensiveis (senhas, tokens) nas propriedades

Exemplos comuns

// Button click
captafy('track', 'button_click', {
  button_id: 'cta-pricing',
  button_text: 'Comece Gratis',
  page: '/pricing'
});

// Form submission
captafy('track', 'form_submit', {
  form_id: 'contact-form',
  form_name: 'Contato',
  fields_count: 5
});

// Purchase / conversion
captafy('track', 'purchase', {
  value: 199.90,
  currency: 'BRL',
  plan: 'pro',
  billing: 'annual'
});

// Video interaction
captafy('track', 'video_play', {
  video_id: 'demo-product',
  video_title: 'Demo do Produto',
  duration: 180
});

// Feature usage
captafy('track', 'feature_used', {
  feature: 'export_csv',
  context: 'leads_table'
});

// Search
captafy('track', 'search', {
  query: 'integracao api',
  results_count: 12
});

// File download
captafy('track', 'file_download', {
  file_name: 'relatorio-q4.pdf',
  file_type: 'pdf',
  file_size: '2.4MB'
});

Limites

Limite	Valor
Nome do evento	Maximo 64 caracteres
Propriedades por evento	Maximo 50 propriedades
Nome da propriedade	Maximo 64 caracteres
Valor da propriedade (string)	Maximo 512 caracteres
Eventos por segundo (por visitante)	10 eventos/s

Identificacao de Leads

A identificacao associa dados conhecidos (email, nome, empresa) ao visitante anonimo. Isso permite que o Captafy enriqueca o perfil do lead e o conecte em diferentes sessoes e dispositivos.

Sintaxe

captafy('identify', {
  email: 'joao@empresa.com',
  name: 'Joao Silva',
  company: 'TechCorp',
  plan: 'pro'
});

Campos suportados

Campo	Tipo	Descricao
`email`	string	Email do lead (identificador primario)
`name`	string	Nome completo
`company`	string	Nome da empresa
`phone`	string	Telefone
`role`	string	Cargo (ex: 'CTO', 'Marketing Manager')
`plan`	string	Plano atual do usuario
`mrr`	number	Receita mensal recorrente
`[custom]`	string \| number \| boolean	Qualquer propriedade personalizada

Quando identificar

Chame identify sempre que voce obtiver novas informacoes sobre o visitante:

• Formulario de contato — quando o visitante preenche email e nome

• Signup / Login — apos autenticacao bem-sucedida

• Checkout — quando o visitante insere dados de cobranca

• Newsletter — ao se inscrever em uma lista de emails

Exemplo completo: Formulario de contato

document.getElementById('contact-form')
  .addEventListener('submit', function(e) {
    e.preventDefault();

    const formData = new FormData(e.target);

    // Identify the lead
    captafy('identify', {
      email: formData.get('email'),
      name: formData.get('name'),
      company: formData.get('company'),
      phone: formData.get('phone'),
    });

    // Track the form submission
    captafy('track', 'contact_form_submitted', {
      source: window.location.pathname,
      utm_source: new URLSearchParams(location.search).get('utm_source'),
    });

    // Submit the form to your backend
    submitToBackend(formData);
  });

Nota

Chamadas de identify fazem merge automatico com dados existentes. Se voce chamar identify duas vezes com diferentes propriedades, ambas serao preservadas.

Reset apos logout

Ao fazer logout do usuario, chame reset para dissociar o visitante dos dados de identificacao:

function handleLogout() {
  auth.signOut();
  captafy('reset'); // Clear visitor data
}

O Captafy possui um Consent Mode integrado para conformidade com a LGPD (Lei Geral de Protecao de Dados) e outras regulamentacoes de privacidade. O Consent Mode controla quais dados sao coletados com base no consentimento do visitante.

Sintaxe

// User grants consent
captafy('consent', 'granted');

// User denies consent
captafy('consent', 'denied');

Comportamento por status

Funcionalidade	Granted	Denied
Pageviews	Ativo	Ativo
Eventos personalizados	Ativo	Ativo
Identificacao de IP	Ativo	Bloqueado
Fingerprinting	Ativo	Bloqueado
Cookies persistentes	Ativo	Bloqueado
Enriquecimento de dados	Ativo	Bloqueado
Dados individuais	Ativo	Bloqueado
Dados agregados	Ativo	Ativo

Nota

Quando o consentimento e negado, o Captafy anonimiza o IP do visitante, desativa fingerprinting e cookies persistentes, e envia apenas dados agregados. Eventos e pageviews ainda sao rastreados para metricas gerais, mas sem vinculacao individual.

Integracao com banner de cookies

Integre o Consent Mode com o seu banner de cookies existente:

// Initialize without consent (default: pending)
captafy('init', 'YOUR_PUBLIC_KEY');

// When user interacts with your cookie banner:
document.getElementById('accept-cookies').addEventListener('click', () => {
  captafy('consent', 'granted');
  closeBanner();
});

document.getElementById('reject-cookies').addEventListener('click', () => {
  captafy('consent', 'denied');
  closeBanner();
});

Estado pendente

Antes do visitante interagir com o banner, o Captafy opera em modo pendente — similar ao modo denied, mas os eventos sao enfileirados. Quando o consentimento e concedido, os eventos enfileirados sao enviados retroativamente com dados completos.

Persistencia do consentimento

O status de consentimento e salvo automaticamente no localStorage do navegador. Em visitas subsequentes, o Captafy restaura o status anterior automaticamente. Para resetar:

// Force re-ask consent on next page load
localStorage.removeItem('captafy_consent');

Atencao

O Captafy fornece as ferramentas tecnicas para conformidade, mas a responsabilidade legal pelo consentimento e sua. Consulte seu time juridico para garantir que sua implementacao esta em conformidade com a LGPD.

Precisa de ajuda? suporte@captafy.io

GitHub Status Changelog