Brug jQuery til at lytte og bestå Google Analytics-hændelsessporing for ethvert klik

jQuery Lyt efter klik for at bestå hændelsessporing i Google Analytics

Jeg er overrasket over, at flere integrationer og systemer ikke automatisk inkluderer Google Analytics hændelsessporing i deres platforme. Meget af min tid på at arbejde på klienters websteder er at udvikle sporing til Events for at give klienten den information, de har brug for, om hvilken brugeradfærd, der fungerer eller ikke fungerer på webstedet.

Senest skrev jeg om, hvordan man sporer mailto klik, tlf klikkerog Elementor-formularindsendelser. Jeg vil fortsætte med at dele de løsninger, jeg skriver, i håb om, at det hjælper dig til bedre at analysere dit websted eller din webapplikations ydeevne.

Dette eksempel giver en meget enkel måde at inkorporere Google Analytics-hændelsessporing på i ethvert ankertag ved at tilføje et dataelement, der inkluderer Google Analytics-hændelseskategorien, Google Analytics hændelseshandling og Google Analytics hændelsesetiket. Her er et eksempel på et link, der inkorporerer dataelementet, kaldet gaevent:

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

En forudsætning for dit websted er at inkludere jQuery i det ... som dette script er drevet med. Når din side er indlæst, tilføjer dette script en lytter til din side, som alle klikker på et element med gaevent data... så fanger og analyserer den den kategori, handling og etiket, du angiver i feltet.

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

Bemærk: Jeg har inkluderet en advarsel (kommenteret ud), så du kan teste, hvad der faktisk er bestået.

Hvis du kører jQuery på WordPress, vil du bare ændre koden lidt, da WordPress ikke sætter pris på $-genvejen:

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

Det er ikke det mest robuste script, og du skal muligvis gøre noget ekstra oprydning, men det burde få dig i gang!