Koristite jQuery za slušanje i slanje praćenja događaja Google Analytics za bilo koji klik

Iznenađen sam što se više integracija i sustava ne uključuje automatski Google Analytics praćenje događaja u svojim platformama. Velik dio mog vremena radeći na klijentovim web stranicama razvija praćenje događaja kako bih klijentu pružio potrebne informacije o tome koja ponašanja korisnika funkcioniraju ili ne rade na stranici.

Nedavno sam pisao o tome kako pratiti mailto klikovi, tel kliknei Podnošenje obrasca Elementor. Nastavit ću dijeliti rješenja koja pišem s nadom da će vam pomoći da bolje analizirate izvedbu vaše web-lokacije ili web-aplikacije.

Ovaj primjer pruža vrlo jednostavan način uključivanja praćenja događaja Google Analyticsa u bilo koju oznaku sidra dodavanjem elementa podataka koji uključuje kategoriju događaja Google Analytics, radnju događaja Google Analytics i oznaku događaja Google Analytics. Evo primjera veze koja uključuje element podataka, tzv događaj:

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

Preduvjet za vašu web-lokaciju je uključivanje jQueryja u nju... s kojom se ova skripta pokreće. Nakon što se vaša stranica učita, ova skripta dodaje slušatelja vašoj stranici za svakoga tko klikne na element s događaj podaci… zatim hvata i analizira kategoriju, radnju i oznaku koju navedete unutar polja.

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

Napomena: Uključio sam upozorenje (komentirano) tako da možete testirati što je zapravo prošlo.

Ako koristite jQuery na WordPressu, htjet ćete samo malo izmijeniti kôd jer WordPress ne cijeni prečac $:

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

To nije najsnažniji skript i možda ćete morati dodatno očistiti, ali bi vas trebala pokrenuti!