Użyj jQuery do nasłuchiwania i przekazywania śledzenia zdarzeń Google Analytics dla dowolnego kliknięcia

jQuery Nasłuchuj kliknięć, aby przekazać śledzenie zdarzeń Google Analytics

Dziwię się, że więcej integracji i systemów nie włącza się automatycznie Śledzenie zdarzeń Google Analytics na swoich platformach. Dużo czasu, kiedy pracuję na witrynach klientów, zajmuje się opracowywaniem śledzenia zdarzeń, aby zapewnić klientowi informacje, których potrzebuje, na temat tego, jakie zachowania użytkowników działają lub nie działają w witrynie.

Ostatnio pisałem o tym, jak śledzić mailto kliknięć, tel kliknięć, Przesyłanie formularzy Elementor. Zamierzam dalej dzielić się rozwiązaniami, które piszę z nadzieją, że pomoże to lepiej przeanalizować wydajność witryny lub aplikacji internetowej.

Ten przykład zapewnia bardzo prosty sposób włączenia śledzenia zdarzeń Google Analytics do dowolnego tagu kotwicy przez dodanie elementu danych, który zawiera kategorię zdarzenia Google Analytics, akcję zdarzenia Google Analytics i etykietę zdarzenia Google Analytics. Oto przykład linku, który zawiera element danych o nazwie Gaevent:

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

Warunkiem wstępnym dla Twojej witryny jest uwzględnienie w niej jQuery… na której opiera się ten skrypt. Po załadowaniu strony ten skrypt dodaje detektor do Twojej strony dla każdego, kto kliknie element za pomocą Gaevent dane… następnie przechwytuje i analizuje kategorię, akcję i etykietę określoną w polu.

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

Uwaga: Dołączyłem alert (skomentowany), aby można było sprawdzić, co faktycznie zostało przekazane.

Jeśli używasz jQuery na WordPressie, będziesz chciał trochę zmodyfikować kod, ponieważ WordPress nie docenia skrótu $:

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

Nie jest to najsolidniejszy skrypt i być może będziesz musiał zrobić dodatkowe porządki, ale to powinno Ci zacząć!