4 min de leitura

Integração React

Adicione análise do Zenovay à sua aplicação React com uma simples implementação de gancho.

Configuração Rápida

Encontre seu código de rastreamento em Domínios → seu site → Geral no painel de controle.

Cartão do script de rastreamento mostrando a aba React com o trecho useEffect e código de rastreamento — Seu código de rastreamento está na página Geral para cada domínio — use a aba React para o trecho.

Adicione o script de rastreamento no seu componente raiz:

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;

Substitua YOUR_TRACKING_CODE com seu código de rastreamento do Painel Zenovay.

Gancho Personalizado (Recomendado)

Para melhor reutilização, crie um gancho 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]);
}

Em seguida, use-o no seu App:

App.jsxJSX

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

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

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

export default App;

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

Rastreamento de Primeira Parte (Contornar Bloqueadores de Anúncios)

Para melhor precisão, use rastreamento de primeira parte com um subdomínio 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;

Rastreamento de primeira parte requer um registro CNAME DNS. Veja o Guia de Rastreamento de Primeira Parte para instruções de configuração.

Variáveis de Ambiente

Armazene seu código de rastreamento em variáveis de ambiente:

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

Aplicações Vite

Para projetos Vite, use 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>;
}

Verificação

Após a instalação, verifique se o rastreamento está funcionando:

Abra seu site em um navegador
Abra DevTools → aba Network
Procure por solicitações para api.zenovay.com ou seu domínio de primeira parte
Verifique seu Painel Zenovay para dados recebidos

Solução de Problemas

Script não está carregando?

Certifique-se de que o código de rastreamento está correto
Verifique se há problemas na Política de Segurança de Conteúdo (CSP)
Verifique se o script não está sendo bloqueado por bloqueadores de anúncios

Nenhum dado aparecendo?

Aguarde alguns minutos para que os dados sejam processados
Verifique a aba Network para solicitações bem-sucedidas
Certifique-se de que você não está usando localhost (a menos que o modo de depuração esteja ativado)