4 min de lectura

Integración React

Agrega análisis de Zenovay a tu aplicación React con una simple implementación de hook.

Configuración Rápida

Encuentra tu código de rastreo bajo Domains → your site → General en el panel de control.

Tarjeta del script de rastreo que muestra la pestaña React con el fragmento useEffect y el código de rastreo — Tu código de rastreo está en la página General para cada dominio — usa la pestaña React para el fragmento.

Agrega el script de rastreo en tu componente raíz:

App.jsxJSX

import { useEffect } from 'react';

function App() {
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.defer = true;
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  document.head.appendChild(script);
}, []);

return <div>Your App</div>;
}

export default App;

Reemplaza YOUR_TRACKING_CODE con tu código de rastreo desde el Zenovay Dashboard.

Hook Personalizado (Recomendado)

Para una mejor reutilización, crea un hook personalizado:

hooks/useZenovay.jsJSX

import { useEffect } from 'react';

export function useZenovay(trackingCode) {
useEffect(() => {
  if (!trackingCode) return;

  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.defer = true;
  script.setAttribute('data-tracking-code', trackingCode);
  document.head.appendChild(script);

  return () => {
    // Cleanup if needed
    const existingScript = document.querySelector(`script[data-tracking-code="${trackingCode}"]`);
    if (existingScript) {
      existingScript.remove();
    }
  };
}, [trackingCode]);
}

Luego úsalo en tu App:

App.jsxJSX

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

function App() {
useZenovay('YOUR_TRACKING_CODE');

return <div>Your App</div>;
}

export default App;

Compatibilidad con TypeScript

hooks/useZenovay.tsTSX

import { useEffect } from 'react';

export function useZenovay(trackingCode: string): void {
useEffect(() => {
  if (!trackingCode) return;

  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.defer = true;
  script.setAttribute('data-tracking-code', trackingCode);
  document.head.appendChild(script);

  return () => {
    const existingScript = document.querySelector(`script[data-tracking-code="${trackingCode}"]`);
    if (existingScript) {
      existingScript.remove();
    }
  };
}, [trackingCode]);
}

Rastreo de Primera Parte (Evitar Bloqueadores de Anuncios)

Para mayor precisión, utiliza rastreo de primera parte con un subdominio personalizado:

App.jsxJSX

import { useEffect } from 'react';

function App() {
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://metrics.yourdomain.com/z.js'; // Your CNAME subdomain
  script.defer = true;
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  document.head.appendChild(script);
}, []);

return <div>Your App</div>;
}

export default App;

El rastreo de primera parte requiere un registro CNAME en DNS. Consulta la Guía de rastreo de primera parte para obtener instrucciones de configuración.

Variables de Entorno

Almacena tu código de rastreo en variables de entorno:

App.jsxJSX

import { useEffect } from 'react';

function App() {
useEffect(() => {
  const trackingCode = process.env.REACT_APP_ZENOVAY_ID;
  if (!trackingCode) return;

  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.defer = true;
  script.setAttribute('data-tracking-code', trackingCode);
  document.head.appendChild(script);
}, []);

return <div>Your App</div>;
}

.envBash

REACT_APP_ZENOVAY_ID=ZV_ABC123XYZ

Aplicaciones Vite

Para proyectos de Vite, utiliza import.meta.env:

App.jsxJSX

import { useEffect } from 'react';

function App() {
useEffect(() => {
  const trackingCode = import.meta.env.VITE_ZENOVAY_ID;
  if (!trackingCode) return;

  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.defer = true;
  script.setAttribute('data-tracking-code', trackingCode);
  document.head.appendChild(script);
}, []);

return <div>Your App</div>;
}

Verificación

Después de la instalación, verifica que el rastreo esté funcionando:

Abre tu sitio en un navegador
Abre DevTools → pestaña Network
Busca solicitudes a api.zenovay.com o tu dominio de primera parte
Comprueba tu Zenovay Dashboard para datos entrantes

Solución de Problemas

¿El script no carga?

Asegúrate de que el código de rastreo sea correcto
Verifica si hay problemas de Política de Seguridad de Contenido (CSP)
Verifica que el script no esté bloqueado por bloqueadores de anuncios

¿No aparecen datos?

Espera algunos minutos para que los datos se procesen
Comprueba la pestaña Network para ver si hay solicitudes exitosas
Asegúrate de que no estés usando localhost (a menos que el modo de depuración esté habilitado)