Gumamit ng jQuery upang Makinig At Ipasa ang Pagsubaybay sa Kaganapan ng Google Analytics Para sa Anumang Pag-click

jQuery Makinig ng Mga Pag-click upang Ipasa ang Pagsubaybay sa Kaganapan ng Google Analytics

Nagulat ako na mas maraming integration at system ang hindi awtomatikong kasama Pagsubaybay sa Kaganapan ng Google Analytics sa kanilang mga plataporma. Karamihan sa aking oras sa pagtatrabaho sa mga site ng mga kliyente ay bumubuo ng pagsubaybay para sa Mga Kaganapan upang maibigay sa kliyente ang impormasyong kailangan nila sa kung anong mga gawi ng user ang gumagana o hindi gumagana sa site.

Kamakailan lamang, nagsulat ako tungkol sa kung paano subaybayan mga pag-click sa mailto, mga pag-click sa tel, at Mga pagsusumite ng Elementor form. Patuloy kong ibabahagi ang mga solusyong isinusulat ko nang may pag-asang makakatulong ito sa iyo na mas mahusay na pag-aralan ang pagganap ng iyong site o web application.

Ang halimbawang ito ay nagbibigay ng napakasimpleng paraan ng pagsasama ng Google Analytics Event Tracking sa anumang anchor tag sa pamamagitan ng pagdaragdag ng elemento ng data na kinabibilangan ng Google Analytics Event Category, Google Analytics Event Action, at Google Analytics Event Label. Narito ang isang halimbawa ng isang link na nagsasama ng elemento ng data, na tinatawag na gaevent:

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

Ang isang paunang kinakailangan para sa iyong site ay ang pagsasama ng jQuery dito... kung saan pinapagana ang script na ito. Kapag na-load na ang iyong pahina, ang script na ito ay nagdaragdag ng tagapakinig sa iyong pahina para sa sinumang nag-click sa isang elemento na may gaevent data... pagkatapos ay kinukuha at na-parse nito ang kategorya, aksyon, at label na iyong tinukoy sa loob ng field.

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

Paunawa: Nagsama ako ng alerto (nagkomento) para masubukan mo kung ano talaga ang naipasa.

Kung nagpapatakbo ka ng jQuery sa WordPress, gugustuhin mong baguhin nang kaunti ang code dahil hindi pinahahalagahan ng WordPress ang $ shortcut:

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

Hindi ito ang pinakamatatag na script at maaaring kailanganin mong gumawa ng karagdagang paglilinis, ngunit dapat itong makapagsimula!