React provides flexible ways to add tracking scripts, either through the useEffect hook for dynamic loading or directly in your HTML template for immediate loading.

Add tracking script to your React app

The recommended approach is to add the script dynamically in your root component using React's useEffect hook for proper cleanup and lifecycle management.

Open your root component file, typically src/App.jsx
Import useEffect from React
Add the script loading logic inside useEffect:

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.async = true;
    script.defer = true;
    script.setAttribute('data-affonso', 'YOUR_PUBLIC_PROGRAM_ID');
    script.setAttribute('data-cookie_duration', 'YOUR_COOKIE_DURATION');
    script.src = 'https://affonso.io/js/pixel.min.js';
    document.head.appendChild(script);

    return () => {
      // Cleanup on unmount
      if (document.head.contains(script)) {
        document.head.removeChild(script);
      }
    };
  }, []);

  return <div className='App'>{/* Your components */}</div>;
}

export default App;