3 min de leitura

React Integration

Add Zenovay analytics to your React application with a simple hook implementation.

Quick Setup

Add the tracking script in your root component:

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;

Replace YOUR_TRACKING_CODE with your tracking code from the Zenovay Dashboard.

Custom Hook (Recommended)

For better reusability, create a custom hook:

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

Then use it in your App:

App.jsxJSX

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

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

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

export default App;

TypeScript Support

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

First-Party Rastreamento (Bypass Ad Blockers)

For better accuracy, use first-party tracking with a custom subdomain:

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;

First-party tracking requires a CNAME DNS record. See First-Party Rastreamento Guide for setup instructions.

Environment Variables

Store your tracking code in environment variables:

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

Vite Applications

For Vite projects, 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>;
}

Verification

After installation, verify tracking is working:

Open your site in a browser
Open DevTools → Network tab
Look for requests to api.zenovay.com or your first-party domain
Check your Zenovay Dashboard for incoming data

Troubleshooting

Script not loading?

Ensure the tracking code is correct
Check for Content Security Policy (CSP) issues
Verify the script isn't blocked by ad blockers

No data appearing?

Wait a few minutes for data to process
Check the Network tab for successful requests
Ensure you're not using localhost (unless debug mode is enabled)