Pular para o conteúdo principal
Zenovaydocs
5 min de leitura

Início Rápido com React

Integre Zenovay Analytics em sua aplicação React. Nenhum pacote npm necessário, apenas uma simples tag de script.

Instalação

Adicione o script de rastreamento Zenovay ao seu arquivo HTML:

index.html (Vite) ou public/index.html (CRA)HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My React App</title>
</head>
<body>
  <div id="root"></div>
  <script defer data-tracking-code="YOUR_TRACKING_CODE" src="https://api.zenovay.com/z.js"></script>
</body>
</html>
Cartão de script de rastreamento mostrando a tag de script com abas HTML, React, Next.js e First-Party
Encontre seu código de rastreamento em Domínios, selecione seu site e abra a aba Geral.

Pronto para a configuração básica. Zenovay rastreará automaticamente as visualizações de página.

Hook Auxiliar de Configuração

Crie um hook reutilizável para rastreamento de eventos customizados:

src/hooks/useZenovay.tsTSX
export function useZenovay() {
const track = (eventName: string, data?: Record<string, any>) => {
  if (window.zenovay) {
    window.zenovay('track', eventName, data);
  }
};

const identify = (userId: string, traits?: Record<string, any>) => {
  if (window.zenovay) {
    window.zenovay('identify', userId, traits);
  }
};

const trackGoal = (goalName: string, data?: Record<string, any>) => {
  if (window.zenovay) {
    window.zenovay('goal', goalName, data);
  }
};

const trackRevenue = (data: { order_id: string; value: number; currency?: string }) => {
  if (window.zenovay) {
    window.zenovay('revenue', data.value, data.currency || 'USD');
  }
};

return { track, identify, trackGoal, trackRevenue };
}

Variáveis de Ambiente

.envBash
# No special environment variables needed for Zenovay!
# The tracking code is embedded directly in the script tag.
# Replace YOUR_TRACKING_CODE in index.html with your actual
# tracking code from the Zenovay dashboard (app.zenovay.com).

Encontre seu código de rastreamento no aplicativo em Domínios, selecione seu site e abra a aba Geral (cartão de script de rastreamento).

Rastreie Eventos com o Hook

Use o hook useZenovay para rastrear eventos customizados:

components/SignupForm.tsxTSX
import { useZenovay } from '../hooks/useZenovay';
import { useState } from 'react';

export function SignupForm() {
const { track, identify } = useZenovay();
const [email, setEmail] = useState('');

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();

  // Your signup logic
  const user = await signup(email);

  // Track the signup
  track('user_signup', {
    email,
    source: 'signup_form',
    plan: 'free',
  });

  // Identify the user
  identify(user.id, {
    email: user.email,
    created_at: new Date().toISOString(),
  });
};

return (
  <form onSubmit={handleSubmit}>
    <input
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      placeholder="Enter your email"
    />
    <button type="submit">Sign Up</button>
  </form>
);
}

Rastreie Cliques de Botão

Rastreie as interações dos usuários com botões:

components/PricingCard.tsxTSX
import { useZenovay } from '../hooks/useZenovay';

export function PricingCard({ plan }: { plan: string }) {
const { track } = useZenovay();

const handleUpgrade = () => {
  track('upgrade_clicked', {
    plan,
    location: 'pricing_page',
  });

  // Navigate to checkout
  window.location.href = '/checkout?plan=' + plan;
};

return (
  <div className="pricing-card">
    <h3>{plan} Plan</h3>
    <button onClick={handleUpgrade}>
      Upgrade Now
    </button>
  </div>
);
}

Rastreie Visualizações de Página

Rastreie automaticamente visualizações de página com React Router:

src/App.tsxTSX
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
import { useEffect } from 'react';

function PageTracker() {
const location = useLocation();

useEffect(() => {
  if (window.zenovay) {
    window.zenovay('track', 'pageview', {
      path: location.pathname,
      search: location.search,
    });
  }
}, [location.pathname]);

return null;
}

function App() {
return (
  <BrowserRouter>
    <PageTracker />
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/dashboard" element={<Dashboard />} />
    </Routes>
  </BrowserRouter>
);
}

Identifique Usuários

Identifique os usuários quando eles fazem login:

components/UserProfile.tsxTSX
import { useZenovay } from '../hooks/useZenovay';
import { useEffect } from 'react';

export function UserProfile({ user }: { user: User }) {
const { identify } = useZenovay();

useEffect(() => {
  if (user) {
    identify(user.id, {
      email: user.email,
      name: user.name,
      plan: user.subscription?.plan || 'free',
      created_at: user.createdAt,
    });
  }
}, [user]);

return <div>Welcome, {user.name}!</div>;
}

Rastreie Envios de Formulário

Rastreie interações e conclusões de formulários:

components/ContactForm.tsxTSX
import { useZenovay } from '../hooks/useZenovay';
import { useState } from 'react';

export function ContactForm() {
const { track } = useZenovay();
const [formData, setFormData] = useState({ name: '', email: '', message: '' });

const handleChange = (field: string, value: string) => {
  setFormData(prev => ({ ...prev, [field]: value }));

  // Track form field interactions
  track('form_field_filled', {
    form_name: 'contact_form',
    field_name: field,
  });
};

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();

  track('form_submitted', {
    form_name: 'contact_form',
    has_message: formData.message.length > 0,
  });

  // Submit form logic
  await submitContact(formData);
};

return (
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      value={formData.name}
      onChange={(e) => handleChange('name', e.target.value)}
      placeholder="Name"
    />
    <input
      type="email"
      value={formData.email}
      onChange={(e) => handleChange('email', e.target.value)}
      placeholder="Email"
    />
    <textarea
      value={formData.message}
      onChange={(e) => handleChange('message', e.target.value)}
      placeholder="Message"
    />
    <button type="submit">Send Message</button>
  </form>
);
}

Suporte TypeScript

Adicione declarações de tipo para o objeto global zenovay:

types/zenovay.d.tsTypeScript
declare global {
interface Window {
  zenovay?: (...args: any[]) => void;
}
}

export {};

Testando em Desenvolvimento

Você pode verificar se os eventos estão sendo enviados checando a aba Rede nas ferramentas do desenvolvedor do seu navegador para requisições para api.zenovay.com. O painel Zenovay também fornece monitoramento de eventos em tempo real.

Certifique-se de substituir YOUR_TRACKING_CODE em index.html pelo seu código de rastreamento real do painel Zenovay.

Próximos Passos

Sua aplicação React agora está rastreando com Zenovay! Visualize suas análises no painel.

Continue aprendendo:

Esta página foi útil?