4 min de lectura

Integración con React

Agregue analytics de Zenovay a su aplicación React con una simple etiqueta de script. No se requiere paquete npm.

Descripción general

El script de seguimiento de Zenovay funciona con aplicaciones React. Agregue la etiqueta de script a su HTML y, a continuación, utilice llamadas a window.zenovay en sus componentes para el seguimiento de eventos personalizados.

Instalación

Agregue el script de seguimiento de Zenovay a su archivo HTML:

<!-- index.html (Vite) o public/index.html (Create React App) -->
<script defer data-tracking-code="YOUR_TRACKING_CODE" src="https://api.zenovay.com/z.js"></script>

Coloque la etiqueta de script en el <body> de su archivo HTML. El atributo defer garantiza que se cargue sin bloquear el renderizado de la página.

Tarjeta de código de seguimiento mostrando el fragmento de script con la pestaña React seleccionada y botón Verificar instalación — Encuentre su código de seguimiento en Dominios → su sitio → General. La pestaña React muestra el fragmento exacto para pegar.

Configuración

Agregar el script al HTML

Para proyectos con Vite, agregue a index.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>

Crear un hook auxiliar

Cree un hook reutilizable para acceder al seguimiento de Zenovay en sus componentes:

// hooks/useZenovay.ts
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 trackPurchase = (data: { amount: number; currency: string; product: string }) => {
    if (window.zenovay) {
      window.zenovay('revenue', data.amount, data.currency);
    }
  };

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

Rastrear vistas de página

Rastree automáticamente las vistas de página con React Router:

import { 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,
        title: document.title,
      });
    }
  }, [location.pathname]);

  return null;
}

Seguimiento de eventos

Hook useZenovay

Rastree eventos personalizados con el hook useZenovay:

import { useZenovay } from './hooks/useZenovay';

function Button() {
  const { track } = useZenovay();

  const handleClick = () => {
    track('button_click', {
      buttonName: 'signup',
      location: 'hero'
    });
  };

  return <button onClick={handleClick}>Sign Up</button>;
}

Componente de botón rastreable

Cree un componente de botón rastreable y reutilizable:

import { useZenovay } from './hooks/useZenovay';

interface TrackableButtonProps {
  eventName: string;
  eventData?: Record<string, any>;
  children: React.ReactNode;
  onClick?: (e: React.MouseEvent) => void;
}

function TrackableButton({ eventName, eventData, children, onClick, ...props }: TrackableButtonProps) {
  const { track } = useZenovay();

  const handleClick = (e: React.MouseEvent) => {
    track(eventName, eventData);
    onClick?.(e);
  };

  return <button onClick={handleClick} {...props}>{children}</button>;
}

// Usage:
<TrackableButton eventName="button_click" eventData={{ buttonName: 'signup' }}>
  Sign Up
</TrackableButton>

Soporte para TypeScript

Agregue declaraciones de tipo para el objeto global zenovay:

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

export {};

También puede crear seguimiento de eventos con tipado seguro:

interface CustomEvents {
  button_click: {
    buttonName: string;
    location: string;
  };
  form_submit: {
    formId: string;
  };
}

// Type-safe tracking function
function trackEvent<K extends keyof CustomEvents>(eventName: K, data: CustomEvents[K]) {
  if (window.zenovay) {
    window.zenovay('track', eventName, data);
  }
}

// Type-safe event tracking
trackEvent('button_click', {
  buttonName: 'signup',
  location: 'hero'
});

Funciones avanzadas

Identificar usuarios

Asocie eventos con usuarios específicos:

import { useZenovay } from './hooks/useZenovay';

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

  useEffect(() => {
    if (user) {
      identify(user.id, {
        email: user.email,
        plan: user.plan,
      });
    }
  }, [user]);

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

Rastrear objetivos

Rastree objetivos de conversión:

import { useZenovay } from './hooks/useZenovay';

function SignupComplete() {
  const { trackGoal } = useZenovay();

  useEffect(() => {
    trackGoal('signup_completed', {
      source: 'organic',
      value: 99.00
    });
  }, []);

  return <div>Welcome aboard!</div>;
}

Integración con Next.js

Para aplicaciones Next.js, consulte la guía Inicio rápido de Next.js.

¿Necesita ayuda? Consulte nuestros Ejemplos de React o póngase en contacto con [email protected].