Guia Rápido

REACT_APP_TESTLY_API_KEY=sua_api_key_aqui
# ou para Next.js:
# NEXT_PUBLIC_TESTLY_API_KEY=sua_api_key_aqui

.env
.env.local

import { useExperiment } from '@testly/react';

export function HeroSection() {
  const { variant, loading, error, convert } = useExperiment('homepage-cta-test');

  // Loading state
  if (loading) {
    return (
      <div className="hero">
        <h1>Transforme seu produto com dados</h1>
        <div className="skeleton-button" /> {/* Placeholder */}
      </div>
    );
  }

  // Error fallback
  if (error) {
    console.error('Erro ao carregar experimento:', error);
    return (
      <div className="hero">
        <h1>Transforme seu produto com dados</h1>
        <button onClick={() => window.location.href = '/signup'}>
          Comece Grátis
        </button>
      </div>
    );
  }

  // Render variants
  return (
    <div className="hero">
      <h1>Transforme seu produto com dados</h1>
      
      {variant === 'variant-b' ? (
        <button 
          className="cta-button"
          onClick={() => {
            convert('cta_clicked');
            window.location.href = '/signup';
          }}
        >
          Experimente Agora 🚀
        </button>
      ) : (
        <button 
          className="cta-button"
          onClick={() => {
            convert('cta_clicked');
            window.location.href = '/signup';
          }}
        >
          Comece Grátis
        </button>
      )}
    </div>
  );
}

import { HeroSection } from '../components/HeroSection';

export default function Home() {
  return (
    <main>
      <HeroSection />
      {/* Resto da página */}
    </main>
  );
}

import { useExperiment, useConversion } from '@testly/react';

function HeroSection() {
  const { variant, convert } = useExperiment('hero-headline-test');

  return (
    <section className="hero">
      {variant === 'variant-b' ? (
        <h1>Valide suas ideias com dados reais</h1>
      ) : (
        <h1>Teste A/B para founders devs</h1>
      )}
      
      <button onClick={() => convert('hero_cta_clicked')}>
        Começar Grátis
      </button>
    </section>
  );
}

function PricingSection() {
  const { variant, convert } = useExperiment('pricing-layout-test');

  if (variant === 'variant-b') {
    return (
      <section className="pricing-3-columns">
        {/* Layout com 3 colunas */}
        <PricingCard 
          plan="Free" 
          onSelect={() => convert('plan_selected')} 
        />
        <PricingCard 
          plan="Pro" 
          onSelect={() => convert('plan_selected')} 
        />
        <PricingCard 
          plan="Enterprise" 
          onSelect={() => convert('plan_selected')} 
        />
      </section>
    );
  }

  return (
    <section className="pricing-2-columns">
      {/* Layout com 2 colunas */}
      <PricingCard 
        plan="Free" 
        onSelect={() => convert('plan_selected')} 
      />
      <PricingCard 
        plan="Pro" 
        onSelect={() => convert('plan_selected')} 
      />
    </section>
  );
}

function SignupButton() {
  const trackGlobal = useConversion();

  const handleSignup = () => {
    trackGlobal('signup_completed'); // Conta para TODOS os experimentos
    window.location.href = '/dashboard';
  };

  return (
    <button onClick={handleSignup}>
      Criar Conta Grátis
    </button>
  );
}

export default function LandingPage() {
  return (
    <main>
      <HeroSection />
      <PricingSection />
      <SignupButton />
    </main>
  );
}