5 min de lecture

Démarrage rapide React

Intégrez Zenovay Analytics dans votre application React. Aucun package npm requis, juste une simple balise script.

Installation

Ajoutez le script de suivi Zenovay à votre fichier HTML :

index.html (Vite) ou public/index.html (CRA)HTML

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

Carte de script de suivi montrant la balise script avec les onglets HTML, React, Next.js et First-Party — Trouvez votre code de suivi dans Domaines, sélectionnez votre site, puis ouvrez l'onglet Général.

C'est tout pour la configuration de base. Zenovay suivra automatiquement les pages vues.

Hook auxiliaire de configuration

Créez un hook réutilisable pour suivre les événements personnalisés :

src/hooks/useZenovay.tsTSX

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 trackRevenue = (data: { order_id: string; value: number; currency?: string }) => {
  if (window.zenovay) {
    window.zenovay('revenue', data.value, data.currency || 'USD');
  }
};

return { track, identify, trackGoal, trackRevenue };
}

Variables d'environnement

.envBash

# Aucune variable d'environnement spéciale n'est nécessaire pour Zenovay !
# Le code de suivi est intégré directement dans la balise script.
# Remplacez YOUR_TRACKING_CODE dans index.html par votre véritable
# code de suivi du tableau de bord Zenovay (app.zenovay.com).

Trouvez votre code de suivi dans l'application sous Domaines, sélectionnez votre site, puis ouvrez l'onglet Général (carte de script de suivi).

Suivre les événements avec Hook

Utilisez le hook useZenovay pour suivre les événements personnalisés :

components/SignupForm.tsxTSX

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

export function SignupForm() {
const { track, identify } = useZenovay();
const [email, setEmail] = useState('');

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();

  // Your signup logic
  const user = await signup(email);

  // Track the signup
  track('user_signup', {
    email,
    source: 'signup_form',
    plan: 'free',
  });

  // Identify the user
  identify(user.id, {
    email: user.email,
    created_at: new Date().toISOString(),
  });
};

return (
  <form onSubmit={handleSubmit}>
    <input
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      placeholder="Enter your email"
    />
    <button type="submit">Sign Up</button>
  </form>
);
}

Suivre les clics de bouton

Suivez les interactions de l'utilisateur avec les boutons :

components/PricingCard.tsxTSX

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

export function PricingCard({ plan }: { plan: string }) {
const { track } = useZenovay();

const handleUpgrade = () => {
  track('upgrade_clicked', {
    plan,
    location: 'pricing_page',
  });

  // Navigate to checkout
  window.location.href = '/checkout?plan=' + plan;
};

return (
  <div className="pricing-card">
    <h3>{plan} Plan</h3>
    <button onClick={handleUpgrade}>
      Upgrade Now
    </button>
  </div>
);
}

Suivre les pages vues

Suivez automatiquement les pages vues avec React Router :

src/App.tsxTSX

import { BrowserRouter, Routes, Route, 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,
      search: location.search,
    });
  }
}, [location.pathname]);

return null;
}

function App() {
return (
  <BrowserRouter>
    <PageTracker />
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/dashboard" element={<Dashboard />} />
    </Routes>
  </BrowserRouter>
);
}

Identifier les utilisateurs

Identifiez les utilisateurs lorsqu'ils se connectent :

components/UserProfile.tsxTSX

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

export function UserProfile({ user }: { user: User }) {
const { identify } = useZenovay();

useEffect(() => {
  if (user) {
    identify(user.id, {
      email: user.email,
      name: user.name,
      plan: user.subscription?.plan || 'free',
      created_at: user.createdAt,
    });
  }
}, [user]);

return <div>Welcome, {user.name}!</div>;
}

Suivre les envois de formulaires

Suivez les interactions de formulaire et les complétions :

components/ContactForm.tsxTSX

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

export function ContactForm() {
const { track } = useZenovay();
const [formData, setFormData] = useState({ name: '', email: '', message: '' });

const handleChange = (field: string, value: string) => {
  setFormData(prev => ({ ...prev, [field]: value }));

  // Track form field interactions
  track('form_field_filled', {
    form_name: 'contact_form',
    field_name: field,
  });
};

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();

  track('form_submitted', {
    form_name: 'contact_form',
    has_message: formData.message.length > 0,
  });

  // Submit form logic
  await submitContact(formData);
};

return (
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      value={formData.name}
      onChange={(e) => handleChange('name', e.target.value)}
      placeholder="Name"
    />
    <input
      type="email"
      value={formData.email}
      onChange={(e) => handleChange('email', e.target.value)}
      placeholder="Email"
    />
    <textarea
      value={formData.message}
      onChange={(e) => handleChange('message', e.target.value)}
      placeholder="Message"
    />
    <button type="submit">Send Message</button>
  </form>
);
}

Support TypeScript

Ajoutez les déclarations de type pour l'objet global zenovay :

types/zenovay.d.tsTypeScript

declare global {
interface Window {
  zenovay?: (...args: any[]) => void;
}
}

export {};

Test en développement

Vous pouvez vérifier que les événements sont envoyés en vérifiant l'onglet Réseau dans les outils de développeur de votre navigateur pour les requêtes vers api.zenovay.com. Le tableau de bord Zenovay fournit également une surveillance des événements en temps réel.

Assurez-vous de remplacer YOUR_TRACKING_CODE dans index.html par votre code de suivi réel du tableau de bord Zenovay.

Prochaines étapes

Votre application React suivra maintenant avec Zenovay ! Consultez vos analyses dans le tableau de bord.

Continuez à apprendre :

Événements personnalisés - Suivi d'événements avancé
Identification des visiteurs - Meilleures pratiques de suivi des utilisateurs
Conformité à la vie privée - Configuration GDPR et CCPA