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

jQuery Slušaj klikove za prolazak praćenja događaja Google Analytics

Iznenađen sam što se više integracija i sistema ne uključuje automatski Google Analytics Praćenje događaja na njihovim platformama. Veći dio mog vremena radeći na stranicama klijenata razvija praćenje događaja kako bi klijentu pružio informacije koje su mu potrebne o tome koja ponašanja korisnika funkcioniraju ili ne rade na stranici.

Nedavno sam pisao o tome kako pratiti mailto klikovi, tel klikne, I Podnošenje obrasca Elementor. Nastavit ću dijeliti rješenja koja pišem u nadi da će vam pomoći da bolje analizirate performanse vaše web stranice ili web aplikacije.

Ovaj primjer pruža vrlo jednostavan način uključivanja praćenja događaja Google Analytics u bilo koju sidrenu oznaku 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 gaevent:

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

Preduslov za vašu web lokaciju je uključivanje jQueryja u nju… ​​kojom se ova skripta pokreće. Jednom kada se vaša stranica učita, ova skripta dodaje slušatelja vašoj stranici za svakoga ko klikne na element sa gaevent podaci… zatim hvata i analizira kategoriju, akciju 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 (komentarisano) tako da možete testirati šta je zapravo prošlo.

Ako koristite jQuery na WordPress-u, htjet ćete samo malo izmijeniti kod jer WordPress ne cijeni prečicu $:

<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 najrobusnija skripta i možda ćete trebati dodatno očistiti, ali trebalo bi da počnete!