Use jQuery para ouvir e passar o rastreamento de eventos do Google Analytics para qualquer clique

jQuery Ouça cliques para passar no rastreamento de eventos do Google Analytics

Estou surpreso que mais integrações e sistemas não incluam automaticamente Acompanhamento de eventos do Google Analytics em suas plataformas. Grande parte do meu tempo trabalhando em sites de clientes é desenvolvendo rastreamento de eventos para fornecer ao cliente as informações necessárias sobre quais comportamentos do usuário estão funcionando ou não no site.

Mais recentemente, escrevi sobre como rastrear cliques mailto, cliques de telefonee Envios de formulários Elementor. Vou continuar compartilhando as soluções que estou escrevendo com a esperança de que isso ajude você a analisar melhor o desempenho do seu site ou aplicativo da web.

Este exemplo fornece um meio muito simples de incorporar o rastreamento de eventos do Google Analytics em qualquer tag âncora, adicionando um elemento de dados que inclui a categoria de evento do Google Analytics, a ação de evento do Google Analytics e o rótulo de evento do Google Analytics. Aqui está um exemplo de um link que incorpora o elemento de dados, chamado gaevent:

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

Um pré-requisito para o seu site é incluir jQuery nele… com o qual este script é alimentado. Depois que sua página é carregada, esse script adiciona um ouvinte à sua página para qualquer pessoa que clicar em um elemento com gaevent dados… em seguida, ele captura e analisa a categoria, ação e rótulo que você especifica 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í um alerta (comentado) para que você possa testar o que realmente passou.

Se você estiver executando o jQuery no WordPress, convém modificar um pouco o código, pois o WordPress não aprecia o atalho $:

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

Não é o script mais robusto e você pode precisar fazer alguma limpeza adicional, mas deve começar!