Saltar al contenido principal
Zenovaydocs
5 min de lectura

React Quickstart

Integra Zenovay Analytics en tu aplicación React. No se necesita paquete npm, solo una simple etiqueta de script.

Instalación

Añade el script de seguimiento de Zenovay a tu archivo HTML:

index.html (Vite) o 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>
Tarjeta de script de seguimiento que muestra la etiqueta de script con pestañas de HTML, React, Next.js y First-Party
Encuentra tu código de seguimiento en Domains (Dominios), selecciona tu sitio y luego abre la pestaña General.

Eso es todo para la configuración básica. Zenovay rastreará automáticamente las vistas de página.

Hook de Configuración Auxiliar

Crea un hook reutilizable para rastrear eventos personalizados:

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 };
}

Variables de Entorno

.envBash
# No se necesitan variables de entorno especiales para Zenovay!
# El código de seguimiento está incorporado directamente en la etiqueta de script.
# Reemplaza YOUR_TRACKING_CODE en index.html con tu código
# de seguimiento real del panel de Zenovay (app.zenovay.com).

Encuentra tu código de seguimiento en la aplicación bajo Domains (Dominios), selecciona tu sitio y luego abre la pestaña General (la tarjeta de script de seguimiento).

Rastrear Eventos con Hook

Usa el hook useZenovay para rastrear eventos personalizados:

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();

  // Tu lógica de registro
  const user = await signup(email);

  // Rastrear el registro
  track('user_signup', {
    email,
    source: 'signup_form',
    plan: 'free',
  });

  // Identificar al usuario
  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>
);
}

Rastrear Clics de Botón

Rastrea las interacciones del usuario con botones:

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',
  });

  // Navegar a checkout
  window.location.href = '/checkout?plan=' + plan;
};

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

Rastrear Vistas de Página

Rastrea automáticamente las vistas de página con 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>
);
}

Identificar Usuarios

Identifica a los usuarios cuando inicien sesión:

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>;
}

Rastrear Envíos de Formulario

Rastrea las interacciones y completaciones de formularios:

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 }));

  // Rastrear interacciones de campos de formulario
  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,
  });

  // Lógica de envío de formulario
  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>
);
}

Compatibilidad con TypeScript

Añade declaraciones de tipo para el objeto global zenovay:

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

export {};

Pruebas en Desarrollo

Puedes verificar que los eventos se están enviando verificando la pestaña Network en las herramientas de desarrollador de tu navegador para las solicitudes a api.zenovay.com. El panel de Zenovay también proporciona monitoreo de eventos en tiempo real.

Asegúrate de reemplazar YOUR_TRACKING_CODE en index.html con tu código de seguimiento real del panel de Zenovay.

Próximos Pasos

¡Tu aplicación React ahora está rastreando con Zenovay! Visualiza tu análisis en el panel.

Continúa aprendiendo:

¿Fue útil esta página?