Gebruik jQuery om te luister en slaag Google Analytics-gebeurtenisopsporing vir enige klik

jQuery Luister vir klikke om Google Analytics-gebeurtenisnasporing te slaag

Ek is verbaas dat meer integrasies en stelsels nie outomaties insluit nie Google Analytics Gebeurtenisnasporing in hul platforms. Baie van my tyd wat ek op kliënte se webwerwe werk, is die ontwikkeling van dop vir Events om die kliënt te voorsien van die inligting wat hulle nodig het oor watter gebruikersgedrag op die webwerf werk of nie.

Mees onlangs het ek geskryf oor hoe om op te spoor mailto-klikke, tel klik, en Elementor-vormvoorleggings. Ek gaan voort om die oplossings wat ek skryf te deel met die hoop dat dit jou sal help om jou werf of webtoepassing se werkverrigting beter te ontleed.

Hierdie voorbeeld bied 'n baie eenvoudige manier om Google Analytics Gebeurtenisnasporing by enige ankermerker in te sluit deur 'n data-element by te voeg wat die Google Analytics Gebeurteniskategorie, Google Analytics Gebeurtenisaksie en Google Analytics Gebeurtenisetiket insluit. Hier is 'n voorbeeld van 'n skakel wat die data-element, genoem gebeurtenis:

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

'n Voorvereiste vir jou werf is om jQuery daarin in te sluit ... waarmee hierdie skrif aangedryf word. Sodra jou bladsy gelaai is, voeg hierdie skrif 'n luisteraar by jou bladsy vir enigiemand wat op 'n element klik gebeurtenis data … dan vang en ontleed dit die kategorie, aksie en etiket wat jy in die veld spesifiseer.

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

Kennisgewing: Ek het 'n waarskuwing (uitgemerk) ingesluit sodat jy kan toets wat werklik geslaag is.

As jy jQuery op WordPress gebruik, sal jy die kode net 'n bietjie wil wysig aangesien WordPress nie die $-kortpad waardeer nie:

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

Dit is nie die mees robuuste skrif nie en jy sal dalk 'n bietjie ekstra skoonmaak moet doen, maar dit behoort jou aan die gang te kry!