React Installation

theBizness.ai Analytics

⚛

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 function to remove script when component unmounts
    return () => {
      const existingScript = document.querySelector('[data-website-id="your-website-id"]');
      if (existingScript) {
        existingScript.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

Environment Variables

Store your configuration securely

Create .env File

# .env
REACT_APP_WEBSITE_ID=your-website-id
REACT_APP_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);
    
    return () => {
      const scriptToRemove = document.querySelector('[data-website-id]');
      if (scriptToRemove) {
        scriptToRemove.remove();
      }
    };
  }, [websiteId, domain]);
};

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

function App() {
  useAnalytics(process.env.REACT_APP_WEBSITE_ID, process.env.REACT_APP_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 React app
2. Open theBizness.ai dashboard
3. Check real-time visitor count
4. Verify page views are tracked

Troubleshooting

• Check browser console for JavaScript errors
• Verify your website ID is correct
• Make sure the domain matches exactly
• For SPAs, consider using React Router integration

🎉 Installation Complete!

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

🛣️ Router Integration

Set up automatic page tracking for React Router

📊 Custom Events

Track button clicks, form submissions, and more

💰 Revenue Tracking

Connect your payment system for attribution