Estoy tratando de agregar Google Analytics a una aplicación web React.
Sé cómo hacerlo en sitios HTML/CSS/JS y también lo he integrado en una aplicación AngularJS. Pero, no estoy muy seguro de cómo hacerlo cuando se trata de reaccionar.
Con HTML/CSS/JS, acababa de agregarlo a cada página.
Lo que hice con AngularJS fue agregar secuencias de comandos GTM y GA a index.html y agregar etiquetas UA a los divs HTML (y botones) para obtener clics.
¿Cómo puedo hacer eso con React?
¡Por favor ayuda!
Actualización: febrero de 2019
Como vi que esta pregunta está siendo buscada mucho, decidí ampliar mi explicación.
Para agregar Google Analytics a React, recomiendo usar React-GA.
Agregar ejecutando:
npm install react-ga --save
Inicialización:
En un componente raíz, inicialice ejecutando:
import ReactGA from 'react-ga'; ReactGA.initialize('Your Unique ID');Para reportar vista de página:
ReactGA.pageview(window.location.pathname + window.location.search);Para reportar un evento personalizado:
ReactGA.event({ category: 'User', action: 'Sent message' });Se pueden encontrar más instrucciones en el repositorio de github
La mejor práctica para este IMO es usar react-ga. Eche un vistazo al representante de github
Si prefiere no usar un paquete, así es como puede funcionar en una aplicación de reacción. Agregue el "gtag" en index.html
<!-- index.html --> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", "<GA-PROPERTYID>"); </script>En la acción de envío del formulario de inicio de sesión, active el evento
window.gtag("event", "login", { event_category: "access", event_label: "login" });Sin usar un paquete, así es como lo haría:
En su index.js (en el método de render ):
{/* Global site tag (gtag.js) - Google Analytics */} <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID" /> <script>{injectGA()}</script>Y fuera de la clase:
const injectGA = () => { if (typeof window == 'undefined') { return; } window.dataLayer = window.dataLayer || []; function gtag() { window.dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'YOUR_TRACKING_ID'); };