Käytä jQueryä kuunnellaksesi ja välittääksesi Google Analyticsin tapahtumaseurantaa kaikista napsautuksista

jQuery Listen for Clicks läpäisemään Google Analytics -tapahtumaseurannan

Olen yllättynyt siitä, että lisää integraatioita ja järjestelmiä ei sisälly automaattisesti Google Analytics -tapahtumaseuranta heidän alustoillaan. Suurin osa asiakkaiden sivustoilla työskentelystäni ajasta on tapahtumien seurannan kehittäminen, jotta asiakkaalle saataisiin heidän tarvitsemansa tiedot siitä, mitkä käyttäjät toimivat tai eivät toimi sivustolla.

Viimeksi kirjoitin jäljittämisestä mailto napsautuksia, puhelin napsauttaaja Elementor-lomakelähetykset. Aion jatkossakin jakaa kirjoittamani ratkaisut toivoen, että ne auttavat sinua analysoimaan paremmin sivustosi tai verkkosovelluksesi suorituskykyä.

Tämä esimerkki tarjoaa erittäin yksinkertaisen tavan sisällyttää Google Analytics -tapahtumaseuranta mihin tahansa ankkuritunnisteeseen lisäämällä tietoelementin, joka sisältää Google Analytics -tapahtumaluokan, Google Analytics -tapahtumatoiminnon ja Google Analytics -tapahtumatunnisteen. Tässä on esimerkki linkistä, joka sisältää tietoelementin nimeltä gaevent:

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

Sivustosi edellytyksenä on jQueryn sisällyttäminen siihen… jota tämä komentosarja toimii. Kun sivusi on ladattu, tämä skripti lisää sivullesi kuuntelijan kaikille, jotka napsauttavat elementtiä gaevent tiedot… sitten se kaappaa ja jäsentää kentässä määrittämäsi luokan, toiminnon ja tunnisteen.

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

Huomautus: Olen lisännyt varoituksen (kommentoitu), jotta voit testata, mikä on todella läpäissyt.

Jos käytät jQueryä WordPressissä, sinun kannattaa muokata koodia vain vähän, koska WordPress ei arvosta $-pikakuvaketta:

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

Se ei ole tehokkain skripti, ja saatat joutua tekemään lisäpuhdistusta, mutta sen pitäisi saada sinut alkuun!