React

React integration

Add theBizness.ai analytics to your React application with multiple implementation options.

Setup time

3 minutes

Difficulty

Easy

Performance

Lightweight

Choose your implementation method

useEffect implementation

Simple and direct approach using React hooks (recommended for most projects)

Add to your main component

Add this code to your App.js or main component:

// App.js or your main component
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Create and append the tracking script
    const script = document.createElement('script');
    script.async = true;
    script.defer = true;
    script.setAttribute('data-website-id', 'your-website-id');
    script.setAttribute('data-domain', 'yourdomain.com');
    script.src = 'https://thebizness.ai/js/script.js';
    
    document.head.appendChild(script);
    
    // Cleanup removes the exact element this effect added (safe under StrictMode re-mounts)
    return () => {
      script.remove();
    };
  }, []);

  return (
    <div className="App">
      {/* Your app content */}
    </div>
  );
}

export default App;

Why this works

• Script loads once when component mounts
• Cleanup prevents memory leaks
• Works with any React routing solution

React Helmet implementation

Declarative approach using React Helmet for better SEO control

Install React Helmet

npm install react-helmet-async

Add to your app

// First install react-helmet-async
// npm install react-helmet-async

// App.js
import { HelmetProvider } from 'react-helmet-async';
import { Helmet } from 'react-helmet-async';

function App() {
  return (
    <HelmetProvider>
      <div className="App">
        <Helmet>
          <script
            async
            defer
            data-website-id="your-website-id"
            data-domain="yourdomain.com"
            src="https://thebizness.ai/js/script.js"
          />
        </Helmet>
        {/* Your app content */}
      </div>
    </HelmetProvider>
  );
}

export default App;

Dedicated component

Reusable component approach for better organization

Create the analytics component

// components/Analytics.js
import { useEffect } from 'react';

const Analytics = ({ websiteId, domain }) => {
  useEffect(() => {
    const script = document.createElement('script');
    script.async = true;
    script.defer = true;
    script.setAttribute('data-website-id', websiteId);
    script.setAttribute('data-domain', domain);
    script.src = 'https://thebizness.ai/js/script.js';
    
    document.head.appendChild(script);
    
    // Remove only the element this component added
    return () => {
      script.remove();
    };
  }, [websiteId, domain]);

  return null; // This component doesn't render anything
};

// Usage in App.js
import Analytics from './components/Analytics';

function App() {
  return (
    <div className="App">
      <Analytics 
        websiteId="your-website-id" 
        domain="yourdomain.com" 
      />
      {/* Your app content */}
    </div>
  );
}

Environment variables

Keep your configuration in environment variables so each environment can use its own

Create the .env file

The examples use Vite, the default for new React projects. Vite exposes variables that start with VITE_ through import.meta.env. Create React App reads REACT_APP_* variables from process.env instead, so rename the variables to that form there. Restart the dev server after editing .env.

# .env (Vite)
VITE_WEBSITE_ID=your-website-id
VITE_DOMAIN=yourdomain.com

Custom hook (advanced)

// hooks/useAnalytics.js
import { useEffect } from 'react';

export const useAnalytics = (websiteId, domain) => {
  useEffect(() => {
    if (!websiteId || !domain) return;
    
    // Check if script already exists
    const existingScript = document.querySelector('[data-website-id]');
    if (existingScript) return;
    
    const script = document.createElement('script');
    script.async = true;
    script.defer = true;
    script.setAttribute('data-website-id', websiteId);
    script.setAttribute('data-domain', domain);
    script.src = 'https://thebizness.ai/js/script.js';
    
    document.head.appendChild(script);
    
    // Remove only the element this hook added
    return () => {
      script.remove();
    };
  }, [websiteId, domain]);
};

// Usage in App.js
import { useAnalytics } from './hooks/useAnalytics';

function App() {
  useAnalytics(import.meta.env.VITE_WEBSITE_ID, import.meta.env.VITE_DOMAIN);
  
  return (
    <div className="App">
      {/* Your app content */}
    </div>
  );
}

Verify installation

Test that analytics are working correctly

Browser check

1. Open browser DevTools (F12)
2. Go to Network tab
3. Reload your page
4. Look for script.js request

Dashboard check

1. Navigate your deployed React app on a public domain
2. Open theBizness.ai dashboard
3. Open the Overview and confirm today's pageviews increase after a reload (or press Refresh data)
4. Navigate to another page and reload the Overview to confirm that visit is counted too

Troubleshooting

• The tracker does nothing on localhost, *.local, *.test, private IP addresses or file:// pages. It logs a "Tracking disabled on localhost" warning in the console. Verify on a publicly reachable domain.
• Check browser console for JavaScript errors
• Verify your website ID is correct
• Make sure the domain matches exactly
• Route changes in single-page apps are tracked automatically, so no router integration is needed
• For hash routes without a slash (#about), add data-hash-routing="true" to the script tag; they appear as /#/about in your reports
• If your site sends a Content-Security-Policy header, allow https://thebizness.ai in script-src and connect-src. Blocked requests show only as CSP errors in the browser console

Installation complete

Your React application is now tracking visitor analytics. Here's what to explore next:

Route tracking

Route changes are tracked automatically, so most apps need no extra setup

Custom events

Track button clicks, form submissions, and more

Revenue tracking

Connect your payment system for attribution

Set up event tracking View dashboard