Utilitzeu jQuery per escoltar i passar el seguiment d'esdeveniments de Google Analytics per a qualsevol clic

jQuery Listen per clics per passar el seguiment d'esdeveniments de Google Analytics

Em sorprèn que més integracions i sistemes no s'incloguin automàticament Seguiment d'esdeveniments de Google Analytics a les seves plataformes. Gran part del meu temps treballant als llocs dels clients està desenvolupant el seguiment d'esdeveniments per proporcionar al client la informació que necessita sobre quins comportaments dels usuaris funcionen o no funcionen al lloc.

Més recentment, vaig escriure sobre com fer el seguiment mailto clics, clics al teli Enviaments de formularis Elementor. Continuaré compartint les solucions que estic escrivint amb l'esperança que us ajudin a analitzar millor el rendiment del vostre lloc o aplicació web.

Aquest exemple proporciona un mitjà molt senzill per incorporar el seguiment d'esdeveniments de Google Analytics a qualsevol etiqueta d'ancoratge afegint un element de dades que inclogui la categoria d'esdeveniments de Google Analytics, l'acció d'esdeveniments de Google Analytics i l'etiqueta d'esdeveniments de Google Analytics. Aquí teniu un exemple d'enllaç que incorpora l'element de dades, anomenat gaevent:

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

Un requisit previ per al vostre lloc és incloure-hi jQuery... amb el qual funciona aquest script. Un cop carregada la vostra pàgina, aquest script afegeix un oient a la vostra pàgina per a qualsevol persona que faci clic en un element amb gaevent dades... després captura i analitza la categoria, l'acció i l'etiqueta que especifiqueu al camp.

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

Avís: he inclòs una alerta (s'ha comentat) perquè pugueu provar el que realment s'ha passat.

Si esteu executant jQuery a WordPress, voldreu modificar el codi només una mica, ja que WordPress no aprecia la drecera $:

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

No és l'script més robust i és possible que hàgiu de fer una neteja addicional, però us hauria de començar!