Soy Miguel Alonso, junior en algunas cosas, trabajador con dilatada experiencia en el “soft metal” 😉 y junior en el apasionante mundo de los datos. Para mi primera vez aquí, vengo a contaros cómo introducir GTM en una app de React para enviar datos a Google Analytics 4.
¿Qué es React?
Para comenzar debemos saber lo que es React, según wikipedia: React (también llamada React.js o ReactJS) es una biblioteca JavaScript de código abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página.
Básicamente, es una biblioteca que nos facilita la vida para poder mostrar nuestra página por medio de componentes, por lo tanto nos gusta, todo lo que sea facilitar es guay.
¿Por qué utilizar GTM?
Lo primero es explicar qué es GTM. Los de Google venden esta herramienta como un sistema para «gestionar todas tus etiquetas sin necesidad de editar ningún código. Google Tag Manager te permite gestionar etiquetas de forma simple, fiable, integrada y gratuita»
Es un gestionador de etiquetas o mediador, para colocar entre nuestra página y nuestras herramientas de marketing y analítica. GTM expone información de nuestra web a través de un json llamado dataLayer. Su gran ventaja es que podemos incluir sólo el código de GTM en la web y a partir de ahí enviar los datos a cualquier herramienta de analítica o marketing de forma «sencilla». Y digo «sencilla» entre comillas, porque todo tiene su intríngulis, pero también es guay.
Introducir GTM en una app de React
Vamos a intentar hacer un paso a paso de como introducir GTM en una app de React.
Para este post yo voy utilizar una sencilla página web creada por mi en React, que es un portal de opiniones dirigido a usuarios no digitales, de sencillo funcionamiento y muy intuitiva.
Vamos a comenzar integrando el contenedor y enviando eventos de tipo “page-view” cada vez que se visualice un contenido de la App.
Crear una cuenta de GTM
Para comenzar vamos a nuestra cuenta de GTM y si no la tenemos, pues la creamos, facil y sencillo.
Para acceder a GTM puedes hacerlo desde aquí.
Creamos un contenedor para nuestra página y lo configuramos. Debemos rellenar los siguientes campos
- Nombre de cuenta
- País
- Nombre del contenedor
- Plataforma objetivo (seleccionamos “Sitio web” por el caso que estamos formulando)
Integrar GTM en la app de React
Ahora vamos a colocar el código que nos proporciona GTM en nuestro código de React.
Debemos seguir los pasos que nos dice GTM, copia y pega el primer código en la etiqueta <head> y el segundo código en la etiqueta <body> de tu index.html, eso si, justo después de la etiqueta, esto es importante.
Crear una cuenta de GA4
Seguidamente nos vamos a Google Analytics 4 y si no tenemos cuenta, pues nos la creamos. Si ya la tenemos, tendremos que crear una propiedad nueva desde Administrar, todo fácil y sencillo siguiendo los pasos que nos dan.
Tienes que seguir los pasos en incluir la información que te pide, básicamente un nombre para la propiedad, país, horario y algunos datos más. Finalmente te pedirá que selecciones el tipo de flujo de datos, que en este caso se trata de una web.
Ahora tendremos la información del flujo configurado. Lo más importante aquí es tener localizado el ID DE MEDICIÓN, el cual usaremos para configurar GTM y decirle a qué propiedad de GA4 vamos a enviar los datos.
Por defecto tenemos activado el “check” de medición mejorada; con esto recibiremos en GA4 algunos eventos básicos como las páginas vistas, el scroll o los clicks de salida de la web.
Configurar en GTM una etiqueta de configuración básica de GA4
Copiamos el ID de medición y vamos a GTM.
En etiquetas-nueva-configuración etiqueta, seleccionamos Google Analytics: configuración de GA4.
Y aquí colocamos el ID de medición que nos proporcionó GA4.
Hay un check seleccionado por defecto que activa el envío de una página vista a GA4 cada vez que se cargue la etiqueta de configuración. Lo dejamos así para que sólo con esta etiqueta ya podamos hacer seguimiento de qué contenidos han visto nuestros usuarios.
Para acabar de configurar la etiqueta sólo nos falta decirle cuándo se tiene que lanzar.
En la Activación seleccionamos “All Pages”, este es un activador por defecto que lanza la etiqueta cada vez que se carga una página.
El problema con React es lo que comentábamos al principio, que se trata de una aplicación con una sola página. Esto quiere decir, que sólo se lanzará la etiqueta de GA4 la primera vez que se cargue, pero no cuando el usuario navegue entre las distintas vistas de la aplicación.
Lanzando un evento personalizado de «page_view»
Para que esto funcione con React, vamos a crear un componente de React llamado «PageView«. Este componente utiliza dos hooks:
- «useLocation» del paquete «react-router-dom» para obtener la ubicación actual de la página.
- «useEffect» te permite ejecutar un código una vez que el componente se ha renderizado. En este caso, el código que incluimos es un push al dataLayer de GTM indicando que se ha visualizado una nueva vista de la aplicación.
A continuación podéis ver cómo sería el código del componente PageView, que en resumen lo que hace es enviar un evento page_view a GTM cada vez que se carga una vista nueva de nuestra aplicación de React.
Añadir un nuevo activador a la etiqueta de configuración de GA4
Para que la etiqueta que teníamos configurada se dispare con el evento page_view que enviamos a GTM, tenemos que configurar un activador nuevo de tipo “Evento personalizado”. Es muy importante que en «Nombre del evento» pongamos “page_view”, que es exactamente igual al nombre que hemos puesto en el datalayer de nuestro código.
Comprobando datos en GA4
Ahora si todo ha ido bien, vamos a GA4 y podremos ver la “magia”.
En los informes en tiempo real ya podemos ver nuestras interacciones dentro de “page_view”; y una vez que se consoliden los datos(24/48hr) podrás ver las visualizaciones de tus páginas en Informes-Interacción-Páginas y pantallas
Conclusiones
- Como hemos visto hasta ahora, es “sencillo” intercalar GTM entre nuestra aplicación en React y GA4, pero ¿es imprescindible este GTM?; yo creo que sí, no sería necesario para poder recoger nuestros datos en GA4, pero si queremos incorporar más herramientas de analítica si que sería imprescindible, ya que con GTM solo necesitaríamos colocar más etiquetas y no sería necesario volver a tocar el código.
- Uno de los problemas que nos encontramos con React es que crea aplicaciones de una sóla página, por lo que necesitamos integrar eventos personalizados para indicar que el usuario ha navegado a otra vista de la aplicación y recoger así los eventos de page_view de manera correcta.
- Con lo que os muestro en este post, sólo recogemos la información de los movimientos del usuario por la web. Si queremos, y vamos a querer, saber información más detallada como por ejemplo los botones que han pulsado, tenemos que incorporar más eventos personalizados en GTM y configurar nuevas etiquetas.
- Cuando empieces a soltarte con GTM vas a ver que aunque es una herramienta bastante sencilla puede volverse una locura si tienes muchas etiquetas. Os recomiendo que reviséis este fantástico artículo para que apliquéis buenas prácticas desde el principio. Además, puedes descargarte un contenedor de ejemplo, ¿qué más se puede pedir?
Miguel Alonso
Junior en algunas cosas. Delineante de formación, soldador de profesión y analizando datos por diversión. Un lema me acompaña desde mi juventud, "las esdrújulas siempre se acentúan".