Skip to main content

​
O que é o Testly?

O Testly é uma ferramenta de experimentação para produtos digitais criada especialmente para founders técnicos e pequenas equipes de SaaS que precisam validar decisões de produto com dados reais, sem a complexidade das ferramentas tradicionais de marketing. Diferente de plataformas focadas em campanhas publicitárias, o Testly foi projetado para quem vive no código. Os experimentos são implementados via SDK, seguem princípios técnicos claros e não impactam a performance da sua aplicação.

SDK-First

Experimentos controlados diretamente no código, não em dashboards genéricos

Determinístico

O mesmo usuário sempre vê a mesma variante. Atribuição baseada no userId

Resiliente a Falhas

Conversões só são registradas quando o backend confirma o sucesso da chamada

Performance-Safe

Zero bloqueio de render. Otimizado para não impactar Core Web Vitals

​
Por que o Testly existe?

Instrumentar experimentos A/B é chato, manual e repetitivo. A maioria das ferramentas foi feita para equipes de marketing com dashboards visuais complexos e não para devs que querem testar um título, um botão ou um fluxo rapidamente. O Testly resolve isso: instale o SDK, crie um teste e veja o que performa melhor.

​
Para quem o Testly foi criado?

O Testly não é uma ferramenta de marketing.

​
Ele foi criado para:

Founders técnicos rodando SaaS independentes
Pequenas equipes de produto (1-10 pessoas)
Desenvolvedores que precisam de clareza técnica e código limpo
Times enxutos sem recursos para ferramentas enterprise
Se você tem um produto rodando, usuários ativos e quer entender o que converte melhor sem gastar dias configurando dashboards saiba que o Testly é pra você!

​
Como funciona?

1

Instale o SDK

Adicione o Testly ao seu projeto React:
npm i @testlyjs/react
2

Configure o Provider

Envolva sua aplicação com o TestlyProvider:
import { TestlyProvider } from '@testly/react';

function App() {
  return (
    <TestlyProvider apiKey="YOUR_API_KEY">
      <Main />
    </TestlyProvider>
  );
}
3

Crie um experimento

Use o hook useExperiment para renderizar variantes:
import { useExperiment } from '@testlyjs/react';

export function HeroBanner() {
  const { variant, convert } = useExperiment('homepage-hero-v2');

  return (
    <div>
      {variant === 'variant-b' ? (
        <button onClick={() => convert('clicked_cta')}>
          Comece Grátis (Variante B)
        </button>
      ) : (
        <button onClick={() => convert('clicked_cta')}>
          Experimente Agora (Variante A)
        </button>
      )}
    </div>
  );
}
4

Monitore os resultados

Acesse o dashboard do Testly para ver:
  • Impressões: quantos usuários viram cada variante
  • Conversões: quantos usuários realizaram a ação desejada
  • Taxa de conversão: qual variante está performando melhor
5

Tome decisões baseadas em dados

Quando tiver significância estatística, implemente a variante vencedora para 100% dos usuários

​
Fluxo Detalhado

  1. Usuário acessa a página: O visitante entra no seu app pela primeira vez
  2. SDK executa: Hook useExperiment('experiment-id') é executado
  3. API consulta: Verifica se o usuário já tem uma variante atribuída
  4. Atribuição determinística: Se não tem, atribui uma variante baseada no userId
  5. Renderização: SDK renderiza a variante
  6. Impressão automática: SDK registra a impressão automaticamente
  7. Cache local: Variante é salva no cache para próximas visitas

​
Principais Conceitos

​
Experimento

Um experimento é o container onde você configura o teste A/B. Cada experimento possui:
  • ID único: Identificador do experimento (ex: homepage-hero-v2)
  • Variantes: Versões diferentes que serão testadas (A, B, C…)
  • Status: Ativo ou inativo

​
Variante

Uma variante é cada versão testada no experimento:
  • Controle (A): Versão original
  • Tratamento (B, C, D…): Versões alternativas
No código, você decide o que renderizar baseado no valor de variant.
O ideal é criar de 2 a 4 variantes por experimento. Muitas variantes podem diluir seus resultados e exigir muito mais tráfego para atingir significância estatística.

​
Impressão (Auto-tracked)

Uma impressão é registrada automaticamente quando o hook useExperiment é executado pela primeira vez para aquele usuário. Você não precisa fazer nada pois o nosso SDK cuida disso. O SDK garante que:
  • Apenas a primeira visualização é contada
  • Recarregamentos de página não geram novas impressões
  • Cada usuário é contado apenas uma vez

​
Conversão

Uma conversão ocorre quando o usuário executa a ação desejada. Você decide quando chamar a função convert(): 
const { convert } = useExperiment('pricing-test');

<button onClick={() => convert('plan_selected')}>
  Selecionar Plano
</button>

​
Conversões Globais vs Específicas

TipoHookQuando usar
GlobaluseConversion()Ações genéricas que afetam todos os experimentos ativos (ex: cadastro, compra)
EspecíficauseExperiment()Ações diretamente relacionadas ao experimento (ex: clique no botão testado)
import { useConversion } from '@testlyjs/react';

