Zum Hauptinhalt springen
Zenovaydocs
5 Min. Lesedauer

React Quickstart

Integrieren Sie Zenovay Analytics in Ihrer React-Anwendung. Kein npm-Paket erforderlich, nur ein einfacher Script-Tag.

Installation

Fügen Sie das Zenovay-Tracking-Script zu Ihrer HTML-Datei hinzu:

index.html (Vite) oder 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>
Tracking-Script-Karte zeigt den Script-Tag mit HTML-, React-, Next.js- und First-Party-Tabs
Finden Sie Ihren Tracking-Code unter Domains, wählen Sie Ihre Website aus und öffnen Sie dann den Tab Allgemein.

Das ist alles für die grundlegende Einrichtung. Zenovay verfolgt Seitenaufrufe automatisch.

Setup-Helper Hook

Erstellen Sie einen wiederverwendbaren Hook zum Verfolgen benutzerdefinierter Ereignisse:

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

Umgebungsvariablen

.envBash
# Keine speziellen Umgebungsvariablen für Zenovay erforderlich!
# Der Tracking-Code ist direkt im Script-Tag eingebettet.
# Ersetzen Sie YOUR_TRACKING_CODE in index.html durch Ihren tatsächlichen
# Tracking-Code aus dem Zenovay-Dashboard (app.zenovay.com).

Finden Sie Ihren Tracking-Code in der App unter Domains, wählen Sie Ihre Website aus und öffnen Sie dann den Tab Allgemein (die Tracking-Script-Karte).

Ereignisse mit Hook verfolgen

Verwenden Sie den useZenovay-Hook zum Verfolgen benutzerdefinierter Ereignisse:

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

Button-Klicks verfolgen

Verfolgen Sie Benutzerinteraktionen mit Schaltflächen:

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

Seitenaufrufe verfolgen

Verfolgen Sie Seitenaufrufe automatisch mit 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>
);
}

Benutzer identifizieren

Identifizieren Sie Benutzer, wenn sie sich anmelden:

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

Formularübermittlungen verfolgen

Verfolgen Sie Formularinteraktionen und Abschlüsse:

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

TypeScript-Unterstützung

Fügen Sie Typdeklarationen für das globale zenovay-Objekt hinzu:

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

export {};

Testen in der Entwicklung

Sie können überprüfen, ob Ereignisse versendet werden, indem Sie den Registerkarte "Netzwerk" in den Entwicklertools Ihres Browsers auf Anfragen an api.zenovay.com überprüfen. Das Zenovay-Dashboard bietet auch Echtzeit-Ereignisüberwachung.

Stellen Sie sicher, dass Sie YOUR_TRACKING_CODE in index.html durch Ihren tatsächlichen Tracking-Code aus dem Zenovay-Dashboard ersetzen.

Nächste Schritte

Ihre React-App wird jetzt mit Zenovay verfolgt! Sehen Sie sich Ihre Analysen im Dashboard an.

Weitere Informationen:

War diese Seite hilfreich?