Usa jQuery per ascoltare e passare il monitoraggio degli eventi di Google Analytics per qualsiasi clic

jQuery Ascolta i clic per superare il monitoraggio degli eventi di Google Analytics

Sono sorpreso che più integrazioni e sistemi non includano automaticamente Monitoraggio degli eventi di Google Analytics nelle loro piattaforme. Gran parte del mio tempo che lavoro sui siti dei clienti è lo sviluppo del monitoraggio degli eventi per fornire al cliente le informazioni di cui ha bisogno su quali comportamenti degli utenti stanno funzionando o meno sul sito.

Più di recente, ho scritto su come tracciare mailto clic, clic di telefonoe Invii di moduli Elementor. Continuerò a condividere le soluzioni che sto scrivendo con la speranza che ti aiuti ad analizzare meglio le prestazioni del tuo sito o delle tue applicazioni web.

Questo esempio fornisce un mezzo molto semplice per incorporare il monitoraggio degli eventi di Google Analytics in qualsiasi tag di ancoraggio aggiungendo un elemento dati che include la categoria evento di Google Analytics, l'azione evento di Google Analytics e l'etichetta evento di Google Analytics. Ecco un esempio di collegamento che incorpora l'elemento dati, chiamato evento:

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

Un prerequisito per il tuo sito è includere jQuery in esso... con cui è alimentato questo script. Una volta che la tua pagina è stata caricata, questo script aggiunge un listener alla tua pagina per chiunque faccia clic su un elemento con evento dati... quindi acquisisce e analizza la categoria, l'azione e l'etichetta specificata all'interno 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>

Avviso: ho incluso un avviso (commentato) in modo che tu possa testare ciò che è stato effettivamente superato.

Se stai eseguendo jQuery su WordPress, ti consigliamo di modificare leggermente il codice poiché WordPress non apprezza la scorciatoia $:

<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 è lo script più robusto e potrebbe essere necessario eseguire alcune operazioni di pulizia aggiuntive, ma dovrebbe iniziare!