Cómo medir con GA4 y Tag Manager el marcado de un checkbox en un formulario

Recientemente se me ha dado el caso de tener que hacer el seguimiento del estado de un checkbox en un formulario de un checkout. Se trataba del típico permiso para consentir el envío de publicidad y queríamos saber el porcentaje de gente que lo aceptaba, tipo de segmento y su comportamiento.

Además queríamos experimentar con su copy y diseño para mejorar la tasa de aceptación.

El método más directo y simple de instrumentación es el de trackear los clic sobre el checkbox pero este método es tan popular como poco preciso.

Primero, porque solo tienes información de quien lo marca (hace clic). La información quien no lo marca sería por descarte y no me gusta mucho porque siempre hay algo de ruido.

Segundo, porque puede haber personas que lo marquen y desmarquen incluso varias veces mientras se lo piensan. Tendrías más clics que usuarios. Y si solo hicieras seguimiento del primer evento de clic, no tendrías visión del estado final de ese checkbox.

Todo mal.

Así que vamos a utilizar otra estrategia para trackear esto de una forma más precisa y mucho más elegante, desde mi punto de vista.

Medir el estado del checkbox en el envío del formulario

En vez de medir las interacciones sobre el checkbox, que ya hemos visto que es poco útil, vamos a cambiar el enfoque siguiendo estos pasos:

  • Leemos el estado del checkbox durante el envío del formulario
  • Creamos una variable booleana (true|false) en Google Tag Manager que almacene esa información.
  • A continuación lanzamos una etiqueta con un evento a Google Analytics 4 que incluya ese parámetro.
  • Con ese parámetro alimentamos una dimensión personalizada en GA4
  • El último paso sería crear una exploración a medida para ver los datos o, sencillamente, consultarlos en el reporte del evento que hemos creado.

1. Variable con el estado del checkbox

Aquí está gran parte de la magia. Primero debes encontrar el identificador CSS de ese checkbox. Para ello deberás utilizar el inspector de tu navegador.

En la siguiente captura de pantalla puedes ver cómo el propio inspector me da la respuesta.

En este caso la respuesta es: input#checkout_buyer_accepts_marketing.input-checkbox

Con esta información vas a crear en Google Tag Manager una variable de tipo JavaScript personalizado con esté código:

Esta variable estará leyendo a partir de ahora el estado de ese checkbox de forma continua. Si el checkbox está marcado, devuelve el valor true. Si no lo está, devuelve el valor false.

2. Activador para el evento de seguimiento

Debes definir ahora la situación que haga que se envíe un evento con el estado de la variable anterior.

Siendo un formulario, el evento personalizado de form_submit (que sucede cada vez que envías un formulario) parece una buena opción. Pero a mi me gusta combinarlo con alguna otra condición para recibir menos ruido y activar exclusivamente los eventos necesarios. Aunque es posible aislar después en los informes aquellos eventos activados en el formulario en cuestión, ajustándolo en origen nos permitirá consumir menos eventos en GA4. Por si fuera el caso, esto reduce el riesgo del tan odiado muestreo o sampling.

Por ejemplo, si hay más formularios en tu web, cualquier form_submit activaría nuestro evento, con un valor indefinido de la variable, ya que no existía un checkbox con ese identificador.

Puedes matizar este comportamiento añadiendo un modificador marcando «Algunos eventos personalizados» y escogiendo la variable Page URL para indicar la URL donde se encuentra el formulario.

De todas formas aquí puedes echarle imaginación y limitar el activador con muchas combinaciones creativas.

Disclamer: La forma perfecta de hacer esto sería que el activador estuviera vinculado al envío correcto del formulario (cuando el sistema devuelve un OK), no solo a la intención de envío. El problema es que esto es algo más complejo ya que nos obliga a introducirnos en las tripas del código del sitio.

3. Etiqueta de envío de evento a GA4

Llega el momento de poner a trabajar las entidades que has creado en los pasos anteriores. Para ello vas a crear una nueva etiqueta en Tag Manger del tipo «Google Analytics: evento de GA4».

Asigna un nombre al evento que quieras recibir en GA4.

Define un nombre para el parámetro que recoge el valor de la variable de estado del checkbox. Como valor de este parámetro deberás introducir el nombre de la variable que creaste en el primer punto de esta guía. No olvides introducirlo en su campo correspondiente entre llaves {{nombre_de_la_variable}}

En la configuración avanzada de la etiqueta me gusta marcar las «Opciones de activación de la etiqueta» en «Una vez por página». De esta forma evito duplicidades en formularios incompletos o con errores.

Finalmente asigna a la etiqueta el activador que has creado en el paso 2.

Con todo esto listo solo nos queda depurar la instrumentación y hacer una vista previa para comprobar que todo sucede como esperamos.

Si es así, nos vamos a Google Analytics 4.

Dimensión personalizada en GA4

Enviar a GA4 un parámetro personalizado no hará que Google lo muestre en los informes. Para que lo archive y podamos trabajar con él necesitamos crearle antes una dimensión personalizada.

Ve a Administrar > Visualización de datos > Definiciones personalizadas > Crear Dimensión personalizada y completa los campos del formulario par dar de alta la nueva dimensión.

En unas 24h tu dimensión habrá empezado a recopilar datos y podrás pintarlos en tus informes.

Una forma muy rápida de verlos es ir a Ciclo de vida > Interacción > Eventos y en la tabla busca y haz clic en tu evento.

En el reporte verás la evolución temporal de las activaciones del evento:

Y en la parte inferior tendrás su relación con la nueva dimensión que has creado, con todas las ocasiones en las que se han enviado formularios con y sin checkbox marcado.

Conclusión

Con esto habrás cumplido con tu objetivo. Ahora queda de tu lado explorar las oportunidades e insights que se te abren con este nuevo dato.

Podrías crear segmentos y estudiar el comportamiento de los usuarios que no han aceptado. O ver si existe alguna relación entre el consentimiento y las compras completadas.

O validar tu hipótesis de que con determinado copy, el consentimiento es otorgado en un mayor número de ocasiones.

Si estás trackeando un formulario con muy pocas peticiones y tienes activada en GA4 la identidad para los informes de tipo «Mezclada» es posible que tu GA4 se vea afectado por el Umbral. Échale un vistazo al post si ves pocas conversiones, no sea que te estés dejando datos atrás.

Hay otra derivada interesante de esta receta que es recoger los valores de desplegables, o incluso campos abiertos, en los formularios.

Es un pelín más complejo porque tendrás que adaptar el JavaScript de la variable del primer punto pero la estrategia general es muy parecida.

La mayor parte de las veces, el problema de instrumentaciones no excesivamente complejas está más en la estrategia a emplear que en el propio código que debes usar.

Espero que esta te haya sido útil.

Deja un comentario

Información sobre protección de datos

  • Responsable: Pablo Moratinos
  • Fin del tratamiento: Controlar el spam, gestión de comentarios
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  • Derechos: Acceso, rectificación, portabilidad, olvido.
  • Contacto: contacto@pablomoratinos.es.
  • Información adicional: Más información en mi política de privacidad.