React-Integration

Integrieren Sie Zenovay-Analysen in Ihre React-Anwendung mit automatischem Seiten-Tracking, benutzerdefinierten Events und einem eigenen Hook für die globale window.zenovay-Funktion.

Installation

Fügen Sie das Zenovay-Tracking-Script zu Ihrer index.html hinzu:

<script
  defer
  data-tracking-code="YOUR_TRACKING_CODE"
  src="https://api.zenovay.com/z.js"
></script>

Es wird kein npm-Paket benötigt. Das Script erfasst automatisch Seitenaufrufe und stellt die globale window.zenovay-Funktion für benutzerdefiniertes Tracking bereit.

Grundlegende Einrichtung

Einen useZenovay-Hook erstellen

Erstellen Sie einen benutzerdefinierten Hook, der die globale window.zenovay-Funktion kapselt:

// hooks/useZenovay.js
export function useZenovay() {
  const trackEvent = (name, properties) => {
    if (window.zenovay) {
      window.zenovay('track', name, properties);
    }
  };

  const trackGoal = (name, properties) => {
    if (window.zenovay) {
      window.zenovay('goal', name, properties);
    }
  };

  const trackPageview = () => {
    if (window.zenovay) {
      window.zenovay('page');
    }
  };

  const trackRevenue = (amount, currency, meta) => {
    if (window.zenovay) {
      window.zenovay('revenue', amount, currency, meta);
    }
  };

  const identify = (userId, properties) => {
    if (window.zenovay) {
      window.zenovay('identify', userId, properties);
    }
  };

  return { trackEvent, trackGoal, trackPageview, trackRevenue, identify };
}

Automatisches Seiten-Tracking

Mit React Router

Das Zenovay-Script erfasst automatisch den ersten Seitenaufruf. Für SPA-Routenwechsel mit React Router tracken Sie Seitenaufrufe bei Routenänderungen:

import { BrowserRouter, useLocation } from 'react-router-dom';
import { useEffect } from 'react';

function PageTracker() {
  const location = useLocation();

  useEffect(() => {
    if (window.zenovay) {
      window.zenovay('page');
    }
  }, [location.pathname]);

  return null;
}

function App() {
  return (
    <BrowserRouter>
      <PageTracker />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/pricing" element={<Pricing />} />
      </Routes>
    </BrowserRouter>
  );
}

Seitenaufrufe werden automatisch bei Routenwechseln erfasst.

Benutzerdefinierte Events

useZenovay-Hook

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

function SignupButton() {
  const { trackEvent } = useZenovay();

  const handleSignup = () => {
    // Registrierungsklick tracken
    trackEvent('signup_click', {
      plan: 'pro',
      source: 'pricing_page'
    });

    // Mit der Registrierungslogik fortfahren
    performSignup();
  };

  return (
    <button onClick={handleSignup}>
      Kostenlos ausprobieren
    </button>
  );
}

Track-Event-Funktion

const { trackEvent } = useZenovay();

// Einfaches Event
trackEvent('button_click');

// Mit Eigenschaften
trackEvent('purchase', {
  product_id: 'SKU-001',
  value: 99.99,
  currency: 'USD'
});

// Mit Wert
trackEvent('download', { file: 'guide.pdf' });

Ziel-Tracking

Zielerreichung tracken

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

function CheckoutSuccess({ order }) {
  const { trackGoal } = useZenovay();

  useEffect(() => {
    trackGoal('purchase', {
      value: order.total,
      order_id: order.id,
      products: order.items
    });
  }, [order]);

  return <div>Vielen Dank für Ihre Bestellung!</div>;
}

Benutzeridentifikation

Benutzer identifizieren

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

function UserIdentifier() {
  const { user, isAuthenticated } = useAuth();
  const { identify } = useZenovay();

  useEffect(() => {
    if (isAuthenticated && user) {
      identify(user.id, {
        email: user.email,
        name: user.name,
        plan: user.subscription
      });
    }
  }, [user, isAuthenticated]);

  return null;
}

Im Authentifizierungsablauf

async function handleLogin(credentials) {
  const user = await login(credentials);

  // Nach dem Login identifizieren
  if (window.zenovay) {
    window.zenovay('identify', user.id, {
      email: user.email
    });
  }

  navigate('/dashboard');
}

Umsatz-Tracking

Umsätze tracken

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

function OrderConfirmation({ order }) {
  const { trackRevenue } = useZenovay();

  useEffect(() => {
    trackRevenue(order.total, 'USD', {
      order_id: order.id,
      items: order.items.map(item => ({
        id: item.sku,
        name: item.name,
        price: item.price,
        quantity: item.quantity
      }))
    });
  }, [order]);

  return (
    <div>
      <h1>Bestellung bestätigt!</h1>
      <p>Bestellung #{order.id}</p>
    </div>
  );
}

