Використовуйте jQuery для прослуховування та передачі відстеження подій Google Analytics для будь-якого кліку

Відстеження подій jQuery для перегляду кліків Google Analytics

Мене дивує, що більше інтеграцій і систем не включаються автоматично Відстеження подій Google Analytics на своїх платформах. Більшу частину часу, який я працюю на сайтах клієнтів, я займаюся розробкою відстеження подій, щоб надати клієнту необхідну інформацію про те, яка поведінка користувачів працює або не працює на сайті.

Зовсім недавно я писав про те, як відстежувати mailto натискає, тел натискає, і Подання форми Elementor. Я збираюся продовжувати ділитися рішеннями, які я пишу, сподіваючись, що вони допоможуть вам краще проаналізувати продуктивність вашого сайту або веб-програми.

Цей приклад забезпечує дуже простий спосіб включення відстеження подій Google Analytics у будь-який тег прив’язки шляхом додавання елемента даних, який включає категорію події Google Analytics, дію події Google Analytics і мітку події Google Analytics. Ось приклад посилання, яке містить елемент даних, що називається подія:

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

Обов’язковою умовою для вашого сайту є включення до нього jQuery… на якому працює цей скрипт. Після завантаження вашої сторінки цей сценарій додає на вашу сторінку слухача для всіх, хто натискає елемент подія дані… потім він фіксує та аналізує категорію, дію та мітку, які ви вкажете в полі.

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

Примітка: я включив сповіщення (закоментовано), щоб ви могли перевірити, що насправді пройдено.

Якщо ви використовуєте jQuery на WordPress, вам захочеться трохи змінити код, оскільки WordPress не цінує ярлик $:

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

Це не найнадійніший сценарій, і вам може знадобитися додаткове очищення, але він має допомогти вам почати!