Utilizați jQuery pentru a asculta și a transmite urmărirea evenimentelor Google Analytics pentru orice clic

jQuery Ascultați clicuri pentru a trece Urmărirea evenimentelor Google Analytics

Sunt surprins că mai multe integrări și sisteme nu includ automat Urmărirea evenimentelor Google Analytics pe platformele lor. O mare parte din timpul meu de lucru pe site-urile clienților este dezvoltarea de urmărire pentru evenimente pentru a oferi clientului informațiile de care au nevoie despre comportamentele utilizatorilor care funcționează sau nu pe site.

Cel mai recent, am scris despre cum să urmăriți mailto clicuri, clicuri tel, și Trimiterile de formulare Elementor. Voi continua să împărtășesc soluțiile pe care le scriu, cu speranța că vă vor ajuta să vă analizați mai bine performanța site-ului sau a aplicației web.

Acest exemplu oferă un mijloc foarte simplu de a încorpora Urmărirea evenimentelor Google Analytics în orice etichetă de ancorare prin adăugarea unui element de date care include Categoria evenimentului Google Analytics, Acțiunea evenimentului Google Analytics și Eticheta evenimentului Google Analytics. Iată un exemplu de link care încorporează elementul de date, numit gaevent:

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

O condiție prealabilă pentru site-ul dvs. este includerea jQuery în el... cu care este alimentat acest script. Odată ce pagina dvs. este încărcată, acest script adaugă un ascultător la pagina dvs. pentru oricine face clic pe un element cu gaevent date... apoi captează și analizează categoria, acțiunea și eticheta pe care le specificați în câmp.

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

Observație: am inclus o alertă (comentată), astfel încât să puteți testa ceea ce a trecut de fapt.

Dacă rulați jQuery pe WordPress, veți dori să modificați codul doar puțin, deoarece WordPress nu apreciază comanda rapidă $:

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

Nu este cel mai robust script și poate fi necesar să faceți o curățare suplimentară, dar ar trebui să vă înceapă!