Event-Tracking-Komponenten

Trackbarer Button

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

function TrackableButton({ event, eventData, children, ...props }) {
  const { trackEvent } = useZenovay();

  const handleClick = (e) => {
    trackEvent(event, eventData);
    props.onClick?.(e);
  };

  return (
    <button {...props} onClick={handleClick}>
      {children}
    </button>
  );
}

// Verwendung
<TrackableButton
  event="cta_click"
  eventData={{ location: 'hero' }}
  onClick={handleSignup}
>
  Erste Schritte
</TrackableButton>

Beim Mounten tracken

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

function TrackOnMount({ event, eventData }) {
  const { trackEvent } = useZenovay();

  useEffect(() => {
    trackEvent(event, eventData);
  }, []);

  return null;
}

// Verwendung
<TrackOnMount
  event="pricing_viewed"
  eventData={{ referrer: document.referrer }}
/>

TypeScript-Unterstützung

Typen

// types/zenovay.d.ts
interface ZenovayFunction {
  (command: 'track', name: string, properties?: Record<string, unknown>): void;
  (command: 'identify', userId: string, traits?: Record<string, unknown>): void;
  (command: 'goal', name: string, properties?: Record<string, unknown>): void;
  (command: 'page'): void;
  (command: 'revenue', amount: number, currency: string, meta?: Record<string, unknown>): void;
}

declare global {
  interface Window {
    zenovay: ZenovayFunction;
  }
}

export {};

Typisierter Hook

// hooks/useZenovay.ts
export function useZenovay() {
  const trackEvent = (name: string, properties?: Record<string, unknown>) => {
    if (window.zenovay) {
      window.zenovay('track', name, properties);
    }
  };

  const trackGoal = (name: string, properties?: Record<string, unknown>) => {
    if (window.zenovay) {
      window.zenovay('goal', name, properties);
    }
  };

  const identify = (userId: string, properties?: Record<string, unknown>) => {
    if (window.zenovay) {
      window.zenovay('identify', userId, properties);
    }
  };

  return { trackEvent, trackGoal, identify };
}

Serverseitiges Rendering

SSR-Probleme vermeiden

Die window.zenovay-Funktion ist nur im Browser verfügbar. Prüfen Sie dies immer vor der Verwendung:

import { useEffect, useState } from 'react';

function ZenovayWrapper({ children }) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  // Erst nach dem Mounten der Komponente tracken (clientseitig)
  if (!mounted) {
    return children;
  }

  return children;
}

Testen

Den Hook mocken

// test-utils.jsx
import { vi } from 'vitest';

export const mockZenovay = {
  trackEvent: vi.fn(),
  trackGoal: vi.fn(),
  identify: vi.fn(),
  trackPageview: vi.fn(),
  trackRevenue: vi.fn()
};

vi.mock('./hooks/useZenovay', () => ({
  useZenovay: () => mockZenovay
}));

Testbeispiel

import { render, fireEvent, screen } from '@testing-library/react';
import { mockZenovay } from './test-utils';
import SignupButton from './SignupButton';

test('trackt Registrierungsklick', () => {
  render(<SignupButton />);

  fireEvent.click(screen.getByText('Kostenlos ausprobieren'));

  expect(mockZenovay.trackEvent).toHaveBeenCalledWith('signup_click', expect.any(Object));
});

Häufige Muster

E-Commerce-Tracking

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

function ProductPage({ product }) {
  const { trackEvent } = useZenovay();

  useEffect(() => {
    trackEvent('product_viewed', {
      product_id: product.id,
      product_name: product.name,
      price: product.price,
      category: product.category
    });
  }, [product.id]);

  const handleAddToCart = () => {
    trackEvent('add_to_cart', {
      product_id: product.id,
      price: product.price,
      quantity: 1
    });
  };

  return (
    <div>
      <h1>{product.name}</h1>
      <button onClick={handleAddToCart}>In den Warenkorb</button>
    </div>
  );
}

Formular-Tracking

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

function ContactForm() {
  const { trackEvent, trackGoal } = useZenovay();

  const handleSubmit = async (data) => {
    trackEvent('form_submitted', {
      form_name: 'contact',
      has_phone: !!data.phone
    });

    await submitForm(data);

    trackGoal('contact_form');
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Formularfelder */}
    </form>
  );
}

Fehlerbehebung

Events werden nicht getrackt

Überprüfen Sie:

Das Script-Tag ist in Ihrer index.html vorhanden
Der Tracking-Code ist korrekt
Kein Ad-Blocker blockiert das Script
Die Konsole auf Fehler

Fehlende Seitenaufrufe