Google Analytics 4 es diferente de pre ga 4. react-ga aún no admite esto. https://github.com/react-ga/react-ga/issues/460

Es posible que deba hacer esto manualmente https://support.google.com/analytics/answer/9325020 https://developers.google.com/analytics/devguides/collection/ga4/tag-guide

El código que ingresaste en el ejemplo, G-XXXXXXXXXX , se refiere al nuevo Google Analytics 4 que, al ser un sistema diferente al anterior, no funciona (todavía) con ese complemento.

Entonces puede seguir las instrucciones mencionadas en la respuesta de @Shyam o (y lo sugiero porque GA4 está demasiado inmaduro en este momento) cree una propiedad de tipo Universal Analytics y use su ID (UA-XXXXX-X) con el complemento que indicó . Puede encontrarlo haciendo clic en Show advanced options (cuando crea una nueva propiedad):

.. react-ga no funciona con Google Analytics 4.

Use ga-4-react en su lugar: https://github.com/unrealmanu/ga-4-react

 npm i ga-4-react

Añadiendo

 import GA4React from "ga-4-react"; const ga4react = new GA4React("G-XXXXXXXXXX"); ga4react.initialize().then().catch()

Gracias a los comentarios actualicé un poco este post. Agregué un try/catch (para evitar bloqueos de AddBlocker) y un setTimeout. El método ".catch ()" debe rastrearse hasta "ga4react.initialize ()" para manejar los errores dentro de la promesa de inicialización. Los sistemas de análisis no deben cargarse al comienzo de la carga de una página. Las aplicaciones React son en su mayoría aplicaciones de una sola página, por lo que este código solo se carga una vez (si es necesario, puede reemplazar "4000" milisegundos por "0").

 import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import GA4React from "ga-4-react"; ReactDOM.render(<App />, document.getElementById("root")); try { setTimeout(_ => { const ga4react = new GA4React("G-XXXXXXXXXX"); ga4react.initialize().catch(err => console.error(err)); }, 4000); } catch (err) { console.error(err); } // G-XXXXXXXXXX is your MESS-ID from Google Analytics

Cómo encontrar el MESS-ID en Google Analytics 4 (nuevas) propiedades => https://analyticshelp.io/blog/google-analytics-property-tracking-id/

Hay 2 versiones de Google Analytics

1. Google Analytics 4 (el actualizado)
2. Universal Analytics (el más antiguo)

react-ga funciona bien con Universal Analytics, ya que toma la identificación de seguimiento para inicializar la conexión entre reaccionar y Google Analytics.

El problema es que cada vez que un usuario crea una nueva cuenta, GA4 se ofrece de forma predeterminada. Pero el GA4 no tiene el ID de seguimiento requerido. GA4 tiene el ID de medición pero el react-ga no lo quiere. Por lo tanto, necesitamos el ID de seguimiento para configurar el react-ga en nuestra aplicación de reacción.

Por lo tanto, la solución es: "Degradar de GA4 a Universal Analytics o crear una propiedad que los contenga a ambos como en GA4 y Universal Analytics juntos".

Recomiendo ver los siguientes videos:

GA4 frente a Universal Analytics: https://www.youtube.com/watch?v=Y6WxUEk6clw

Cómo degradar o conservar ambos: https://www.youtube.com/watch?v=jRmb0jMNUKU

Es posible que desee echar un vistazo a este paquete: https://www.npmjs.com/package/react-ga4

Ofrece la misma API que el react-ga normal. Así que simplemente cambie el nombre de su paquete de react-ga a react-ga4 y debería funcionar.

¡Lo probé yo mismo y funciona muy bien!

react-ga no funciona con GA-4. También diré que en los problemas de react-ga , el propietario ha dicho que a menos que alguien cree un PR, no tiene la intención de agregar soporte GA-4. El proyecto tampoco está bien mantenido.

En teoría, podría crear una propiedad universal en el panel de administración de GA para la compatibilidad con versiones anteriores de GA. En ese momento, podría usar react-ga , pero su mejor opción es usar ga-4-react en su lugar: https://github.com/unrealmanu/ga-4-react

 npm i ga-4-react

...

Agregaré a la respuesta de @TG___. El código que proporcionó en su respuesta es un buen comienzo, pero mencionaré que generalmente bloquea la aplicación si alguien tiene un bloqueador de anuncios (el bloqueador de anuncios bloquea los puntos finales de solicitud de análisis, no maneja errores, etc.).

ERROR: Error al cargar con la fuente "https://www.google-analytics.com/analytics.js"

... A continuación se muestra una expansión de su código para usar la promesa que ga4react.initialize() . De esta manera, básicamente puede detectar si la secuencia de comandos no se cargó y, por lo tanto, derivar si el usuario tiene un bloqueador de anuncios que impide que se cargue la secuencia de comandos de GA. En mi código de ejemplo, simplemente lo ignoro y cargo la aplicación... en otros escenarios, supongo que podría invocar un modal para decirles que lo deshabiliten (por supuesto, eso vendría con un código adicional).

Añadiendo

 await ga4react.initialize()

a su index.js en src GA-4 se iniciará y agregará una vista de página. Funciona también con react-router sin agregar ningún código. Por la Promesa (esperar), debe envolverlo en una función asíncrona (a continuación como cierre).

 import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; const ga4react = new GA4React("G-XXXXXXXXXX"); (async _ => { await ga4react.initialize() .then(res => console.log("Analytics Success.")) .catch(err => console.log("Analytics Failure.")) .finally(() => { ReactDOM.render( <React.StrictMode> <Router> <App /> </Router> </React.StrictMode>, document.getElementById('root') ); }); })();