TrackFox logoTrackFoxDocs
Dashboard
Docs/INSTALLATION GUIDES/React + Vite

React + Vite Installation

Installing TrackFox on your React + Vite website is quick and easy. You can use our CLI for automatic installation or manually add the tracking script to your index.html.

Quick Install with CLI

The fastest way to get started is using the TrackFox CLI:

npx trackfox add

The CLI will automatically detect your React + Vite setup and install the tracking script in the right place. Learn more →

Manual Installation

Step 1: Get Your Tracking Script

  1. Log in to your TrackFox dashboard
  2. Click on the website dropdown in the top navigation
  3. Select "Site Settings" from the dropdown menu
  4. In the General tab, copy your unique tracking script

Your tracking script will look like this:

<script
  defer
  src="https://trackfox.app/script.js"
  data-website-id="your-website-id-here"
  data-domain="yourdomain.com"
></script>

Step 2: Add Script to index.html

Navigate to index.html in your project root and add the tracking script inside the <head> tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>

    <!-- TrackFox Analytics -->
    <script
      defer
      src="https://trackfox.app/script.js"
      data-website-id="your-website-id-here"
      data-domain="yourdomain.com"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Step 3: Verify Installation

  1. Save your changes and restart your Vite development server
  2. Visit your website in a browser
  3. Return to your TrackFox dashboard
  4. Use the "Verify Installation" button in Site Settings
  5. Confirm that page views are being tracked in your dashboard

Custom Event Tracking

Once the base script is installed, you can track custom events:

import { useState } from 'react'

export default function SignupForm() {
  const [email, setEmail] = useState('')

  const handleSignup = () => {
    window?.trackfox('signup', {
      email: email
    })
  }

  const handlePurchase = (amount: number, email: string) => {
    window?.trackfox('payment', {
      email: email,
      amnt: amount // Amount in cents
    })
  }

  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email"
      />
      <button onClick={handleSignup}>Sign Up</button>
    </div>
  )
}

Environment Variables

Create a .env file with your TrackFox configuration:

VITE_TRACKFOX_WEBSITE_ID=your_website_id
VITE_TRACKFOX_DOMAIN=your_domain.com

Unfortunately, Vite doesn't support environment variables in index.html directly. You can either:

Option 1: Use the hardcoded values in index.html (recommended for simplicity)

Option 2: Create a script component to dynamically inject the tracking script:

// src/components/TrackFoxScript.tsx
import { useEffect } from "react";

export default function TrackFoxScript() {
  useEffect(() => {
    const script = document.createElement("script");
    script.defer = true;
    script.src = "https://trackfox.app/script.js";
    script.setAttribute(
      "data-website-id",
      import.meta.env.VITE_TRACKFOX_WEBSITE_ID
    );
    script.setAttribute("data-domain", import.meta.env.VITE_TRACKFOX_DOMAIN);
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, []);

  return null;
}

Then add it to your App:

// src/App.tsx
import TrackFoxScript from './components/TrackFoxScript'

function App() {
  return (
    <>
      <TrackFoxScript />
      {/* Your app content */}
    </>
  )
}

export default App

TypeScript Support

Add type definitions for better TypeScript support:

// src/vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_TRACKFOX_WEBSITE_ID: string;
  readonly VITE_TRACKFOX_DOMAIN: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

declare global {
  interface Window {
    trackfox: (action: string, ...args: any[]) => void;
  }
}

export {};

React Router Integration

If you're using React Router, the TrackFox script will automatically track route changes. No additional configuration needed!

Testing

Test your installation by:

  1. Opening your website in a browser
  2. Checking the Network tab for requests to trackfox.app
  3. Verifying data appears in your TrackFox dashboard

Troubleshooting

Common issues and solutions:

  • Script not loading: Check your website ID and domain configuration
  • No data appearing: Ensure the script is loaded before page navigation
  • TypeScript errors: Add the type definitions above
  • Environment variables not working: Remember that Vite env vars must start with VITE_

Important Notes

Important: Make sure to replace your-website-id-here and yourdomain.com with your actual website ID and domain from the TrackFox dashboard.

Next Steps

Now that you have TrackFox installed on your React + Vite website:

Need help? Contact us for assistance.

Suggest features? We'd love your feedback