Introducir GTM en una app de React: ¿Quién me está tocando los botones?

Soy Miguel Alonso, junior en algunas cosas, y vamos a presentar la segunda entrega del post sobre Introducir GTM en una app de React. Ahora, como ya adelantamos en el post anterior, nos apetece mucho saber qué pasa con nuestros botones, ¿la gente los está usando? ¿quién me está tocando los botones? Para ello volveremos a trabajar en nuestra aplicación de React para añadir más etiquetado. Una vez más vamos a confiar en GTM para llegar a nuestro fin.

En este post seguiremos los siguientes pasos:

• Introduciremos el código necesario en nuestra app de React.
• Iremos a GTM para crear un activador, una variable y una etiqueta de evento de GA4.
• Finalizaremos viendo en GA4 los eventos que nos llegan.

¡Hora de ponerse manos a la obra!

Toquetear el código de React: etiquetando los botones

Como comentamos antes, queremos saber qué pasa con los botones de nuestra aplicación, cuántas veces son clicados. Para ello, comenzaremos introduciendo algo de código en nuestra app de React.

Desde Google nos dicen, como vimos en el primer post, que introduciendo los scripts básicos de GTM en nuestro head y nuestro body ya podemos hacer el seguimiento de todo lo que hacen los usuarios en nuestra App, cosa que es cierta. Pero si realmente queremos tener una analítica mucho más robusta y confiable, deberemos de implementar código en ciertas funciones de nuestra App, como por ejemplo en los botones. Ese código lo que hace es inyectar en el dataLayer la información que necesitamos.

Vamos a verlo con un ejemplo concreto, en este caso el botón de Enviar que hace el login en nuestra app, pero sería para todos igual.

Como vemos en el código,  la función handleForm se llama cuando se envía el formulario y hace los requerimientos del login. Justo después (línea 26) introducimos nuestro código del dataLayer, con dos parámetros que vamos a explicar a continuación.

event

Es un parámetro especial dentro del dataLayer de GTM que sirve para capturar diferentes acciones que hacen los usuarios en nuestras webs/apps. Muchas veces se recomienda crear un evento distinto por cada interacción del usuario y crear una etiqueta de GA4 por cada una de estas acciones. Por ejemplo para el botón de login, se pone en el dataLayer event: «login» y se configura en GTM una etiqueta de GA4 para enviar el evento de login. Y eso se hace con cada uno de los botones que queremos etiquetar.

Pero nosotros lo vamos a hacer de una forma un poco diferente, siguiendo las recomendaciones de nuestro amigo Brais en su post Guía de estilo y recomendaciones GTM, que ya que estamos aquí, os recomiendo leer con detenimiento.

Vamos a definir un evento genérico para todos los botones, que vamos a llamar custom_event. Este evento lo vamos a incluir en todos los botones y para distinguir qué botón específico es (y así enviar el nombre de evento correcto a GA4) vamos a utilizar una variable de la capa de datos.

¿Suena enrevesado? Sí, porque lo es, pero también va a ser más eficiente porque pasaremos de tener en GTM una etiqueta para cada botón a tener sólo una para todos los botones. Sigue leyendo para ver paso a paso cómo se hace esto.

event_name

Dentro del dataLayer vamos a incluir el parámetro «event_name«, que será donde recojamos el nombre del botón específico sobre el que se ha hecho click. Ese nombre es el que vamos a utilizar como nombre de evento en GA4.

En este caso, estamos etiquetando el botón Enviar de nuestro formulario de login y el valor que le pasamos a este parámetro es login. Este nombre no lo elegimos al azar. Está dentro del listado de eventos recomendados que nos proporciona la documentación de GA4. En teoría, si seguimos el nombrado recomendado por ellos, en un futuro podremos tener informes predefinidos para este tipo de eventos. Si estuviéramos etiquetando el botón de registro, su valor sería sing_up. Si tenemos un botón para una funcionalidad que no está recogida dentro de estos eventos recomendados, lo podemos llamar como nos dé la real gana, pero siempre es recomendable poner un nombre lógico y fácil de identificar.

Toquetear GTM: enviando los eventos a GA4

Ahora nos vamos a GTM para crear todo lo que necesitamos para enviar nuestros eventos a GA4.

Activador de evento personalizado

Crearemos un activador que nos reciba el evento custom_event. Esto lo hacemos para determinar cuándo se debe activar una etiqueta. Nosotros configuraremos este activador para que GA4 se dispare cuando un usuario haga click en botones específicos, los cuales etiquetamos en el paso anterior.

Esto lo hacemos desde: activadores>configuración del activador>evento personalizado. Debemos tener especial cuidado cuando rellenemos el campo Nombre del evento, este será exactamente el mismo que utilizamos en nuestro código, en el parámetro event del dataLayer.

