4 Min. Lesedauer

React-Integration

Fügen Sie Zenovay Analytics zu Ihrer React-Anwendung mit einem einfachen Script-Tag hinzu. Kein npm-Paket erforderlich.

Überblick

Das Zenovay-Tracking-Skript funktioniert nahtlos mit React-Anwendungen. Fügen Sie den Script-Tag zu Ihrer HTML-Datei hinzu und verwenden Sie dann window.zenovay-Aufrufe in Ihren Komponenten für benutzerdefiniertes Ereignis-Tracking.

Installation

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

<!-- index.html (Vite) or public/index.html (Create React App) -->
<script defer data-tracking-code="YOUR_TRACKING_CODE" src="https://api.zenovay.com/z.js"></script>

Platzieren Sie den Script-Tag im <body> Ihrer HTML-Datei. Das Attribut defer stellt sicher, dass er geladen wird, ohne das Seitenrendering zu blockieren.

Einrichtung

Skript zu HTML hinzufügen

Für Vite-Projekte fügen Sie zu index.html hinzu:

<!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>

Einen Helfer-Hook erstellen

Erstellen Sie einen wiederverwendbaren Hook, um auf Zenovay-Tracking in Ihren Komponenten zuzugreifen:

// hooks/useZenovay.ts
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 trackPurchase = (data: { amount: number; currency: string; product: string }) => {
    if (window.zenovay) {
      window.zenovay('revenue', data.amount, data.currency);
    }
  };

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

Seitenaufrufe verfolgen

Seitenaufrufe automatisch mit React Router verfolgen:

import { 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,
        title: document.title,
      });
    }
  }, [location.pathname]);

  return null;
}

Ereignisse verfolgen

useZenovay-Hook

Verfolgen Sie benutzerdefinierte Ereignisse mit dem useZenovay-Hook:

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

function Button() {
  const { track } = useZenovay();

  const handleClick = () => {
    track('button_click', {
      buttonName: 'signup',
      location: 'hero'
    });
  };

  return <button onClick={handleClick}>Sign Up</button>;
}

Verfolgbare Button-Komponente

Erstellen Sie eine wiederverwendbare verfolgbare Button-Komponente:

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

interface TrackableButtonProps {
  eventName: string;
  eventData?: Record<string, any>;
  children: React.ReactNode;
  onClick?: (e: React.MouseEvent) => void;
}

function TrackableButton({ eventName, eventData, children, onClick, ...props }: TrackableButtonProps) {
  const { track } = useZenovay();

  const handleClick = (e: React.MouseEvent) => {
    track(eventName, eventData);
    onClick?.(e);
  };

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

// Usage:
<TrackableButton eventName="button_click" eventData={{ buttonName: 'signup' }}>
  Sign Up
</TrackableButton>

TypeScript-Unterstützung

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

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

export {};

Sie können auch typsicheres Ereignis-Tracking erstellen:

interface CustomEvents {
  button_click: {
    buttonName: string;
    location: string;
  };
  form_submit: {
    formId: string;
  };
}

// Type-safe tracking function
function trackEvent<K extends keyof CustomEvents>(eventName: K, data: CustomEvents[K]) {
  if (window.zenovay) {
    window.zenovay('track',eventName, data);
  }
}

// Type-safe event tracking
trackEvent('button_click', {
  buttonName: 'signup',
  location: 'hero'
});

Erweiterte Funktionen

Benutzer identifizieren

Verknüpfen Sie Ereignisse mit bestimmten Benutzern:

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

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

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

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

Ziele verfolgen

Verfolgen Sie Konversionsziele:

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

function SignupComplete() {
  const { trackGoal } = useZenovay();

  useEffect(() => {
    trackGoal('signup_completed', {
      source: 'organic',
      value: 99.00
    });
  }, []);

  return <div>Welcome aboard!</div>;
}

Next.js-Integration

Für Next.js-Anwendungen lesen Sie bitte den Next.js Quickstart-Leitfaden.

Brauchen Sie Hilfe? Sehen Sie sich unsere React-Beispiele an oder kontaktieren Sie [email protected].