Crear métricas en Google Analytics 4
Tags: ga4, googleanalytics, analytics, metrics
Published: 2023-10-17 05:21:44

[English version](https://dev.to/miasalazar/create-metrics-in-google-analytics-4-3b31)

El 1 de julio de 2023 Google Analytics se actualizó a la versión 4, evitando que se pudiese utilizar su anterior versión, y fue un verdadero dolor de cabeza para muchas personas. Tuve que volver a aprender a introducir métricas y documentarme otra vez sobre muchas funcionalidades. 

La verdad es que no soy una gran experta en métricas, pero voy a dejar aquí cómo crear dos tipos de ellas por si os encontráis en las mismas situaciones en las que yo.

## Configuración inicial
Lo primero es integrar Google Analytics y Google Tag Manager en nuestro proyecto. Dependiendo de con qué tecnologías esté hecho, deberemos hacer unas cosas u otras. En este artículo no voy a cubrir esta parte ya que hay muchos otros en los que se explica detalladamente cómo es el proceso.

Una vez tengamos estos dos puntos cubiertos, podemos proseguir.

## Métricas simples
Llamo métricas simples a aquellas que no tienen demasiada configuración ni complejidad y, de hecho, apenas han cambiado entre Universal Analytics (UA) y Google Analytics 4 (GA4). Por ejemplo, cuando quieres medir que se ha clicado un botón.

Para ello, primero debemos ir a Google Analytics > Administrar > Flujo de datos > el proyecto que deseas seleccionar

![Pantalla de Google Analytics de flujo de datos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ci47m8u69rr9ghzgan87.png)

En esa pantalla copiamos el "ID DE MEDICIÓN".

![Pantalla de detalle de flujo de web](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3aouv4o5d3k5rg6cg83.png)

Después, vamos a Google Tag Manager y creamos un activador nuevo. Para ello pulsamos en "activador" en el menú de la izquierda y seguimos los siguientes pasos:

- En la parte superior le ponemos un nombre.
- En "tipo de activador" introducimos el tipo "Clic" y dentro de este "todos los elementos".
- En "este activador se activa" indicamos "algunos clics".

![Pantalla de creación de activación](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jzy4gzhwymfry3axoez.png)

- En los 3 selectores de abajo, en el primero pulsamos en "elegir variable integrada".

![Seleccionando variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfr4qlhs8hh9fv4hqepr.png)

- Se abrirá una pantalla y ahí hay que escoger "Click ID".
- En el segundo selector "es igual a".
- En el tercero el id que hayamos seleccionado para el botón que se va a clicar.

![Pantalla de creación de activación una vez rellenado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sx45510ca8gb43agctlw.PNG)
- Creamos una variable para vincularle el código de analytics, de tipo constante, y en valor pega el "ID DE MEDICIÓN".

![Creación de una constante](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tb0jid7uh2qjngl485lw.PNG)

- Agrega una etiqueta con un nombre descriptivo, de tipo "evento de GA4" y de "ID de medición" metemos `{{Analytics Code}}`, o como hayamos llamado a la constante de más arriba.

- En nombre del evento ponemos el que escogimos en el activador y en activación le vinculamos el activador que hicimos anteriormente.

![Pantalla de creación de una etiqueta](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhf50hmnzeec9b2npkp0.PNG)

- A continuación, debemos establecer una nueva etiqueta para añadir el código de Analytics.

- En el ID de etiqueta indicamos `{{Analytics Code}}`, en el parámetro de configuración `send_page_view` y `true`, y en activación `All Pages`. Tras este paso, en la etiqueta Button Clicked ya no saldrá el warning que veíamos en la anterior captura de pantalla.

![Pantalla de creación de una etiqueta vinculado con un activador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2d64u5dcy3n732uvsyml.PNG)

- Por último, le indicaremos el mismo id que hemos establecido en Google Tag Manager a nuestro botón.

`<button id="buttonClicked">Botón a medir</button>`

Con todo este proceso, cuando se pulse en el botón en nuestra página, si vamos a Google Analytics a Informes > Interacción > Eventos, podremos ver una tabla como esta y en ella aparecerá nuestro evento.

![Lista de eventos en Google Analytics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7vhv0bturm3jts9par2.PNG)

## Métricas complejas
Cuando aspiramos a medir más que solamente que haya sucedido un evento como un click, es cuando yo hablo de métricas complejas. Por ejemplo, quieres que una métrica solo se registre si se han comprado más de un producto, quieres medir cuántos productos se han comprado y quieres saber si el usuario estaba registrado o era un invitado.

- Primero debemos crear un activador, en este caso lo vamos a llamar "multiplePurchase". De tipo "evento personalizado" y se activará en "todos los eventos personalizados"

![Pantalla de creación de activador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mule43wiqifru3s4jvi.PNG)

- Después, añadimos una etiqueta de tipo evento GA4, en el ID de medición introducimos `{{Analytics Code}}` y en nombre del evento "multiplePurchase".

- En parámetros de eventos agregamos dos parámetros: uno para saber el número de objetos comprados, "numberOfPurchases", y otro para saber si el usuario estaba registrado, "registeredUser". Los valores de esos parámetros serás las variables `{{dlv - numberOfPurchases}}`, `{{dlv - registeredUser}}` respectivamente, utilizando "dlv" para indicar que son una variable de la capa de datos, "data layer variable".

![Pantalla de creación de activador vinculado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42450y690jc6z9nhd6cx.PNG)

- Para terminar la etiqueta, incorporamos el activador que creamos anteriormente.
- Una vez creados etiqueta y activador, debemos añadir estas variables ("numberOfPurchases" y "registeredUser") en GTM, una para cada una de las que hemos introducido en la etiqueta.

![Pantalla de creación de una variable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bgncxigidlmkzva5j6n7.PNG)

Terminadas las gestiones en Google Tag Manager, debemos indicar en nuestro código cuándo queremos que se active esta métrica.

Voy a mostrar cómo hacerlo en un código en React, ya que dependiendo de las tecnologías que estés utilizando tendrás que hacerlo de una forma u otra. Para [integrarlo en react recomiendo este artículo](https://medium.com/finnovate-io/integrating-google-tag-manager-with-a-react-app-5a8584ee2251).

El código podría ser algo así

```
import TagManager from 'react-gtm-module'

if (purchases.length > 1) {
  TagManager.dataLayer({
    dataLayer: {
      event: 'multiplePurchase',
      registeredUser: <-- insertar aquí true o false,
      numberOfPurchases: <-- insertar aquí el length de purchases
    }
  })
}
```

Por último, para que Google Analytics tenga acceso a estos valores ("registeredUser" y "numberOfPurchases"), hay que añadírselos y esperar 24 horas para que empiece a darnos datos sobre ellos. Para hacerlo:

- Vamos a Administrar > Definiciones personalizadas
- Ahí agregamos dos dimensiones personalizadas, una para "registeredUser" y otra para "numberOfPurchases". Es posible que en el selector de "parámetros de eventos" no salga todavía ninguna de ellas, pero podemos escribirlo.

![Pantalla de nueva dimensión personalizada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y57te7qizictkkkse5f7.PNG)

Configurado Google Tag Manager, añadido el código en nuestro proyecto, y agregados estos parámetros en Google Analytics, ya podremos ver el evento como mostramos en "métricas simples" y si clicamos en él, podremos ver qué datos muestran los parámetros que hemos registrado.

## Importante
Siempre que hagamos algún cambio en Google Tag Manager deberemos guardarlo. Para ello, hay que ir a la parte superior derecha de la página, ahí encontraremos el número de cambios que hemos hecho y si pulsamos en "enviar" podremos guardar lo que hayamos hecho. Asimismo, si, por ejemplo, hay alguna etiqueta con variables vinculadas y no has creado esas variables, el sistema te avisará y no te dejará guardar hasta que todo esté correcto.

![Pantalla con los cambios en el espacio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znf7nsdilkvsrfbjp067.PNG)