Eventos de Analytics en botones de Divi

por

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

20 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

  2. 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.

    Responder

  3. ¡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ó.

    Responder

  4. 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.

    Responder

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

    Responder

    • 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.

      Responder

  6. 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

    Responder

    • 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?

      Responder

Deja un comentario