Použite jQuery na počúvanie a odovzdávanie sledovania udalostí Google Analytics pre každé kliknutie

jQuery Listen for Clicks to pass Google Analytics Event Tracking

Som prekvapený, že viac integrácií a systémov automaticky nezahŕňa Sledovanie udalostí Google Analytics na svojich platformách. Väčšinu času, keď pracujem na stránkach klientov, vyvíjam sledovanie udalostí, aby som klientovi poskytol potrebné informácie o tom, aké správanie používateľov na stránke funguje alebo nefunguje.

Najnovšie som písal o tom, ako sledovať kliknutia mailto, tel kliknea Odoslanie formulárov Elementor. Budem pokračovať v zdieľaní riešení, ktoré píšem, s nádejou, že vám to pomôže lepšie analyzovať výkonnosť vašej stránky alebo webovej aplikácie.

Tento príklad poskytuje veľmi jednoduchý spôsob začlenenia sledovania udalostí služby Google Analytics do ľubovoľnej značky ukotvenia pridaním prvku údajov, ktorý zahŕňa kategóriu udalosti služby Google Analytics, akciu udalosti služby Google Analytics a štítok udalosti služby Google Analytics. Tu je príklad prepojenia, ktoré zahŕňa dátový prvok, tzv gaevent:

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

Predpokladom pre vašu stránku je zahrnutie jQuery do nej... s ktorým je poháňaný tento skript. Po načítaní vašej stránky tento skript pridá na vašu stránku poslucháča pre každého, kto klikne na prvok gaevent údaje... potom zachytí a analyzuje kategóriu, akciu a označenie, ktoré zadáte v poli.

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

Upozornenie: Zahrnul som upozornenie (komentované), aby ste mohli otestovať, čo skutočne prešlo.

Ak používate jQuery na WordPress, budete chcieť kód trochu upraviť, pretože WordPress nepozná skratku $:

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

Nie je to najrobustnejší skript a možno budete musieť urobiť nejaké dodatočné vyčistenie, ale mal by vám pomôcť začať!