Bruk jQuery for å lytte og bestå Google Analytics-hendelsessporing for ethvert klikk

jQuery Lytt etter klikk for å bestå hendelsessporing i Google Analytics

Jeg er overrasket over at flere integrasjoner og systemer ikke automatisk inkluderer Google Analytics Hendelsessporing på deres plattformer. Mye av tiden min som jeg jobber med klienters nettsteder er å utvikle sporing for Events for å gi klienten informasjonen de trenger om hvilken brukeratferd som fungerer eller ikke fungerer på siden.

Senest skrev jeg om hvordan man sporer mailto-klikk, tlf klikkerog Elementor-skjemainnleveringer. Jeg kommer til å fortsette å dele løsningene jeg skriver med håp om at det hjelper deg med å analysere nettstedet eller nettapplikasjonens ytelse bedre.

Dette eksemplet gir en veldig enkel måte å inkorporere Google Analytics-hendelsessporing i en hvilken som helst ankertag ved å legge til et dataelement som inkluderer Google Analytics-hendelseskategorien, Google Analytics-hendelseshandlingen og Google Analytics-hendelsesetiketten. Her er et eksempel på en lenke som inneholder dataelementet, kalt gaevent:

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

En forutsetning for nettstedet ditt er å inkludere jQuery i det ... som dette skriptet er drevet med. Når siden din er lastet inn, legger dette skriptet til en lytter til siden din for alle som klikker på et element med gaevent data ... så fanger og analyserer den kategorien, handlingen og etiketten du spesifiserer 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>

Merk: Jeg har tatt med et varsel (kommentert ut) slik at du kan teste hva som faktisk er bestått.

Hvis du kjører jQuery på WordPress, vil du bare endre koden litt siden WordPress ikke setter pris på $-snarveien:

<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 skriptet, og du må kanskje gjøre litt ekstra opprydding, men det bør få deg i gang!