Använd jQuery för att lyssna och klara händelsespårning i Google Analytics för alla klick

jQuery Lyssna efter klick för att klara händelsespårning i Google Analytics

Jag är förvånad över att fler integrationer och system inte automatiskt ingår Google Analytics händelsespårning på sina plattformar. Mycket av min tid som jag arbetar på klienters webbplatser är att utveckla spårning för Events för att ge klienten den information de behöver om vilka användarbeteenden som fungerar eller inte fungerar på webbplatsen.

Senast skrev jag om hur man spårar mailto-klick, tel klickaroch Elementor-formulärinlämningar. Jag kommer att fortsätta att dela med mig av lösningarna som jag skriver med hopp om att det hjälper dig att bättre analysera din webbplats eller webbapplikations prestanda.

Det här exemplet ger ett mycket enkelt sätt att integrera Google Analytics-händelsespårning i valfri ankartagg genom att lägga till ett dataelement som inkluderar Google Analytics-händelsekategorin, Google Analytics-händelseåtgärd och Google Analytics-händelseetikett. Här är ett exempel på en länk som innehåller dataelementet, kallad gaevent:

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

En förutsättning för din webbplats är att inkludera jQuery i den... som det här skriptet drivs med. När din sida har laddats lägger det här skriptet till en lyssnare på din sida för alla som klickar på ett element med gaevent data... sedan fångar och analyserar den kategorin, åtgärden och etiketten du anger i fältet.

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

Observera: Jag har inkluderat en varning (kommenterad ut) så att du kan testa vad som faktiskt har godkänts.

Om du kör jQuery på WordPress vill du ändra koden lite eftersom WordPress inte uppskattar genvägen $:

<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 är inte det mest robusta skriptet och du kan behöva göra lite extra rensning, men det borde komma igång!