4 min read

React Integration

Add Zenovay analytics to your React application with a simple script tag. No npm package required.

Overview

The Zenovay tracking script works seamlessly with React applications. Add the script tag to your HTML, then use window.zenovay calls in your components for custom event tracking.

Installation

Add the Zenovay tracking script to your HTML file:

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

Place the script tag in the <body> of your HTML file. The defer attribute ensures it loads without blocking page rendering.

Setup

Add Script to HTML

For Vite projects, add to index.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>

Create a Helper Hook

Create a reusable hook to access Zenovay tracking in your components:

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

Track Page Views

Automatically track page views with React Router:

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

Tracking Events

useZenovay Hook

Track custom events with the 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>;
}

Trackable Button Component

Create a reusable trackable button component:

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 Support

Add type declarations for the global zenovay object:

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

export {};

You can also create type-safe event tracking:

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

Advanced Features

Identify Users

Associate events with specific users:

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

Track Goals

Track conversion goals:

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

For Next.js applications, see the Next.js Quickstart guide.

Need help? Check out our React Examples or contact [email protected].