Para nuestro ejemplo:

• custom_event ✅
• custom event  💩
• custom-event  💩

Variable de capa de datos

Seguidamente vamos a crear una variable de tipo capa de datos, la cual recibirá directamente desde el dataLayer el valor que hemos introducido en nuestro código de React en el parámetro event_name, este valor será en nuestro ejemplo login.

Para crearla vamos a: variables>variables definidas por el usuario>nueva>variable de capa de datos.

De nuevo es muy importante, en la configuración de la variable, cuando vamos a rellenar el campo Nombre de variable de capa de datos, utilizar exactamente el nombre de la clave del dataLayer que metimos en React. Para nuestro ejemplo:

• event_name  ✅
• event-name  💩
• event name  💩

Etiqueta de evento de GA4

En este momento tenemos por un lado, nuestro activador custom_event, que saltará cada vez que se haga click en un botón etiquetado. Por otro, nuestra variable DL_event_name, que recoge dinámicamente el valor del parámetro event_name del dataLayer (recuerda que este tendrá un nombre distinto para cada botón: login, sign_up…)

Ahora crearemos la etiqueta de GA4 para enviar todos nuestros datos a Google Analytics. Dentro de Tag Manager vamos a: etiquetas>nueva

Colocamos un nombre a nuestra etiqueta, yo escogí  GA4_custom_event. Vamos a la configuración de la etiqueta, donde elegimos una etiqueta de tipo Google Analytics: evento de GA4.

Seguimos adelante en nuestra configuración seleccionando en Etiqueta de configuración la etiqueta de GA4 que creamos en el anterior post.

Y por último en el campo Nombre del evento tenemos que poner el nombre del evento que queremos enviar a GA4. Aquí es donde elegiremos nuestra variable, DL_event_name, recordamos que esta variable lleva almacenado como valor el nombre del botón que especificamos en el dataLayer (login, sign_up…).

Por último en Activación elegiremos nuestro activador, que será nuestro evento personalizado custom_event.

Con todo esto, que no es poco, ya tenemos lista nuestra etiqueta de GA4, la cual nos enviará toda la información de todos nuestros botones etiquetados a Google Analytics. Acordaos siempre de utilizar la vista previa para comprobar que todo lo configurado en GTM está bien y de publicar para que los cambios se desplieguen en producción.

Comprobando los datos en GA4

Seguramente, estaréis impacientes por visualizar los datos de vuestra App. así que vamos a explicar cómo se visualizan estos datos en Google Analytics 4. Para ello vamos a Informes>Ciclo de vida>Interacción>Eventos

En la columna Nombre de evento ya podemos ver los resultados de nuestros botones etiquetados.

En esta tabla podemos ver por ejemplo, el login y el sign_up que en la aplicación, son los botones de Enviar del formulario de login y Enviar Registro, pero denominados según los eventos recomendados.

Además están los eventos denominados por mí como boton_new_hackinion_click o delete_hackinion_click, que en la aplicación son los botones Enviar Hackinion y Eliminar comentario. A estos eventos se les suelen llamar eventos personalizados.

Y por último el scroll o session_start, que son eventos que recoge por defecto GA4.

Si miramos la columna del Número de eventos podemos ver el total de interacciones con cada botón etiquetado. Y si seguimos a la derecha, en la columna Total de usuarios, evidentemente vemos un triste y solitario 1, ya que al trabajar en local solo tiene la interacción de un usuario, yo en mi ordenador.

¿Quién me está tocando los botones?

En este post explicamos paso a paso cómo etiquetar los botones de nuestra app de React. Estos son los puntos principales que vimos:

1. Incluimos un simple trocito de código para recoger la información de nuestros botones a través del dataLayer.
2. Configuramos todo lo necesario en GTM para enviar los datos a GA4: el activador, la variable y la etiqueta de evento de GA4. Mucho cuidado con las referencias a los parámetros del dataLayer, deben ser exactamente iguales que en el código.
3. Visualizamos las interacciones con nuestros botones en nuestro Google Analytics.

Siento no poder usar ni una sola vez “fácil, sencillo y para toda la familia”, pero según vamos profundizando en el tema, se vuelve todo un poco más engorroso y complejo, a la vez que estimulante. Digo engorroso, porque debemos estructurar muy bien en nuestra cabeza cómo interactúa GTM con nuestro código, que es lo que realmente recibe, para que al mismo tiempo sepamos que es lo que envía a GA4. Y estimulante, también, porque si comprendemos esto, ningún dato de nuestra app se nos podrá escapar.

¿Y tú ya sabes quién te está tocando los botones? 😉