Eventos de Analytics en botones de Divi

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

4 comentarios en “Eventos de Analytics en botones de Divi”

  1. 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!

    Responder

Deja un comentario

Share This