Use jQuery para escoitar e pasar o seguimento de eventos de Google Analytics para calquera clic

jQuery Escoita os clics para pasar o seguimento de eventos de Google Analytics

Sorpréndeme que non se inclúan automaticamente máis integracións e sistemas Seguimento de eventos de Google Analytics nas súas plataformas. Gran parte do meu tempo traballando nos sitios dos clientes está a desenvolver o seguimento de eventos para proporcionarlle ao cliente a información que necesita sobre os comportamentos dos usuarios que funcionan ou non no sitio.

Máis recentemente, escribín sobre como rastrexar mailto clicks, tel clicse Envíos de formularios Elementor. Vou seguir compartindo as solucións que estou escribindo coa esperanza de que che axude a analizar mellor o rendemento do teu sitio ou aplicación web.

Este exemplo proporciona un medio moi sinxelo de incorporar o seguimento de eventos de Google Analytics en calquera etiqueta de ancoraxe engadindo un elemento de datos que inclúe a categoría de eventos de Google Analytics, a acción de eventos de Google Analytics e a etiqueta de eventos de Google Analytics. Aquí tes un exemplo dunha ligazón que incorpora o elemento de datos, chamado gaevent:

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

Un requisito previo para o teu sitio é incluír jQuery nel... co que funciona este script. Unha vez cargada a túa páxina, este script engade un oínte á túa páxina para quen faga clic nun elemento con gaevent datos... despois captura e analiza a categoría, acción e etiqueta que especifique no 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: incluín unha alerta (comentada) para que poidas probar o que realmente pasou.

Se estás executando jQuery en WordPress, quererás modificar un pouco o código xa que WordPress non aprecia o atallo $:

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

Non é o script máis robusto e quizais necesites facer algunha limpeza adicional, pero debería comezar!