Use jQuery para escuchar y pasar el seguimiento de eventos de Google Analytics para cualquier clic

jQuery Listen for Clicks para pasar el seguimiento de eventos de Google Analytics

Me sorprende que más integraciones y sistemas no incluyan automáticamente Seguimiento de eventos de Google Analytics en sus plataformas. Gran parte de mi tiempo trabajando en los sitios de los clientes es desarrollar el seguimiento de Eventos para proporcionar al cliente la información que necesita sobre qué comportamientos de los usuarios funcionan o no en el sitio.

Más recientemente, escribí sobre cómo rastrear clics de correo a, clics de teléfonoy Envíos de formularios de Elementor. Continuaré compartiendo las soluciones que estoy escribiendo con la esperanza de que le ayuden a analizar mejor el rendimiento de su sitio o aplicación web.

Este ejemplo proporciona un medio muy simple de incorporar el seguimiento de eventos de Google Analytics en cualquier etiqueta de anclaje agregando un elemento de datos que incluye la categoría de evento de Google Analytics, la acción de evento de Google Analytics y la etiqueta de evento de Google Analytics. Aquí hay un ejemplo de un enlace que incorpora el elemento de datos, llamado evento:

<a href="#" data-gaevent="Category,Action,Label">Click Here</a>

Un requisito previo para su sitio es incluir jQuery en él... con el que funciona este script. Una vez que su página está cargada, este script agrega un oyente a su página para cualquier persona que haga clic en un elemento con evento datos... luego captura y analiza la categoría, la acción y la etiqueta que especifique dentro del campo.

<script>
  $(document).ready(function() {      
    $(document).on('click', '[data-gaevent]', function(e) {
      var $link = $(this);
      var csvEventData = $link.data('gaevent');
      var eventParams = csvEventData.split(',');
      if (!eventParams) { return; }
        eventCategory = eventParams[0]
        eventAction = eventParams[1]
        eventLabel = eventParams[2]
        gtag('event',eventAction,{'event_category': eventCategory,'event_label': eventLabel})
        //alert("The Google Analytics Event passed is Action: " + eventAction + ", Category: " + eventCategory + ", Label: " + eventLabel);
    });
  });
</script>

Aviso: he incluido una alerta (comentada) para que pueda probar lo que realmente pasó.

Si está ejecutando jQuery en WordPress, querrá modificar el código solo un poco ya que WordPress no aprecia el atajo $:

<script>
  jQuery(document).ready(function() {      
    jQuery(document).on('click', '[data-gaevent]', function(e) {
      var $link = jQuery(this);
      var csvEventData = $link.data('gaevent');
      var eventParams = csvEventData.split(',');
      if (!eventParams) { return; }
        eventCategory = eventParams[0]
        eventAction = eventParams[1]
        eventLabel = eventParams[2]
        gtag('event',eventAction,{'event_category': eventCategory,'event_label': eventLabel})
        //alert("The Google Analytics Event passed is Action: " + eventAction + ", Category: " + eventCategory + ", Label: " + eventLabel);
    });
  });
</script>

No es la secuencia de comandos más robusta y es posible que deba realizar una limpieza adicional, ¡pero debería ayudarlo a comenzar!