Cómo crear y medir eventos en Google Analytics

Cómo crear y medir eventos en Google Analytics [Actualizado 2021]

A la hora de analizar el comportamiento de los usuarios en nuestro sitio web los eventos de Google Analytics nos pueden aportar información vital sobre las interacciones que se realizan en nuestro sitio web como: enviar formularios, solicitar descargas, realizar clics en enlaces o banners, etc.

Todas estas acciones anteriores y aquellas que se te puedan ocurrir en un sitio web pueden medirse con gran detalle en los paneles de Google Analytics y con poco esfuerzo ya que solo requiere una inserción de código mínima en el sitio web.

Para comenzar a implementar los eventos en nuestro WordPress consideraremos que Google Analytics ya está correctamente integrado y funcionando.

La implementación de los eventos de Analytics puede diferir dependiendo de si estamos usando el actual código gtag.js o el anterior analytics.js. Los procedimientos para integrar los eventos de Google Analytics en ambos casos es similar aunque la implementación si que se realiza de una forma diferente en cada caso. Más información sobre gtag.js.

  1. Definir qué queremos medir y cómo
  2. Crear el código del evento de Google Analytics
  3. Insertar el código de eventos en formularios
  4. Medir los datos en Google Analytics

1. Definir qué queremos medir y cómo

A la hora de medir los eventos de nuestro sitio web no nos volvamos locos etiquetando a diestro y siniestro porque todo ello podría afectar al rendimiento de nuestra web y producirnos un atragantamiento de datos al entrar al panel de eventos de Google Analytics.

Lo recomendable es etiquetar aquellas acciones que consideramos importantes dentro de nuestro sitio web, en nuestro caso, además de medir las ventas gracias al Seguimiento de Comercio Electrónico, medimos adicionalmente todos los formularios, tanto los de contacto como los de suscripción a la newsletter ya que nos interesa extraer más datos vinculados a estas acciones.

El código base para insertar un evento al que posteriormente podamos hacer seguimiento en Google Analytics sería el siguiente:

Versión analytics.js (Antiguo)
EVENTO BASE > ga('send', 'event', 'categoria', 'acción', 'etiqueta', valor);

Categoría

Una categoría es el nombre que proporcionamos para agrupar distintos objetos a los que queremos realizar un seguimiento. Por ejemplo, en Lab School contamos con dos formularios de suscripción a la newsletter ubicados en distintas páginas de la web, nuestro caso utilizaremos la categoría ‘suscripcion’ para agrupar las acciones de ambos formularios.

Acción

Este parámetro lo utilizamos para asignar un nombre al tipo de evento o interacción que se produce en el objeto. Siguiendo el ejemplo anterior, bajo la categoría ‘suscripcion’, la acción de ambos formularios sería ‘enviar’ ya que es lo que sucede cuando el usuario completa el formulario y envía los datos a nuestra plataforma de email marketing.

Etiqueta

Las etiquetas proporcionan información adicional para los eventos. De nuevo siguiente el ejemplo anterior, aquí podríamos utilizar una etiqueta distinta para cada formulario y así poder diferenciarlos más fácilmente cuando se registren los eventos en Google Analytics, en nuestro caso tenemos los formularios de suscripción en la página de ‘inicio’ y en la página de ‘blog’.

Valor

Permite asignar un valor numérico al evento que puede ser monetario, temporal, etc. En nuestro caso, podríamos estimarlo como valor monetario por cada usuario que captamos a través de estos formularios y que posteriormente podrían convertirse en nuestros alumnos. Si no necesitamos agregar un valor a nuestro evento podemos prescindir de su uso.

Una vez explicado las distintas variables que existen dentro de un evento, aplicado a nuestro ejemplo, los códigos a generar serían:

EVENTO SECCIÓN INICIO > ga('send', 'event', 'suscripcion', 'enviar', 'inicio', 0);

EVENTO SECCIÓN BLOG > ga('send', 'event', 'suscripcion', 'enviar', 'blog', 0);

Versión gtag.js (Nuevo)
EVENTO BASE > gtag('event', 'acción');

Con el evento base, únicamente es necesario incluir el parámetro acción, el resto no son obligatorios. En estos casos, por defecto la categoría predeterminada será ‘general’ y la etiqueta predeterminada ‘(not set)’. Si quisieramos incluirlos igualmente, la estructura completa sería la siguiente:

