4 min de lectura

Integración con React

Añada Zenovay Analytics a su aplicación React con una simple etiqueta de script. No se requiere ningún paquete npm.

Descripción general

El script de seguimiento de Zenovay funciona a la perfección con aplicaciones React. Añada 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

Añada 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.

Configuración

Añadir el script al HTML

Para proyectos con Vite, añada 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 };
}

Seguimiento de páginas vistas

Rastree automáticamente las páginas vistas 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>;
}

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

Soporte para TypeScript

Añada 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;
  };
}

// Función de seguimiento con tipado seguro
function trackEvent<K extends keyof CustomEvents>(eventName: K, data: CustomEvents[K]) {
  if (window.zenovay) {
    window.zenovay('track',eventName, data);
  }
}

// Seguimiento de eventos con tipado seguro
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>;
}

Seguimiento de 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 con Next.js.

¿Necesita ayuda? Consulte nuestros Ejemplos de React o contacte con [email protected].