Gebruik jQuery om te luisteren en het bijhouden van Google Analytics-gebeurtenissen voor elke klik door te geven

jQuery Luister naar klikken om te slagen voor het bijhouden van gebeurtenissen in Google Analytics

Het verbaast me dat meer integraties en systemen niet automatisch worden opgenomen Google Analytics-gebeurtenissen bijhouden op hun platformen. Veel van mijn tijd aan het werken aan de sites van klanten, is het ontwikkelen van tracking voor evenementen om de klant de informatie te geven die ze nodig hebben over welk gebruikersgedrag wel of niet werkt op de site.

Meest recent schreef ik over hoe te volgen mailto klikken, tel klikken en Elementor formulier inzendingen. Ik ga door met het delen van de oplossingen die ik schrijf, in de hoop dat het u helpt om de prestaties van uw site of webtoepassing beter te analyseren.

Dit voorbeeld biedt een zeer eenvoudige manier om Google Analytics-gebeurtenistracking op te nemen in een ankertag door een gegevenselement toe te voegen dat de Google Analytics-gebeurteniscategorie, Google Analytics-gebeurtenisactie en Google Analytics-gebeurtenislabel bevat. Hier is een voorbeeld van een link die het data-element bevat, genaamd gaevent:

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

Een vereiste voor uw site is dat u jQuery erin opneemt ... waarmee dit script wordt aangedreven. Zodra uw pagina is geladen, voegt dit script een luisteraar toe aan uw pagina voor iedereen die op een element klikt met gaevent data... dan vangt en parseert het de categorie, actie en label die u opgeeft in het veld.

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

Opmerking: ik heb een waarschuwing toegevoegd (uitgecommentarieerd) zodat u kunt testen wat er daadwerkelijk is geslaagd.

Als je jQuery op WordPress gebruikt, moet je de code een klein beetje aanpassen, omdat WordPress de $ snelkoppeling niet op prijs stelt:

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

Het is niet het meest robuuste script en je moet misschien wat extra opschonen, maar het zou je op weg moeten helpen!