EVENTO COMPLETO > gtag('event', 'acción', { 'event_category': 'categoria', 'event_label': 'etiqueta', 'value': 'valor'});

Y aplicado sobre el ejemplo anterior:

EVENTO SECCIÓN INICIO > gtag('event', 'enviar', { 'event_category': 'suscripcion', 'event_label': 'inicio', 'value': '0'});

EVENTO SECCIÓN INICIO > gtag('event', 'enviar', { 'event_category': 'suscripcion', 'event_label': 'blog', 'value': '0'});

Tipos de Eventos en Google Analytics 4

Para lograr una mayor coherencia y calidad de nuestros informes, en Google Analytics 4 los eventos ofrecen información valiosa sobre lo que ocurre con tu sitio web o aplicación, como acciones de los usuarios, eventos del sistema o errores. Hay tres categorías de eventos que se pueden enviar:

  • Eventos registrados automáticamente que se recogen automáticamente con la recogida de datos básicos de la app (app_update, first_open, error, in_app_purchase, notification_open…) o web (first_visit, click, scroll, video_complete, page_view, file_download…).
  • Eventos recomendados que implementa el administrador, con nombres y parámetros ya predefinidos por Google. Estos eventos recomendados te permiten acceder a funciones de informes actuales y futuros que no se pueden usar con los eventos personalizados.
  • Eventos personalizados son aquellos que no se registran automáticamente ni se encuentran entre los recomendados. Google sólo recomienda usar este tipo de eventos si los que ya hay disponibles no satisfacen tus necesidades. Los eventos personalizados no se muestran en la mayoría de los informes estándar, por lo que deberás crear informes personalizados para hacer análisis útiles.

2. Crear el evento de Google Analytics con facilidad

Los fragmentos anteriores, puedes crearlos manualmente. No obstante, si prefieres mayor agilidad a la hora de crear tus eventos, en Lab School hemos creado una herramienta: Creador eventos Google Analytics que te facilitará enormemente esta tarea con unos pocos clics. Desde 2019 está disponible para instalaciones tanto con analytics.js como con gtag.js.

3. Cómo insertar el código de eventos de Google Analytics

Una vez definidas las variables solo nos queda insertar el código del evento en nuestro formulario. En nuestro caso, utilizamos Acumbamail como plataforma de e-mail marketing ya que, entre otras opciones, nos permite insertar un formulario de suscripción personalizado en cualquier ubicación de la web, como: widgets, posts, páginas, etc.

En el código que nos ofrece Acumbamail o la plataforma que usemos, nos tenemos que fijar únicamente en la etiqueta de apertura form, que es donde colocaremos el código del evento de la siguiente manera:

Versión analytics.js
<form action="URL" method="post" onsubmit="ga('send', 'event', 'suscripcion', 'enviar', 'blog', 0);">

Versión gtag.js
<form action="URL" method="post" onsubmit="gtag('event', 'enviar', { 'event_category': 'suscripcion', 'event_label': 'blog', value': '0'});">

Para insertar el código de Google Analytics dentro de form debemos utilizar la etiqueta onsubmit para indicar que el evento se registre solo cuando se haya enviado el formulario, de forma que si mostrase un error debido a la introducción incorrecta de datos, el evento no se registraría para evitar datos duplicados.

Insertar eventos de Google Analytics en enlaces

Si en lugar de un formulario queremos medir los clics que recibe un enlace, el código del evento sería el siguiente:

Versión analytics.js
<a href="URL" onclick="ga('send', 'event', 'suscripcion', 'clic', 'blog', 0);">ANCLA</a>

Versión gtag.js
<a href="URL" onclick="gtag('event', 'clic', { 'event_category': 'suscripcion', 'event_label': 'blog', 'value': '0'});">ANCLA</a>

En esta ocasión dentro de la etiqueta a hemos utilizado onclick ya que en este caso concreto lo que queremos medir son los clics que recibe dicho enlace. En función de los enlaces que queramos medir, debemos introducir el código del evento para poder registrar correctamente los datos en Google Analytics.

Insertar eventos de Google Analytics en Contact Form 7