function CheckoutButton() {
  const trackGlobal = useConversion();
  
  return (
    <button onClick={() => trackGlobal('purchase_completed')}>
      Finalizar Compra
    </button>
  );
}

​
Taxa de Conversão

A taxa de conversão é calculada como: 
Taxa de Conversão = (Conversões / Impressões) × 100%
Esta métrica indica qual variante está performando melhor.

​
Casos de Uso Reais

O Testly é perfeito para testar diversos elementos do seu produto:

CTAs e Botões

Teste textos, cores, tamanhos e posicionamento de call-to-actions

Headlines e Títulos

Descubra qual mensagem gera mais cliques e conversões

Hero Sections

Compare diferentes imagens, vídeos e layouts de hero

Formulários

Otimize número de campos, labels e copy dos formulários

Pricing e Planos

Teste diferentes estruturas de preço e ofertas

Social Proof

Compare depoimentos, badges de confiança e reviews

Fluxos de Onboarding

Teste sequências de etapas e copy do onboarding

Copy e Mensagens

Otimize textos de descrição e proposta de valor

​
Configuração Avançada

​
Debug Mode

Ative logs detalhados durante o desenvolvimento: 
<TestlyProvider 
  apiKey="YOUR_API_KEY"
  config={{
    debug: process.env.NODE_ENV === 'development'
  }}
>
Você verá logs como:
  • ✅ Conversion recorded — Conversão registrada com sucesso
  • ❌ TRACKING BLOCKED: Missing experiment ID — IDs ausentes (problema de configuração)
  • ⚠️ API ERROR: Network timeout — Detalhes sobre falhas de tracking

​
Deduplicação de Conversões

Por padrão, o SDK evita registrar conversões duplicadas na mesma sessão: 
config={{
  dedupConversions: true // Padrão
}}

​
Fallback para Erros

Sempre implemente tratamento de erro para garantir uma experiência resiliente: 
const { variant, loading, error } = useExperiment('hero-test');

if (loading) return <Skeleton />;
if (error) return <OriginalHero />; // Fallback seguro

return <div>{/* Renderiza variante */}</div>;
Sempre implemente fallbacks. Isso garante que seu produto continue funcionando mesmo se a API do Testly estiver fora do ar.

​
Requisitos Técnicos

  • ✅ React 16.8+ (com hooks)
  • ✅ Next.js
  • ✅ Remix
  • ✅ Gatsby
  • ⏳ Vue.js (em desenvolvimento)
  • ⏳ Svelte (em desenvolvimento)
Funciona em qualquer tipo de hospedagem:
  • Vercel
  • Netlify
  • AWS
  • Custom servers
  • Single Page Applications (SPAs)
  • Server-Side Rendered (SSR)

​
Segurança e Privacidade

Dados Anônimos

Não coletamos informações pessoais dos visitantes

GDPR Compliant

Em conformidade com regulamentações de privacidade

API Keys Seguras

Autenticação por chave única. Nunca exponha em código público

HTTPS Only

Todas as comunicações são criptografadas
ImportanteNunca exponha sua API Key em código público (GitHub, fóruns, etc.).

​
Limitações Atuais

Queremos ser transparentes sobre as limitações da versão atual:
  • Tráfego mínimo recomendado: 500+ visitantes/mês por experimento
  • Frameworks: Apenas React no momento (Vue e Svelte em breve)
  • Eventos customizados: Suportado via convert('event_name')
  • Segmentação avançada: Não disponível ainda
  • Integração analytics: Em desenvolvimento
Quer sugerir features? Entre em contato no Discord!

​
Pricing

​
Free

  • ✅ Até 10.000 eventos/mês
  • ✅ Experimentos ilimitados
  • ✅ Variantes ilimitadas
  • ✅ Suporte via comunidade

​
Pro — $29/mês

  • ✅ Até 100.000 eventos/mês
  • ✅ Tudo do plano Free
  • ✅ Suporte prioritário
  • ✅ Exportação de dados

​
Enterprise — Custom

  • ✅ Eventos ilimitados
  • ✅ SLA garantido
  • ✅ Suporte dedicado
  • ✅ Onboarding personalizado

​
Próximos Passos

Pronto para começar? Siga estes passos:
1

Crie sua conta

Registre-se gratuitamente — leva menos de 1 minuto
2

Instale o SDK

npm install @testlyjs/react
3

Configure seu primeiro experimento

Siga nosso Guia de Quickstart para ter um teste rodando em 5 minutos
4

Monitore os resultados

Acompanhe métricas em tempo real no dashboard

Comece Agora

Vá para o Guia Rápido e implemente seu primeiro teste A/B em 5 minutos

​
Precisa de Ajuda?

Documentação

Explore guias detalhados

Exemplos

Veja implementações reais

Suporte

Fale com nosso time
Junte-se a comunidade no Discord para trocar experiências com outros founders devs!
Feito para devs, por devs. 🚀