3 Min. Lesedauer

React-Integration

Fügen Sie Zenovay-Analytics zu Ihrer React-Anwendung mit einer einfachen Hook-Implementierung hinzu.

Schnelle Einrichtung

Finden Sie Ihren Tracking-Code unter Domains → Ihre Website → Allgemein im Dashboard.

Tracking-Skript-Karte zeigt den React-Tab mit dem useEffect-Snippet und dem Tracking-Code — Ihr Tracking-Code befindet sich auf der Seite „Allgemein“ für jede Domain – verwenden Sie den React-Tab für das Snippet.

Fügen Sie das Tracking-Skript in Ihre Root-Komponente ein:

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;

Ersetzen Sie YOUR_TRACKING_CODE durch Ihren Tracking-Code aus dem Zenovay-Dashboard.

Custom Hook (empfohlen)

Für bessere Wiederverwendbarkeit erstellen Sie einen Custom Hook:

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

Verwenden Sie ihn dann in Ihrer App:

App.jsxJSX

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

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

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

export default App;

TypeScript-Unterstützung

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

First-Party-Tracking (Werbeblocker umgehen)

Verwenden Sie für bessere Genauigkeit First-Party-Tracking mit einer benutzerdefinierten Subdomain:

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;

First-Party-Tracking erfordert einen CNAME-DNS-Eintrag. Weitere Informationen finden Sie im First-Party-Tracking-Leitfaden.

Umgebungsvariablen

Speichern Sie Ihren Tracking-Code in Umgebungsvariablen:

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

Vite-Anwendungen

Verwenden Sie für Vite-Projekte 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>;
}

Überprüfung

Nach der Installation überprüfen Sie, ob das Tracking funktioniert:

Öffnen Sie Ihre Website in einem Browser
Öffnen Sie DevTools → Netzwerk-Tab
Suchen Sie nach Anfragen an api.zenovay.com oder Ihre First-Party-Domain
Überprüfen Sie Ihr Zenovay-Dashboard auf eingehende Daten

Troubleshooting

Skript wird nicht geladen?

Stellen Sie sicher, dass der Tracking-Code korrekt ist
Überprüfen Sie auf Content Security Policy (CSP) Probleme
Stellen Sie sicher, dass das Skript nicht von Werbeblockern blockiert wird

Keine Daten erscheinen?

Warten Sie ein paar Minuten, bis die Daten verarbeitet werden
Überprüfen Sie den Network-Tab auf erfolgreiche Anfragen
Stellen Sie sicher, dass Sie nicht localhost verwenden (es sei denn, der Debug-Modus ist aktiviert)