Si utilizas el archiconocido plugin de WordPress Contact Form 7, también es posible medir las veces que se envía un formulario con el siguiente código:

Versión analytics.js
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( 'ID FORMULARIO' == event.detail.contactFormId ) {
ga('send', 'event', 'suscripcion', enviar’, 'blog', '0');
}
}, false );
</script>

Versión gtag.js
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( 'ID FORMULARIO' == event.detail.contactFormId ) {
gtag('event', 'enviar', { 'event_category': 'suscripcion', 'event_label': 'blog', 'value': '0'});
}
}, false );
</script>

Como comprobarás, la integración del código es totalmente distinta a los anteriores casos ya que funciona mediante javascript para envíar el evento sólo cuando el formulario se ha cumplimentado correctamente. Para incluir este código debemos pegarlo en la cabecera dentro de las etiquetas <head></head>, ya sea desde la plantilla header.php o desde functions.php, modificando los parámetros del formulario y del evento por los que desees.

4. Medir los datos en Google Analytics

Si hemos etiquetado correctamente todos los eventos, ya solo nos queda acceder a nuestra cuenta de Google Analytics pasado unos días y dentro del Informe Principal, acceder al apartado de comportamiento > Eventos, donde dispondremos de todos los detalles de nuestros eventos. Será el momento de recopilar datos para posteriormente analizar el comportamiento de nuestros usuarios y llevar a cabo cambios para optimizar nuestros objetos (formularios, enlaces, imágenes, etc.) si fuese necesario.

Eventos en Google Analytics

Espero que este pequeño tutorial para crear eventos en Google Analitycs te haya sido de gran utilidad para seguir mejorando aspectos de tu sitio web, si con esto no fuera suficiente, recuerda que en Lab School celebraremos muy pronto una nueva edición de nuestro curso de Analítica Web donde veremos esto y mucho más.

