En un post anterior veíamos cómo añadir el código de seguimiento de eventos de Analytics a un enlace en html (válido también tanto para WordPress como para cualquier otro CMS).
Si eres usuario de Divi (plugin y/o tema para WordPress) habrás comprobado que no es fácil hacer este seguimiento en el caso de los módulos con botones ya que no tenemos acceso a las etiquetas de los enlaces.
¿Cómo podría añadir el código de seguimiento de eventos a los botones de Divi?
La solución consiste en asignar al botón en cuestión una clase CSS (o un identificador) y cargar un script para esa clase que lance el hit del evento al recibir un clic.
Veamos cómo hacerlo con un ejemplo práctico.
Nos saltaremos la creación del objetivo y definición del evento en Analytics que ya fue descrito en el post anterior.

Vamos a Divi y abrimos el módulo del botón que queremos trackear. Una vez configurado con su enlace y su diseño, añadimos una clase CSS, por ejemplo .gaeventdescarga
(algo que puedas identificar). Hazlo en Configuración > Avanzado > ID y clases de CSS > Clase CSS:

Ahora debemos crear el script en el que esa clase defina el envío de un hit a Analytics cuando haya un evento de tipo clic. Este en concreto:
<script>
jQuery(function ($) {
$( document ).ready(function() {
$(".gaeventdescarga.et_pb_button").on("click", function(e){
gtag('event', 'accion', {'event_category': 'categoria', 'event_label': 'etiqueta', 'value': 'valor'});
});
});
});
</script>
Sustituye en el código la clase .gaeventdescarga
por la que tú hayas definido en el módulo del botón y cambia accion, categoria, etiqueta y valor
por las que especificaste al crear el objetivo con evento en Analytics.
¿Dónde ponemos ese script con el seguimiento?
La magia viene ahora y puede enfocarse de dos formas distintas.
Opción A
Si se trata de un código que va a estar en varias páginas del sitio (por ejemplo en un sidebar, en el pie o incluso en la cabecera común a toda la web), te recomiendo añadirlo en Divi > Opciones del tema > Integración > Agregar código al <head> de su blog. El objetivo es que se cargue siempre (en todas las páginas) al añadirse a las plantillas a través del head y que de esa forma lo haga antes de que se pinte el resto de la web.

Opción B
Si solo va a estar activo en una o pocas páginas (por ejemplo en una página de catálogos) lo ideal es que solo lo carguemos cuando nos haga falta, es decir, en esa página en concreto. Así no estaremos sobrecargando y enlenteciendo el resto de páginas donde no nos hace falta.
Para ello añadimos en la parte superior de nuestra página (antes del botón en todo caso) un módulo de tipo Código y pegamos dentro de él nuestro script.

Guardamos y ya tenemos listo el seguimiento del evento de clic en el botón.
Como imaginarás, este procedimiento puede usarse con cualquier cosa clicable que tengas en tu sitio siempre que puedas aplicarle un estilo. Pueden ser botones pero también enlaces en sliders, blurbs, widgets,… cualquier cosa.
Si tienes dudas sobre el funcionamiento, puedes verificarlo en tu cuenta de Analytics en tiempo real siguiendo el procedimiento que explicaba en el post anterior sobre los eventos.
A partir de ahora en tus informes de Conversiones tendrás identificados los objetivos creados con eventos y podrás ir comprobando su rendimiento, CTR, consecuciones y demás métricas.
Foto de cabecera: James Royal-Lawson CC-BY-SA
Hola, muchas gracias por entregar esta información. sin embargo intento hacerlo pero no me funciona. no se que estoy haciendo mal, pero al momento de entrar en analytics, no aparece en los comportamientos en eventos. Solo usé la opción B.
me podrias ayudar?
Saludos!
¿Estás haciendo las pruebas en tiempo real? Hay muchas cosas que pueden fallar y se deben revisar. ¿El código de seguimiento registra las visitas?
hola!. si, probe en tiempo real, esto lo hice anoche, y aun no veo registro. 🙁 .
¿Pero las visitas de los usuarios tampoco las registra?
Hola Pablo, gracias por toda la información, estoy en el curso de Boulda de Analytics Intrmedio pero como no toman la clase con la platilla de Divi, me encontre con este articulo 🙂 mi consulta es… hice toda la configuración, pero cuando voy a informes en tiempo real, evento, me refleja otros nombres los cuales no se de donde salen, como por ejemplo: acción del evento: From, Etiqueta del evento: class: et_pb_contact_form clearfix. y el codigo que puse en el divi fue:
jQuery(function ($) {
$( document ).ready(function() {
$(«.gaeventdescarga.et_pb_button»).on(«click», function(e){
gtag(‘event’, ‘accion’, {‘event_category’: ‘descargar’, ‘event_label’: ‘ficha’, ‘value’: ‘valor’});
});
});
});
dejando la misma clase de tu ejemplo y cambiando los parametros de evento a los mismo de mi Objetivo/Evento de Analytics.
Muchas gracias por tu ayuda.
Hola David, ¿estas trabajando con una propiedad de GA3 o GA4?
¡Gracias Pablo! Me funcionó perfecto con botones.
Intenté usarlo con un blurb y con un CTA pero no funcionó, sospecho que es por la clase .et_pb_button de tu código, sin embargo, en el caso del blurb la cambié por .et_pb_blurb y tampoco funcionó.
Hola, Luis. Para un blurb yo añadiría una clase o identificador específico en todos sus elementos clicables.
Hola, Pablo!
Genial tu artículo. He conseguido que capte los clics en los botones (evento) pero no los transforma en conversiones y no entiendo porqué.
Gracias por adelantado.
Hola, Llum. Gracias por tu comentario :-). ¿Has convertido los eventos en conversiones previamente? Ten en cuenta que no lo hacen por defecto.
Hola de nuevo! Muchas gracias por responder tan rápido
Creo que sí, entiendo que tu pregunta és si he definido el objetivo evento con categoria, acción y etiqueta. ¿Es así? ¿O debo hacer algo más?
Mil gracias
Hola, no. Me refiero a que ahora tienes que convertir ese evento en un objetivo, para que se muestre en los informes de conversión. La configuración del evento solo hace que la información llegue a Analytics, ahora debes indicarle qué hacer con ella.
Pues eso no sé como hacerlo. ¿Tienes algún post donde lo expliques?
Gracias
Lo tengo como objectivo en Analytics y siempre me ha funcionado así, lo único que eran webs sin divi
No, no tengo vídeo o post de eso. Ese tipo de cuestiones las cubro en mi curso de Google Analytics 4: https://3ymedia.school/productos/curso-de-google-analytics-4/
Buenos días Pablo,
muchas gracias por tus post. Sabes cómo añadir una etiqueta de seguimiento de eventos para medir los clicks en el teléfono e email de la cabecera de Divi? No veo como hacerlo.
Muchas gracias!
Hola, Pilar. Podrías hacerlo añadiendo un clase al enlace y usando un evento de Tag Manager aplicado a clics en enlaces con esa clase concreta.
Hola Pablo.
Gracias por tu post, es genial.
Tienes algún post donde expliques como añadir una etiqueta de seguimiento de facebook en un botón de whatsapp ?
Muchas gracias
Hola, José. No lo tengo, lo siento. Pero FB tiene un buen sistema de pixeles para detectar clics en botones ¿Lo has probado con las herramientas nativas del FB Business Manager?
Hola Paglo, gracias por el post, ha sido de gran ayuda, claro y conciso.