4 min de lecture

Intégration React

Ajoutez les analyses Zenovay à votre application React avec une implémentation simple de hook.

Configuration rapide

Trouvez votre code de suivi sous Domains → votre site → General dans le tableau de bord.

Carte du script de suivi montrant l'onglet React avec l'extrait useEffect et le code de suivi — Votre code de suivi se trouve sur la page Général pour chaque domaine — utilisez l'onglet React pour l'extrait.

Ajoutez le script de suivi dans votre composant racine :

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;

Remplacez YOUR_TRACKING_CODE par votre code de suivi depuis le Tableau de bord Zenovay.

Hook personnalisé (recommandé)

Pour une meilleure réutilisabilité, créez un hook personnalisé :

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

Ensuite, utilisez-le dans votre App :

App.jsxJSX

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

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

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

export default App;

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

Suivi propriétaire (contourner les bloqueurs de publicités)

Pour une meilleure précision, utilisez le suivi propriétaire avec un sous-domaine personnalisé :

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;

Le suivi propriétaire nécessite un enregistrement DNS CNAME. Consultez le Guide de suivi propriétaire pour les instructions de configuration.

Variables d'environnement

Stockez votre code de suivi dans des variables d'environnement :

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

Applications Vite

Pour les projets Vite, utilisez 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>;
}

Vérification

Après l'installation, vérifiez que le suivi fonctionne :

Ouvrez votre site dans un navigateur
Ouvrez DevTools → onglet Network
Recherchez les requêtes vers api.zenovay.com ou votre domaine propriétaire
Vérifiez votre Tableau de bord Zenovay pour les données entrantes

Dépannage

Le script ne se charge pas ?

Assurez-vous que le code de suivi est correct
Vérifiez les problèmes de politique de sécurité du contenu (CSP)
Vérifiez que le script n'est pas bloqué par les bloqueurs de publicités

Aucune donnée n'apparaît ?

Attendez quelques minutes pour que les données soient traitées
Vérifiez l'onglet Network pour les requêtes réussies
Assurez-vous que vous n'utilisez pas localhost (sauf si le mode débogage est activé)