63 comentarios en “Cómo crear y medir eventos en Google Analytics [Actualizado 2021]”

  1. Hola buenas tardes, saludos.
    Quisiera hacerle una consulta, al crear un evento se crea pero en tiempo real, y al pasar las horas, se pierde la data, y no lo logro ver en eventos, alguna sugerencia. Muchas gracias espero su pronta respuesta.

    1. Hola Darwing, si el evento queda recogido en el informe de tiempo real, quiere decir que Google Analytics lo ha recibido correctamente, y por tanto debería plasmarse en el resto de informes, ¿has comprobado todos los parámetros (categoría, acción, etiqueta y valor)?

  2. Buenas,

    Soy un poco novato en esto de los eventos y te quería preguntar si es posible medir los clicks que la gente hace en mis enlaces de afiliado de Amazon, Ebay y Aliexpress. ¿Cómo se haria paso a paso para crear este evento en google Analytics?
    Yo lo que hice fue crear evento en google Analytics y poner:
    en la sección «Condiciones que se cumplen»
    en parámetro -> affiliation, en operador -> empieza por, y en valor -> https://www.amazon (Esta es la url a la que van los usuarios después de hacer click, tiene diferentes variantes después de que hagan click los usuarios).
    Después de hacer esto creé un evento de conversiones pero en tiempo real no se visualiza ningún conversión después de haber hecho click en mis enlaces de afiliado…

    De antemano,

    Muchas gracias

    Un saludo

    1. Hola Funko Pop, los eventos se implementan a nivel de código en la web y se registran automáticamente en Google Analytics. Una vez hayas implementado los eventos, puedes configurar «objetivos» desde Google Analytics utilizando los de tipo «evento» e indicando al menos un parámetro del mismo (categoría, etiqueta, acción o valor). Saludos

  3. Javier, estoy impresionado.

    1) Por la claridad y efectividad de tu explicación.
    2) Por la atención y soporte que has dado a cada una de las personas que preguntan.

    Más seres humanos como tú, saludos.

  4. Excelente nota Javier, muchas gracias.
    Consulta, ¿hay que configurar los eventos dentro de la plataforma de Google Analytics?
    Saludos

  5. hola!! muchas gracias por esta guía. te quería consultar si saber si se puede generar eventos con web creadas en Gitlab? Gracias!!

  6. Un gran articulo y muy bien explicado. ¿Sabes si hay alguna forma de conocer las interacciones de Whatsapp en web? La única forma que he encontrado es haciendo un evento cada vez que hacen clic en el botón, pero no es representativo ya que hay gente que después no escribe

    ¡Muchas gracias de antemano! Un saludo

  7. Hola Javier! Me parece genial el artículo. Pero tengo una duda, cuándo se utiliza elementor, ¿cómo exactamente hay que insertar el código? En mi caso el código es:
    onclick=»ga(‘send’, ‘event’, ‘llamada’, ‘boton llamada’, ‘pulsar boton llamada’);»

    En el manual de elementor dicen que los códigos de seguimiento se hace de la siguiente forma:
    1. Edit Button > Advanced > set CSS ID = My_Button
    2. Add to the page HTML widget (after the button will be fine)
    3. Paste the following code into the HTML Code field:

    document.addEventListener(«DOMContentLoaded», function(event) {
    jQuery(‘#My_Button a’).click(function(){
    // tracking code here
    // for example Facebook Pixel:
    fbq(‘track’,’AddToCart’);
    });
    });

    Siguiendo los pasos, he insertado el código html el siguiente:

    document.addEventListener(«DOMContentLoaded», function(event) {
    jQuery(‘#Llamada a’).click(function(){
    // tracking code here

    onclick=»ga(‘send’, ‘event’, ‘llamada’, ‘boton llamada’, ‘pulsar boton llamada’);»

    });
    });

    Pero no me recoge datos al momento. ¿Has implantado el código en este maquetador en algún momento? ¿Sabes si está bien insertado?

    Muchas gracias de antemano!
    Un saludo!

    1. Hola Nuria,

      para usar el tracking dentro de esta función el código debería quedar así (el onclick sobra):

      document.addEventListener(«DOMContentLoaded», function(event) {
      jQuery(‘#Llamada a’).click(function(){
      // tracking code here
      ga(‘send’, ‘event’, ‘llamada’, ‘boton llamada’, ‘pulsar boton llamada’);
      });
      });

      Saludos

  8. Gran artículo y de gran ayuda, gracias!
    Un detalle, en el último código para gtag.js falta la comilla de apertura en ‘value’, sin ella no funciona.
    Saludos

  9. Hola Javier, muy buen el articuo, ahra solo me queda una duda, el codigo debo insertarlo en el html de la pagina que quiero medir? quiero registrar clicks sobre un enlace, en que parte del cuerpo del codigo deberia ir? ya tengo insertado el codigo de analytics general. Muchas Gracias!

    1. Hola Nicolas, existen varias formas de hacerlo, la más sencilla sería incluir el código directamente en el elemento que quieres medir (como los ejemplos de este artículo) o algo más avanzado mediante javascript, aunque si es un único enlace, hacerlo directamente sería lo más sencillo.

      Saludos

  10. Muchas gracias por el articulo, fue de mucha utilidad.
    Pero tengo un problema con la medición de los clicks dentro de un menu desplegable. Me gustaria saber que opción eligió el usuario.
    Tengo 4 opciones y luego un botón… Le inserté el codigo de form al botón pero no tengo forma de saber cual de las 4 opciones eligió el usuario. (No tengo control sobre la pagina de destino luego de el click en dicho botón).

    Muchas gracias.

  11. Hola! Muchas gracias por el tutorial, justamente lo que estaba buscando y muy muy bien explicado!. Pregunta rápida y obvia: una vez ingresado el snipet en el código, no es necesario entonces configurar nada más en el dash de analytics? la categoría y el label se crea automático?
    Gracias!

    1. Hola JP,

      una vez configurado el evento con sus distintos parámetros no es necesario realizar ninguna acción en el panel de Google Analytics, únicamente si quisieras registrar dicho evento como un objetivo.

      Saludos

  12. Gracias, es el código que necesitaba para un objetivo concreto, me ha ayudado mucho el artículo.
    En cuanto a la herramienta generadora del código que habéis montado, lo único malo que tiene es que no monta los códigos en gtag, si lo podéis añadir yo creo que sería ya la bomba.
    Saludos.

  13. Hola, tengo un evento creado

    onclick=»ga(‘send’, ‘event’, ‘campus_menu_escritorio’, ‘clic’, »);»

    y quiero añadirlo a un botón del menú de WordPress con id menu-item-2, creo que debería funcionar con javascript y document.getElementById porque no encuentro la forma de añadir la función onclick directamente en el enlace, no sé si podréis ayudarme.

    Saludos y gracias

    1. Hola Antonio,

      al tratarse del menú de wordpress no es posible modificar el HTML por lo que la función onclick no se podría implementar tal y como se explica en esta entrada. Para ello habría que recurrir directamente a javascript, te pongo aquí un ejemplo de como está implementado para algunos casos en esta web con jquery https://codepen.io/anon/pen/ZwrPwr

  14. Hola Javier,

    ¿Con esta solución se podría conocer cuando un usuario abandona un formulario a medio completar?. Me interesaría saber como identificar que el usuario se ha ido del formulario.

    Gracias

    1. Hola Cristobal, con el evento «onfocus» puedes comprobar cuando un usuario activa un campo del formulario, de forma que si registras todos los campos del formulario, posteriormente puedes comprobar qué campos no se activan y por tanto indican que el usuario ha dejado de incluir datos y se ha marchado del formulario. Saludos

  15. Fanny Campos A

    Hola, me gustaría saber si es capaz de reconocer por ejemplo si yo le doy una etiqueta a un selector dentro del formulario que va a diferentes departamentos de la empresa y así poder contabilizar los envíos del mismo formulario de forma separada por departamento ej : selecciona un área de la empresa
    1. División Internet
    2. RRHH.
    3. Gerencia

    1. El modo de inclusión es muy similar a los eventos, lo que difiere principalmente es el condicional del error o excepción que lo ejecuta. En ese sentido, no tenemos tanta experiencia. Saludos

  16. Falta un coma en ‘value’ en la expresión de gtag
    gtag(‘event’, ‘evento’, { ‘event_category’: ‘categoria’, ‘event_action’: ‘accion’, ‘event_label’: ‘etiqueta’, value’: ‘valor’});
    si se copia tal cual, no funcionaría.

  17. Hola Javier, muchas gracias por el artículo que es de gran utilidad! mi duda es si en el campo valor puedo ingresar un nombre y apellido, o un email ? la idea es hacer un seguimiento específico de los movimientos de los usuarios de mi website.

    Muchas gracias!!

  18. Samantha Abigail

    Hola Javier! Tengo una duda, este tipo de medición de eventos donde tengo una categoría, una acción, una etiqueta y un valor aplica de la misma manera para una App que para una página web?

    Gracias, saludos

  19. Buenas Javier, muchas gracias por tu artículo :) Quería hacerte una pregunta bastante básica antes de generar todo esto. Por ejemplo, yo quiero recopilar el número de personas que envía un formulario. Para ello inserto el código de seguimiento general de Analytics en la carga de página y en la página de /gracias pongo el mismo código pero añadiendo ese evento. No debería antes haber creado un objetivo en Analytics previamente con las mismas variables que el evento que he creado manualmente? ¿O ya se empieza a contabilizar en la pestaña de eventos automáticamente?
    Una última cosa, ¿hay alguna forma de recopilar datos de personas que han rellenado ese formulario pero sin crear eventos? Imagino que a nivel de orden es mucho mejor hacer eventos para cada uno de ellos. Se me ocurre que el /gracias pueda tener el nombre de cada una de las páginas para identificarlas y quizás así no haría falta crear eventos Ej: /graciaspagina1 ¿Qué opinas? ¡Muchas gracias! :)

    1. Hola Cristina, para medir el envío de un formulario, solo hay que colocar el código del evento en el propio formulario, una vez se realiza el envío, no es necesario colocar ningún código adicional en la página de gracias. Por tus preguntas, creo que estás confundiendo los objetivos de «destino» y los objetivos de «evento». Para los objetivos de evento, siempre hay que crear primero el evento y posteriormente el objetivo ya que si no existe el primero sería imposible configurar lo segundo. De cara a la recogida de información sobre la página desde la que se envía el formulario, se podría configurar de forma dinámica para que la «etiqueta» del evento se rellenase automáticamente con el nombre de la página o similar, sin necesidad de tener que crear tantas páginas de gracias. Saludos

  20. Hola buenas tardes, muchas gracias por el tutorial!!
    Tengo una duda, si quiero medir cuanto tiempo vieron un video que esta en un html5 ¿Cómo seria el código que debo ponerle al enlace del video?
    Espero puedan contestarme soy nueva en esto de GA.
    Gracias!

  21. Hola Javier, excelente artículo, tengo una duda, ya inserte el código y ya me lo registra en los eventos pero se puede hacer que esos eventos tambien se registren como objetivos?. Podrías ayudarmen? Gracias.

    1. Hola César, para registrar un evento como objetivo, debes acceder al panel de «Administrador» y a continuación en la columna «Vista», hacer clic sobre «Objetivos». A continuación, debes crear un «Nuevo objetivo» y deberás completar tres pasos, el primero la «Configuración de objetivo», te recomiendo escoger la opción final «personalizado». En el siguiente paso «Descripción del objetivo» incluye un nombre para identificar al objetivo y selecciona la opción «Evento». Por último, en el tercer paso «Información del objetivo», deberás indicar los parámetros del evento para que se registren correctamente. Con este simplemento «Guardar» y ya estará todo configurado. Saludos

  22. Increíble. Gracias por el artículo. Me quedó una duda con respecto a la inserción del código… Una vez que tengo mi código listo ¿Dónde debo insertarlo para que comience a medir de forma correcta mi evento? Estoy midiendo clicks sobre un enlace para determinar intención de compra.

    ¡Mil gracias!

    1. Hola César, si se trata de un enlace, debes introducirlo como un parámetro adicional, tal y como indico en el ejemplo de esta entrada <a href=»URL» onclick=»ga(‘send’, ‘event’, ‘suscripcion’, ‘enviar’, ‘blog’, 0);»>ANCLA</a>. Una vez introducido este código, Google Analytics detectará automáticamente el código y podrás visualizar los datos recogidos en el informe de «Eventos».

      Saludos

  23. Hola.
    Es justo lo que estaba buscando! Mi pregunta es, ¿Se pueden medir las impresiones de un banner de un cliente en mi web para luego poder mandarle los resultados?
    ¿Cuál sería el código a implementar y dónde se haría?

    Gracias

    1. Hola Antonio, es posible medir las impresiones de un banner, el código del evento como tal sería similar al explicado en este artículo, sin embargo para implementarlo correctamente deberías utilizar código jQuery que ejecute el evento sólo cuando la etiqueta div o img que contiene al banner se muestra en pantalla, esto es ya más complejo ya que hay diferentes formas de llevarlo a cabo, tendrás que pedirle ayuda al amigo Google https://www.google.es/#q=trigger+event+when+div+is+visible

  24. Hola, te hago una consulta.
    Deseo crear un evento para medir los eventos en un formulario. Una vez que tenga el código de Google Analytics puedo implementarlo vía tag manager? o tengo que enviarselo a un desarrollador?

    Saludos

  25. Hola Javier, buenas noches.

    Gracias por el artículo, es justo la información que estaba buscando. El problema es que yo utilizo Mailpoet para captar suscriptores y este plugin no te da la posibilidad de tocar el código cuando editas los formularios.

    ¿Se te ocurre alguna manera alternativa a la que explicas en el artículo de poder integrar ese código? Soy un poco novato todavía con el código, pero a lo mejor a través de CSS o de php se puede hacer algo.

    Muchas gracias y un saludo.

    1. Hola Juan Pablo,

      la verdad que no conozco Mailpoet como usuario ¿No tienen una versión HTML de sus formularios? Otras plataformas como Mailchimp, Mailrelay o Acumbamail tienen diferentes opciones a la hora de incluir el formulario, entre ellas la versión HTML. Igual puedes consultarlo con Mailpoet para que puedan ayudarte, seguro que no es la primera vez que reciben una consulta de este tipo.

      Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Te informamos que los datos de contacto de carácter personal recogidos serán tratados por Daniel Iglesias Gil, como responsable de tratamiento. La finalidad es hacerte llegar la información solicitada bajo tu consentimiento. Tus datos no se cederán a terceros, salvo obligación legal. Puedes ejercer tus derechos de acceso, rectificación, supresión, oposición, limitación y portabilidad en alumnos@labschool.es. Más información Política de privacidad.