4 min de leitura

Integração com React

Adicione o Zenovay analytics à sua aplicação React com uma simples tag de script. Nenhum pacote npm necessário.

Visão geral

O script de rastreamento do Zenovay funciona perfeitamente com aplicações React. Adicione a tag de script ao seu HTML e use chamadas window.zenovay nos seus componentes para rastreamento de eventos personalizados.

Instalação

Adicione o script de rastreamento do Zenovay ao seu arquivo HTML:

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

Coloque a tag de script no <body> do seu arquivo HTML. O atributo defer garante que ele carregue sem bloquear a renderização da página.

Configuração

Adicionar script ao HTML

Para projetos Vite, adicione ao index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Meu App React</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>

Criar um hook auxiliar

Crie um hook reutilizável para acessar o rastreamento do Zenovay nos seus 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 visualizações de página

Rastreie automaticamente as visualizações de página com o 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;
}

Rastreamento de eventos

Hook useZenovay

Rastreie eventos personalizados com o 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}>Cadastrar</button>;
}

Componente de botão rastreável

Crie um componente de botão rastreável reutilizável:

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' }}>
  Cadastrar
</TrackableButton>

Suporte a TypeScript

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

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

export {};

Você também pode criar rastreamento de eventos com tipagem segura:

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

// Função de rastreamento com tipagem segura
function trackEvent<K extends keyof CustomEvents>(eventName: K, data: CustomEvents[K]) {
  if (window.zenovay) {
    window.zenovay('track',eventName, data);
  }
}

// Rastreamento de evento com tipagem segura
trackEvent('button_click', {
  buttonName: 'signup',
  location: 'hero'
});

Recursos avançados

Identificar usuários

Associe eventos a usuários 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>Bem-vindo, {user.name}</div>;
}

Rastrear metas

Rastreie metas de conversão:

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

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

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

  return <div>Seja bem-vindo!</div>;
}

Integração com Next.js

Para aplicações Next.js, consulte o guia Next.js Quickstart.

Precisa de ajuda? Confira nossos Exemplos React ou entre em contato com [email protected].